浅谈Bootstrap table中父子表和行列调序的用法-js教程-PHP中文网

浅谈Bootstrap table中父子表和行列调序的用法

PHPz

发布： 2016-05-16 09:00:05

转载

4343人浏览过

本篇文章结合bootstrap table的父子表和行列调序的用法，再来介绍下它稍微高级点的用法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

浅谈Bootstrap table中父子表和行列调序的用法

【相关推荐：《bootstrap教程》】

一、效果展示

今天稍微改变下方式，先来看看实现效果，后面再介绍代码实现及注意事项。来，效果图来一发：

1、父子表效果图

2、行调序

调序前

拖动行调序到第一行

3、列调序

调序前

拖动列标题调序

调序后

二、父子表代码详解

上章我们介绍Bootstrap table基础用法的时候介绍过，初始化表格的时候有一个属性“detailView”，将它设置为true，在每行的前面即可看到一个“+”形状的图标。点击这个图标即触发加载子表格的事件。大概的原理就是如此，来看看代码，其实也很简单。

1、初始化表格，注册行展开事件

　　　 　　　　$("#tb_powerset").bootstrapTable({
                url: &#39;/api/MenuApi/GetParentMenu&#39;,
                method: &#39;get&#39;,
                detailView: true,//父子表
                //sidePagination: "server",
                pageSize: 10,
                pageList: [10, 25],
                columns: [{
                    field: &#39;MENU_NAME&#39;,
                    title: &#39;菜单名称&#39;
                }, {
                    field: &#39;MENU_URL&#39;,
                    title: &#39;菜单URL&#39;
                }, {
                    field: &#39;PARENT_ID&#39;,
                    title: &#39;父级菜单&#39;
                }, {
                    field: &#39;MENU_LEVEL&#39;,
                    title: &#39;菜单级别&#39;
                }, ],                //注册加载子表的事件。注意下这里的三个参数！
                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(&#39;<table></table>&#39;).find(&#39;table&#39;);
        $(cur_table).bootstrapTable({
            url: &#39;/api/MenuApi/GetChildrenMenu&#39;,
            method: &#39;get&#39;,
            queryParams: { strParentID: parentid },
            ajaxOptions: { strParentID: parentid },
            clickToSelect: true,
            detailView: true,//父子表
            uniqueId: "MENU_ID",
            pageSize: 10,
            pageList: [10, 25],
            columns: [{
                checkbox: true
            }, {
                field: &#39;MENU_NAME&#39;,
                title: &#39;菜单名称&#39;
            }, {
                field: &#39;MENU_URL&#39;,
                title: &#39;菜单URL&#39;
            }, {
                field: &#39;PARENT_ID&#39;,
                title: &#39;父级菜单&#39;
            }, {
                field: &#39;MENU_LEVEL&#39;,
                title: &#39;菜单级别&#39;
            }, ],            //无线循环取子表，直到子表里面没有记录
            onExpandRow: function (index, row, $Subdetail) {
                oInit.InitSubTable(index, row, $Subdetail);
            }
        });
    };

登录后复制

由此可以看出生成子表的原理就是创建一个table对象cur_table，然后再注册这个对象的表格初始化即可。是不是很简单~~

三、行调序代码详解

行调序的代码就更简单了，来看看。

1、需要额外引用两个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页面定义表格时，添加两个属性

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

登录后复制

然后js表格初始化的时候不需要做任何修改，加载出来的表格即可实现行调序的功能。

四、列调序代码详解

和行调序类似。列调序的使用如下：

1、额外引用几个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" href="https://rawgit.com/akottr/dragtable/master/dragtable.css">
<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页面定义表格时，添加一个属性

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

登录后复制

其他地方不用做任何修改。加载出来的表格即可实现列调序。有没有很简单。

五、控件过滤

本来这篇准备结束的，突然想起上章里面有一个搜索的功能，好像是服务端分页的时候搜索功能没法使用，于是想起之前再CS里面做过一个类似每个列过滤的功能，博主好奇心又起来了，bootstrap table是否也有这种表格每列过滤的功能，于是查看文档。结果不负所望，还真有~~我们来看看。

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">角色名称</th>
                <th data-field="DESCRIPTION" data-filter-control="input">角色描述</th>
                <th data-field="ROLE_DEFAULTURL" data-filter-control="input">角色默认页面</th>
            </tr>
        </thead>
    </table>

登录后复制

因为这里定义了表头的属性，所以，js初始化的时候就不用定义列了。

（3）js初始化

 $(&#39;#tb_roles&#39;).bootstrapTable({
        url: &#39;/Role/GetRole&#39;,
        method: &#39;get&#39;,
        toolbar: &#39;#toolbar&#39;,
        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,
        
    });

登录后复制

最开始，博主以为这种搜索只能用户客户端分页的情况，可是经过调试发现并非如此，原来搜索的条件都能通过json传递到服务端。我们来看调试的过程