Bootstarp-table 插件功能真的不错,项目上的功能帮助我们实现,今天就拿该插件的主从表功来演示下效果,效果图如下:
显示效果
准备工作:
一、首先是加载引用需要的js和css文件(这里不在显示);
二、初始化JS参数,也可以用HTML设置,本人喜欢用代码加载
注意:此处需要启用 detailView 参数为 true,显示“+”号;
detailView: true, // 设置为true
第二个是重点,onExpandRow方法;
onExpandRow 方法(或叫函数)
其中启用 detailView 参数为true后,表格的左边会出现个 "+" 号,而onExpandRow方法,是汇制新的表格内容;
三、onExpandRow方法的使用,直接上图,如下:
注意,从表是在主表的colums下,这里的colums的内容我就不显示了,每个人都不一样,我这里显示演示给大家看
如果后台正确可以读出数据,那前台就可以正确显示,这里我就不显示后台如何获取数据(我用的是ThinkPHP框架),后台数据大同小异;
忘了,我是ajax请求的;
问题补充:
关于从表的获取参数拼接,可以自定义自己参数名称,但获取的值必须是你 coloums 的字段值,如果不是,只会反回一个undefind
注意:本文归作者所有,未经作者允许,不得转载