当前位置:  首页  >  前端开发  >  JavaScript

JS组件系列之Bootstraptable表格组件神器【二、父子表和行列调序】_javascript技巧

本文结合Bootstraptable的父子表和行列调序的用法再来介绍下它稍微高级点的用法。对bootstrap表格组件相关知识感兴趣的朋友一起学习吧
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()这个方法

//初始化子表格(无线循环)
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文件






















    
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有