JS组件系列之组件系列之Bootstrap table表格组件神器【二、父子表和表格组件神器【二、父子表和
行列调序】行列调序】
本文结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法。对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: '父级菜单'
}, {