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 相关文章推荐
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
vue配置多代理服务接口地址操作
Sep 08 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
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
PHP 文件上传限制问题
2019/09/01 PHP
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
JavaScript动态绑定详解
2017/09/14 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
python解包概念及实例
2021/02/17 Python
英国森林假期:Forest Holidays
2021/01/01 全球购物
大学毕业的自我鉴定
2013/10/08 职场文书
大学生就业推荐信范文
2013/11/29 职场文书
测绘工程系学生的自我评价
2013/11/30 职场文书
军训自我鉴定100字
2014/02/13 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
公司晚会主持词
2014/03/22 职场文书
意向书范文
2014/03/31 职场文书