快捷導(dǎo)航

JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調(diào)序】

更新時(shí)間：2016年05月10日 14:10:22 作者：懶得安分

本文結(jié)合Bootstrap table的父子表和行列調(diào)序的用法再來(lái)介紹下它稍微高級(jí)點(diǎn)的用法。對(duì)bootstrap表格組件相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧

Bootstrap Table是輕量級(jí)的和功能豐富的以表格的形式顯示的數(shù)據(jù)，支持單選，復(fù)選框，排序，分頁(yè),顯示/隱藏列,固定標(biāo)題滾動(dòng)表,響應(yīng)式設(shè)計(jì)，Ajax加載JSON數(shù)據(jù)，點(diǎn)擊排序的列，卡片視圖等。今天就結(jié)合Bootstrap table的父子表和行列調(diào)序的用法再來(lái)介紹下它稍微高級(jí)點(diǎn)的用法。

bootstrap table系列：

JS表格組件神器bootstrap table詳解（基礎(chǔ)版）

JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】

JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調(diào)序】

一、效果展示

今天稍微改變下方式，先來(lái)看看實(shí)現(xiàn)效果，后面再介紹代碼實(shí)現(xiàn)及注意事項(xiàng)。來(lái)，效果圖來(lái)一發(fā)：

1、父子表效果圖

2、行調(diào)序

調(diào)序前

拖動(dòng)行調(diào)序到第一行

3、列調(diào)序

調(diào)序前

拖動(dòng)列標(biāo)題調(diào)序

調(diào)序后

二、父子表代碼詳解

上章我們介紹Bootstrap table基礎(chǔ)用法的時(shí)候介紹過(guò)，初始化表格的時(shí)候有一個(gè)屬性“detailView”，將它設(shè)置為true，在每行的前面即可看到一個(gè)“+”形狀的圖標(biāo)。點(diǎn)擊這個(gè)圖標(biāo)即觸發(fā)加載子表格的事件。大概的原理就是如此，來(lái)看看代碼，其實(shí)也很簡(jiǎn)單。

1、初始化表格，注冊(cè)行展開(kāi)事件

$("#tb_powerset").bootstrapTable({
url: '/api/MenuApi/GetParentMenu',
method: 'get',
detailView: true,//父子表
//sidePagination: "server",
pageSize: 10,
pageList: [10, 25],
columns: [{
field: 'MENU_NAME',
title: '菜單名稱(chēng)'
}, {
field: 'MENU_URL',
title: '菜單URL'
}, {
field: 'PARENT_ID',
title: '父級(jí)菜單'
}, {
field: 'MENU_LEVEL',
title: '菜單級(jí)別'
}, ],
//注冊(cè)加載子表的事件。注意下這里的三個(gè)參數(shù)！
onExpandRow: function (index, row, $detail) {
oInit.InitSubTable(index, row, $detail);
}
});

還是來(lái)看看子表加載事件onExpandRow對(duì)應(yīng)方法function (index, row, $detail)的三個(gè)參數(shù)，

index：父表當(dāng)前行的行索引。

row：父表當(dāng)前行的Json數(shù)據(jù)對(duì)象。

$detail：當(dāng)前行下面創(chuàng)建的新行里面的td對(duì)象。

第三個(gè)參數(shù)尤其重要，因?yàn)樯傻淖颖淼膖able在裝載在$detail對(duì)象里面的。bootstrap table為我們生成了$detail這個(gè)對(duì)象，然后我們只需要往它里面填充我們想要的table即可。

2、我們來(lái)看oInit.InitSubTable()這個(gè)方法

//初始化子表格(無(wú)線循環(huán))
oInit.InitSubTable = function (index, row, $detail) {
var parentid = row.MENU_ID;
var cur_table = $detail.html('<table></table>').find('table');
$(cur_table).bootstrapTable({
url: '/api/MenuApi/GetChildrenMenu',
method: 'get',
queryParams: { strParentID: parentid },
ajaxOptions: { strParentID: parentid },
clickToSelect: true,
detailView: true,//父子表
uniqueId: "MENU_ID",
pageSize: 10,
pageList: [10, 25],
columns: [{
checkbox: true
}, {
field: 'MENU_NAME',
title: '菜單名稱(chēng)'
}, {
field: 'MENU_URL',
title: '菜單URL'
}, {
field: 'PARENT_ID',
title: '父級(jí)菜單'
}, {
field: 'MENU_LEVEL',
title: '菜單級(jí)別'
}, ],
//無(wú)線循環(huán)取子表，直到子表里面沒(méi)有記錄
onExpandRow: function (index, row, $Subdetail) {
oInit.InitSubTable(index, row, $Subdetail);
}
});
};

