JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的。有园友在评论中提到了父子表的用法,今天就结合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