时间:2021-05-26
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等。今天就结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法。
bootstrap table系列:
JS表格组件神器bootstrap table详解(基础版)
JS组件系列之Bootstrap table表格组件神器【终结篇】
JS组件系列之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()这个方法
由此可以看出生成子表的原理就是创建一个table对象cur_table,然后再注册这个对象的表格初始化即可。是不是很简单~~
三、行调序代码详解
行调序的代码就更简单了,来看看。
1、需要额外引用两个js文件
2、在cshtml页面定义表格时,添加两个属性
然后js表格初始化的时候不需要做任何修改,加载出来的表格即可实现行调序的功能。
四、列调序代码详解
和行调序类似。列调序的使用如下:
1、额外引用几个js和css
2、在cshtml页面定义表格时,添加一个属性
其他地方不用做任何修改。加载出来的表格即可实现列调序。有没有很简单。
五、控件过滤
本来这篇准备结束的,突然想起上章里面有一个搜索的功能,好像是服务端分页的时候搜索功能没法使用,于是想起之前再CS里面做过一个类似每个列过滤的功能,博主好奇心又起来了,bootstrap table是否也有这种表格每列过滤的功能,于是查看文档。结果不负所望,还真有~~我们来看看。
1、效果图展示
2、代码示例
(1)引入额外js
(2)定义表格属性及表头属性
因为这里定义了表头的属性,所以,js初始化的时候就不用定义列了。
(3)js初始化
最开始,博主以为这种搜索只能用户客户端分页的情况,可是经过调试发现并非如此,原来搜索的条件都能通过json传递到服务端。我们来看调试的过程
后台接收参数,并反序列化
这样我们就能将查询的条件很好地传递到后台。很好很强大啊。这样就免去了扩展表格搜索功能的烦恼~~
六、总结
以上就是bootstrap table的一些扩展应用。可能未不全面,还有一些高级用法也没有介绍,比如行、列合并,行列冻结等等。
以上内容是小编给大家介绍的JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】 的相关知识,希望对大家有所帮助!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
bootstraptable系列:JS表格组件神器bootstraptable详解(基础版)JS组件系列之Bootstraptable表格组件神器【终结篇】JS
上篇给大家介绍了JS组件系列之bootstraptreegrid组件封装过程,下面重点给大家介绍JS组件系列之BootstrapTable的treegrid功能
表格组件中,BootStrap提供了1种基础.table样式4种附加样式(.table-striped/.table-bordered/.table-hover
bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.ne
通过在vue中使用element的table表格,实现数据动态渲染,并且动态渲染表头。通过在父组件中引入子组件表格,然后向子组件传递表格数据和表头数据。子组件t