由此可以看出生成子表的原理就是創(chuàng)建一個(gè)table對(duì)象cur_table，然后再注冊(cè)這個(gè)對(duì)象的表格初始化即可。是不是很簡(jiǎn)單~~

三、行調(diào)序代碼詳解

行調(diào)序的代碼就更簡(jiǎn)單了，來(lái)看看。

1、需要額外引用兩個(gè)js文件

<script src="~/Content/jquery-ui-1.11.4.custom/external/jquery.tablednd.js"></script>
<script src="~/Content/bootstrap-table/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>

2、在cshtml頁(yè)面定義表格時(shí)，添加兩個(gè)屬性

<table id="tb_order" data-use-row-attr-func="true" data-reorderable-rows="true"></table>

然后js表格初始化的時(shí)候不需要做任何修改，加載出來(lái)的表格即可實(shí)現(xiàn)行調(diào)序的功能。

四、列調(diào)序代碼詳解

和行調(diào)序類(lèi)似。列調(diào)序的使用如下：

1、額外引用幾個(gè)js和css

<script src="~/Content/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script>
<link rel="stylesheet" href="../assets/examples.css">
<link rel="stylesheet" >
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

2、在cshtml頁(yè)面定義表格時(shí)，添加一個(gè)屬性

<table id="tb_departments" data-reorderable-columns="true"></table>

其他地方不用做任何修改。加載出來(lái)的表格即可實(shí)現(xiàn)列調(diào)序。有沒(méi)有很簡(jiǎn)單。

五、控件過(guò)濾

本來(lái)這篇準(zhǔn)備結(jié)束的，突然想起上章里面有一個(gè)搜索的功能，好像是服務(wù)端分頁(yè)的時(shí)候搜索功能沒(méi)法使用，于是想起之前再CS里面做過(guò)一個(gè)類(lèi)似每個(gè)列過(guò)濾的功能，博主好奇心又起來(lái)了，bootstrap table是否也有這種表格每列過(guò)濾的功能，于是查看文檔。結(jié)果不負(fù)所望，還真有~~我們來(lái)看看。

1、效果圖展示

2、代碼示例

（1）引入額外js

<script src="~/Content/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"></script>

（2）定義表格屬性及表頭屬性

<table id="tb_roles" data-filter-control="true">
<thead>
<tr>
<th data-field="ROLE_NAME" data-filter-control="select">角色名稱(chēng)</th>
<th data-field="DESCRIPTION" data-filter-control="input">角色描述</th>
<th data-field="ROLE_DEFAULTURL" data-filter-control="input">角色默認(rèn)頁(yè)面</th>
</tr>
</thead>
</table>

因?yàn)檫@里定義了表頭的屬性，所以，js初始化的時(shí)候就不用定義列了。

（3）js初始化

$('#tb_roles').bootstrapTable({
url: '/Role/GetRole',
method: 'get',
toolbar: '#toolbar',
striped: true,
cache: false,
striped: true,
pagination: true,
sortable: true,
queryParams: function (param) {
return param;
},
queryParamsType: "limit",
detailView: false,//父子表
sidePagination: "server",
pageSize: 10,
pageList: [10, 25, 50, 100],
search: true,
showColumns: true,
showRefresh: true,
minimumCountColumns: 2,
clickToSelect: true,
});

最開(kāi)始，博主以為這種搜索只能用戶客戶端分頁(yè)的情況，可是經(jīng)過(guò)調(diào)試發(fā)現(xiàn)并非如此，原來(lái)搜索的條件都能通過(guò)json傳遞到服務(wù)端。我們來(lái)看調(diào)試的過(guò)程