JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】


Posted in Javascript onMay 10, 2016

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

bootstrap table系列:

一、效果展示

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

1、父子表效果图

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

2、行调序

调序前

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

拖动行调序到第一行

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

3、列调序

调序前

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

拖动列标题调序

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

调序后

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

二、父子表代码详解

上章我们介绍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文件

<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、效果图展示

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

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初始化

$('#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传递到服务端。我们来看调试的过程

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

后台接收参数,并反序列化

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

这样我们就能将查询的条件很好地传递到后台。很好很强大啊。这样就免去了扩展表格搜索功能的烦恼~~

六、总结

以上就是bootstrap table的一些扩展应用。可能未不全面,还有一些高级用法也没有介绍,比如行、列合并,行列冻结等等。

以上内容是小编给大家介绍的JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】 的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
js电信网通双线自动选择技巧
Nov 18 Javascript
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 #Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 #Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 #Javascript
javascript实现的猜数小游戏完整实例代码
May 10 #Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 #Javascript
全国省市二级联动下拉菜单 js版
May 10 #Javascript
js实现的简单图片浮动效果完整实例
May 10 #Javascript
You might like
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
PHP如何实现跨域
2016/05/30 PHP
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
python安装oracle扩展及数据库连接方法
2017/02/21 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
pandas object格式转float64格式的方法
2018/04/10 Python
numpy返回array中元素的index方法
2018/06/27 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
酒吧创业计划书
2014/01/18 职场文书
运动会入场口号
2014/06/07 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS
使用Redis实现分布式锁的方法
2022/06/16 Redis