Bootstarp-table 插件 主从表关系(父子表)

jk 1年前 ⋅ 8164 阅读

源于:今日头条(查看原文)

Bootstarp-table 插件功能真的不错,项目上的功能帮助我们实现,今天就拿该插件的主从表功来演示下效果,效果图如下:

Bootstarp-table 插件 主从表关系(父子表)

显示效果

准备工作:

一、首先是加载引用需要的js和css文件(这里不在显示);

二、初始化JS参数,也可以用HTML设置,本人喜欢用代码加载

注意:此处需要启用 detailView 参数为 true,显示“+”号;

detailView: true, // 设置为true

Bootstarp-table 插件 主从表关系(父子表)

第二个是重点,onExpandRow方法;

onExpandRow 方法(或叫函数)

其中启用 detailView 参数为true后,表格的左边会出现个 "+" 号,而onExpandRow方法,是汇制新的表格内容;

三、onExpandRow方法的使用,直接上图,如下:

Bootstarp-table 插件 主从表关系(父子表)

注意,从表是在主表的colums下,这里的colums的内容我就不显示了,每个人都不一样,我这里显示演示给大家看

如果后台正确可以读出数据,那前台就可以正确显示,这里我就不显示后台如何获取数据(我用的是ThinkPHP框架),后台数据大同小异;

忘了,我是ajax请求的;

问题补充:

关于从表的获取参数拼接,可以自定义自己参数名称,但获取的值必须是你 coloums 的字段值,如果不是,只会反回一个undefind


全部评论: 0

    我有话说: