JS组件系列 |
您所在的位置：网站首页 › 贺州市游泳的地方有哪些 › JS组件系列 |
JS组件系列
|
前言：上篇 JS组件系列——表格组件神器：bootstrap table 简单介绍了下Bootstrap Table的基础用法，没想到讨论还挺热烈的。有园友在评论中提到了父子表的用法，今天就结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法。 bootstrap table系列： JS组件系列——表格组件神器：bootstrap table JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序） JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利） 一、效果展示今天稍微改变下方式，先来看看实现效果，后面再介绍代码实现及注意事项。来，效果图来一发： 1、父子表效果图
调序前
拖动行调序到第一行
调序前
拖动列标题调序
调序后
二、父子表代码详解 上章我们介绍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('').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文件 2、在cshtml页面定义表格时，添加两个属性然后js表格初始化的时候不需要做任何修改，加载出来的表格即可实现行调序的功能。 四、列调序代码详解和行调序类似。列调序的使用如下： 1、额外引用几个js和css 2、在cshtml页面定义表格时，添加一个属性其他地方不用做任何修改。加载出来的表格即可实现列调序。有没有很简单。 五、控件过滤本来这篇准备结束的，突然想起上章里面有一个搜索的功能，好像是服务端分页的时候搜索功能没法使用，于是想起之前再CS里面做过一个类似每个列过滤的功能，博主好奇心又起来了，bootstrap table是否也有这种表格每列过滤的功能，于是查看文档。结果不负所望，还真有~~我们来看看。 1、效果图展示
（1）引入额外js （2）定义表格属性及表头属性 角色名称 角色描述 角色默认页面因为这里定义了表头的属性，所以，js初始化的时候就不用定义列了。 （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, });最开始，博主以为这种搜索只能用户客户端分页的情况，可是经过调试发现并非如此，原来搜索的条件都能通过json传递到服务端。我们来看调试的过程
后台接收参数，并反序列化
这样我们就能将查询的条件很好地传递到后台。很好很强大啊。这样就免去了扩展表格搜索功能的烦恼~~
六、总结 以上就是bootstrap table的一些扩展应用。可能未不全面，还有一些高级用法也没有介绍，比如行、列合并，行列冻结等等。但博主相信只要有文档，使用起来应该问题不大。源码还需整理，待整理好再发上来。园友们暂且先看看！！
|
【本文地址】
今日新闻 |
推荐新闻 |