JS组件系列——表格组件神器：bootstraptable（⼆：⽗⼦表
和⾏列调序）
前⾔：上篇简单介绍了下Bootstrap Table的基础⽤法，没想到讨论还挺热烈的。有园友在评论中提到了⽗⼦表的⽤法，今天就结合Bootstrap table的⽗⼦表和⾏列调序的⽤法再来介绍下它稍微⾼级点的⽤法。
bootstrap table系列：
⼀、效果展⽰
今天稍微改变下⽅式，先来看看实现效果，后⾯再介绍代码实现及注意事项。来，效果图来⼀发：
1、⽗⼦表效果图
2、⾏调序
调序前
拖动⾏调序到第⼀⾏
3、列调序
调序前
拖动列标题调序
调序后
⼆、⽗⼦表代码详解
上章我们介绍Bootstrap table基础⽤法的时候介绍过，初始化表格的时候有⼀个属性“detailView”，将它设置为true，在每⾏的前⾯即可看到⼀个“+”形状的图标。点击这个图标即触发加载⼦表格的事件。⼤概的原理就是如此，来看看代码，其实也很简单。
1、初始化表格，注册⾏展开事件
      　$("#tb_powerset").bootstrapTable({
url: '/api/MenuApi/GetParentMenu',
method: 'get',
detailView: true,//⽗⼦表
//sidePagination: "server",
pageSize: 10,
pageList: [10, 25],
columns: [{
field: 'MENU_NAME',
title: '菜单名称'
}, {
field: 'MENU_URL',
title: '菜单URL'
}, {
field: 'PARENT_ID',
title: '⽗级菜单'
}, {
field: 'MENU_LEVEL',
title: '菜单级别'
}, ],
//注册加载⼦表的事件。注意下这⾥的三个参数！
onExpandRow: function (index, row, $detail) {
oInit.InitSubTable(index, row, $detail);
}
});
还是来看看⼦表加载事件onExpandRow对应⽅法function (index, row, $detail)的三个参数，
index：⽗表当前⾏的⾏索引。
row：⽗表当前⾏的Json数据对象。
$detail：当前⾏下⾯创建的新⾏⾥⾯的td对象。
第三个参数尤其重要，因为⽣成的⼦表的table在装载在$detail对象⾥⾯的。bootstrap table为我们⽣成了$detail这个对象，然后我们只需要往它⾥⾯填充我们想要的table即可。
2、我们来看oInit.InitSubTable()这个⽅法
//初始化⼦表格(⽆线循环)
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: '菜单名称'
}, {
field: 'MENU_URL',
title: '菜单URL'
}, {
field: 'PARENT_ID',
title: '⽗级菜单'
}, {
field: 'MENU_LEVEL',
title: '菜单级别'
}, ],
//⽆线循环取⼦表，直到⼦表⾥⾯没有记录
onExpandRow: function (index, row, $Subdetail) {
oInit.InitSubTable(index, row, $Subdetail);
}
});
};
由此可以看出⽣成⼦表的原理就是创建⼀个table对象cur_table，然后再注册这个对象的表格初始化即可。是不是很简单~~三、⾏调序代码详解
⾏调序的代码就更简单了，来看看。
1、需要额外引⽤两个js⽂件
jquery是什么功能组件<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页⾯定义表格时，添加两个属性
<table id="tb_order" data-use-row-attr-func="true" data-reorderable-rows="true"></table>
然后js表格初始化的时候不需要做任何修改，加载出来的表格即可实现⾏调序的功能。
四、列调序代码详解
和⾏调序类似。列调序的使⽤如下：
1、额外引⽤⼏个js和css

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。