Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等。今天就结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法。
bootstrap table系列:
一、效果展示
今天稍微改变下方式,先来看看实现效果,后面再介绍代码实现及注意事项。来,效果图来一发:
1、父子表效果图
2、行调序
调序前
拖动行调序到第一行
3、列调序
调序前
拖动列标题调序
调序后
二、父子表代码详解
上章我们介绍Bootstrap table基础用法的时候介绍过,初始化表格的时候有一个属性“detailView”,将它设置为true,在每行的前面即可看到一个“+”形状的图标。点击这个图标即触发加载子表格的事件。大概的原理就是如此,来看看代码,其实也很简单。
1、初始化表格,注册行展开事件
rush:js;">
$("#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,$detail);
}
});
还是来看看子表加载事件onExpandRow对应方法function (index,$detail)的三个参数,
index:父表当前行的行索引。
row:父表当前行的Json数据对象。
$detail:当前行下面创建的新行里面的td对象。
第三个参数尤其重要,因为生成的子表的table在装载在$detail对象里面的。bootstrap table为我们生成了$detail这个对象,然后我们只需要往它里面填充我们想要的table即可。
2、我们来看oInit.InitSubTable()这个方法
rush:js;">
//初始化子表格(无线循环)
oInit.InitSubTable = function (index,$detail) {
var parentid = row.MENU_ID;
var cur_table = $detail.html('arams: { strParentID: parentid },ajaxOptions: { strParentID: parentid },clickToSelect: true,//父子表
uniqueId: "MENU_ID",columns: [{
checkBox: true
},{
field: 'MENU_NAME',//无线循环取子表,直到子表里面没有记录
onExpandRow: function (index,$Subdetail) {
oInit.InitSubTable(index,$Subdetail);
}
});
};