JS组件系列的Bootstrap表组件工件[二 父子表和行列序列]

Bootstrap Table是以表格形式显示的轻量级、功能丰富的数据，支持单选、复选框、排序、分页、显示/隐藏列、固定标题滚动表、响应式设计、Ajax加载JSON数据、点击排序列、卡片视图等。今天，结合Bootstrap表的父子表和行列排序的用法，我们将介绍它稍微高级的用法。

引导表系列：

JS组件工件引导表的详细说明(基础版)。

JS系列的引导表组件工件[最后一章]

JS系列的引导表组件工件[II。父子表和行列序列]

一、效果展示。

今天稍微换个方式，先看看实现效果，再介绍代码实现和注意事项。来，效果图来来去去：

1.父子表的呈现。

2.线路反转。

测序前。

拖动线条以重新排序到第一行。

3.列排序。

测序前。

拖动列标题以重新排序。

测序后，

二、父子表代码详解。

上一章我们介绍Bootstrap表的基本用法的时候，初始化表的时候有一个属性“detailView”，设置为true，每行前面都能看到一个“”形状的图标。单击此图标会触发加载子表的事件。这大概就是原理。看代码，其实很简单。

1.初始化表并注册行扩展事件。

$ ('# TB _ powerset ')。引导表({ URL : '/API/menu API/getparentmenu '，method:' get '，detailview3360 true，//父子表///sidepagenation : ' server '，Pagesize : 10，pagelist: [10，25]，column 3360[{ field 3360 ' menu _ name '，title:' menu name'}，{field3360' menu _ URL '，title3360 '注意这里的三个参数！onExpandRow:函数(索引，行，$detail) {oInit。InitSubTable(索引，行，$ detail)；}});我们来看看子表加载事件onExpandRow对应的函数的三个参数(index、row、$detail)。

Index:父表当前行的行索引。

Row:父表当前行的Json数据对象。

$detail:在当前行下面创建的新行中的td对象。

第三个参数尤其重要，因为生成的子表的表在$detail对象中。Bootstrap表为我们生成了object $detail，然后我们只需要用我们想要的表来填充它。

2.让我们看看oInit方法。InitSubTable()。

//初始化子表(无线循环)o init.init子表=function (index，row，$ detail){ var parent id=row . menu _ id；var cur _ table=$ detail . html(' table/table ')。查找(' table ')；$(cur_table)。bootstrapTable({ URL : '/API/MenuApi/getchildmenu '，method: 'get '，query params 3360 { strparentid : parentid }，Options : { str parentid 3360 parentid }，单击选择3360 true，detailview 3360 true，//父子表uniqueid : ' menu _ id '，pagesize : 10，Pagelist: [10InitSubTable(索引，行，$ Subdetail)；}});};可以看出，生成子表的原理是创建一个表对象cur_table，然后注册这个对象的表进行初始化。是不是很简单~ ~

三.行顺序代码的详细说明。

行序列代码要简单得多。让我们来看看。

1.需要引用另外两个js文件。

script src=' http : ~/Content/jquery-ui-1 . 11 . 4 . custom/external/jquery . table dnd . js '/script script src=' http : ~/Content/bootstrap-table/extensions-Order-rows/bootstrap-table-Order-rows . js '/script 2。在cshtml页面上定义表时，添加两个属性。

表id=' tb _ order '数据-use-row-attr-func=' true '数据-可重新排序-row=' true '/表。初始化js表时，不需要修改，加载的表可以实现行排序的功能。

四.序列代码的详细说明。

类似于行排序。列重新排序的用法如下：

1.引用一些js和css。

脚本src=' http : ~/Content/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder-columns . js '/script link rel='样式表' href='./assets/examples.css'link rel='样式表' href=' https://raw git.com/ako ttr/drag table/master/drag table . CSS ' Script src=' http :3359 code . jquery.com/ui/1 . 11 . 4/jquery-ui . js '/Script Script src=' http 3360https://raw git.com/ako ttr/drag table/master/jquery . drag table . js '/Script

表id=' TB _ departments ' data-reordable-columns=' true '/不需要修改表的其他部分。加载的表可以实现列重排序。简单吗？

动词（verb的缩写）控制过滤

这篇文章本来是要写完的，但是突然想到前一章有搜索功能。服务器分页的时候好像不能用搜索功能，于是想起之前在CS里做过类似过滤每一列的功能，博主的好奇心又起来了。bootstrap表是否也有过滤表中每一列的这个功能，所以我查了一下文档。结果没有达到预期，但确实是~ ~我们来看看。

1.渲染显示。

2.代码示例。

(1)引入额外的js。

script src=' http : ~/content/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control . js '/script(2)定义表属性和头属性。

表id=' TB _ roles ' data-filter-control=' true ' the data trth data-field=' role _ name ' data-filter-control=' select ' role name/Thdata-field=' description ' data-filter-control=' input ' role description/Thdata-field=' role _ default URL ' data-filter-control=' input ' role default page/th/thead/table由于这里定义了头属性，所以在js初始化时不需要定义列。

(3)js初始化。

$('#tb_roles ')。bootstrapTable({ URL : '/Role/GetRole '，method: 'get '，toolbar: '#toolbar '，stripe ed : true，cache: false，stripe ed : true，pagination: true，sortable: true，query params 3360 function(param){ return param；}，queryparamtype :' limit '，detailview : false，//父子表端分页3360' server '，pagesize : 10，pagelist : [10，25，50，100]，search: true，showColumns: true，showRefresh: true，minimumCountColumns: 2，clickToSelect: true，})；一开始博主以为这种搜索只能由用户的客户端分页，但调试后发现并非如此，原来的搜索条件可以通过json传输到服务器。让我们看看调试过程。

参数在后台接收并反序列化。

这样，我们可以将查询条件转移到后台。非常好。非常强大。这样就免去了扩展查表功能的麻烦~ ~

不及物动词摘要

以上是引导表的一些扩展应用。可能不全面，没有介绍一些高级用法，比如合并行和列，冻结行和列等等。

以上内容是边肖介绍的JS组件系列Bootstrap表组件工件的相关知识[II。父子表和行列顺序]，希望对大家有帮助！