Layui Table 中使用 layerTable.js 实现在表格中展开/折叠面板中显示扩展表格

分享 未结 置顶 精帖 46 9246
CrazyYi
CrazyYi 2020-1-26
悬赏:20飞吻
前一段时间,我在另外的帖子中,介绍了:

Layui Table 中使用 field+templet 动态改变 toolbar 的方法
在这个方法中,采用 “field+templet”结合的方法,可以实现toolbar 的动态变更。
这里用到的展示效果,就是“展开/折叠”。

基于layui Table,增加扩展面板展示子表格的方案
在这个帖子中,介绍了一种我自己创建的 layerTable.js 的扩展表格的方法,实现“展开/折叠”效果。并且展开的是一个新表格。

## 为啥不能用treeTable?
因为treeTable,适用于父级+子级 这种同样数据属性的记录。
而很多场景,是需要找到关联信息。关联的表和原始记录的数据属性并不是一样。


今天在这里重点介绍一下这个 layerTable.js

## 先上一下效果图




## git 下载地址(最新版本v2.0,仅支持table 采用 方法渲染)
https://gitee.com/hzxun/layerTable


下面来讲解下具体实现方案。

## 第1步:html 上新增一个主表
这里的操作过程和正常的添加一个table 的操作一样
<!-- table v2.0 method render,方法渲染 -->
<table class="layui-table layui-btn-group table_list layui-hide" id="mainList" lay-filter="test"></table>
<!-- /table -->
## 第2步:添加一个toolbar 模板
<!-- toolbar 模板,请注意 lay-event -->
<script type="text/html" id="barExpand1">
<a lay-event="expand1"><i class="layui-icon layui-icon-triangle-r"></i>{{d.expandTitle}}</a>
</script>
请注意,这里的lay-event的名称,class,还有显示的内容(title)

## 第3步:先初始化table 的options,并渲染
    var table = layui.table; // 我这里采用的是全模块加载
let pkey = 'id'; // 表格的索引名

// 初始化 tbOptions
let tbOptions = {
elem: '#mainList', // 请和table 的id 的名称一致
url: 'getInfo', // 这里请使用自己的url
method: 'get',
toolbar: '#toolbarDemo', //开启头部工具栏,并为其绑定左侧模板

cols: [[
{type: 'checkbox'},
{type: 'numbers', title: 'ID', width: 50},
{title: '3', toolbar: '#barExpand1', width: 100}, // 重点是这里加载 toolbar
{field: 'order_no', title: '流水号', width: 200},
{field: 'carname', title: '车辆名', width: 100},
{field: 'cartype_name', title: '车辆类型', width: 100},
{field: 'do_time', title: '创建时间', width: 200, sort: true},
{field: 'do_city', title: '城市', width: 100, templet: '#tipsTpl'},
{field: 'order_status_name', title: '订单状态', width: 100},
{field: 'pay_status_name', title: '支付状态', width: 100},
{fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150},
]],
page: true,
limit: 20,
limits: [10, 20, 30, 50, 100],
};
let insTb = table.render(tbOptions); // 渲染



## 第4步:【很重要!!!】配置layerTable.js
    // 配置 layerTable
layui.config({
base: '/public/plugin/layui/extra/' // 请配置到自己的目录
}).extend({
layerTable: 'layerTable/layerTable'
});
## 第5步:监听 主表 行工具 事件,在事件中触发 展开/折叠
——这部分很重要,请仔细阅读

    //监听行工具事件
table.on('tool(test)', function (obj) {
let data = obj.data;

// layerTable options 初始化
// 注意:如果没有加main,默认都是指子表的参数
// 因为需要传递包括 obj, $(this), $(this).parents('tr') 这些参数
// 所以初始化需要在 table.on 中完成
let layerTbOptions = {
mainElem: '#mainList', // main table 容器
url: '{:url("collapse")}', // API接口

width: 500,
cols: [[
{field: 'carname', title: '车辆名', width: '15%'},
{field: 'size', title: '大小', width: '15%'},
{field: 'weight', title: '重量', width: '15%'},
{field: 'length', title: '长度', width: '15%'},
{field: 'create_datetime', title: '创建时间'},
]], // 表头参数,二位数组

// 【重要!!重要!!重要!!】
rowData: obj.data,// 当前要操作行的所有记录,要和 reqField 字段配合使用,获取需要异步传递的参数,v2.0新增
eventObj: obj, // 当前操作的行对象

// 【重要!!重要!!重要!!】
// reqField:可以是对象,也可是数组。v2.0新增
// 如果是对象,索引是url http 请求的参数名。值是行记录的参数字段名。
reqField: ['carname'],

// 【重要!!重要!!重要!!】以下两个参数也非常重要,一定都要传递进来
jQueryThis: $(this),
jQueryTr: $(this).parents('tr'),

// 【重要!!重要!!重要!!】
// 这里是配置 展开/折叠 操作的属性,包括 事件,名称,icon 等
layEvents: {
expand: {func: 'closed1', title: '折叠1', icon: 'layui-icon-triangle-d'}, // 展开事件
closed: {func: 'expand1', title: '展开1', icon: 'layui-icon-triangle-r'}, // 折叠事件
}, // 展开、折叠 配置

logOn: true, // 开启 log 打印,建议正式发布版本设置为false。默认=false
};

switch (obj.event) {
// 监听 展开 事件
case 'expand1':
layerTbOptions.layEvent = '1';
layui.use(['layerTable'], function () {
let layerTable = layui.layerTable;
layerTable.render(layerTbOptions); // 调用很简单,就和正常的table render 一样
});
break;

// 监听 折叠 事件
case 'closed1':
layerTbOptions.layEvent = '2';
layui.use(['layerTable'], function () {
let layerTable = layui.layerTable;
layerTable.render(layerTbOptions); // 调用很简单,就和正常的table render 一样
});
break;

}
});

——这是第一步,先配置好 layerTable options。配置中,需要传递当前行的一些参数,比如 obj,$(this),$(this).parents('tr')
——传递的时候,就请直接按照我的写法来用就行。暂时没想到其他比较好的办法来解决。
——因为需要传递的这些参数,所以 layerTable options 初始化,就必须要在 table.on 中完成。
    //监听行工具事件
table.on('tool(test)', function (obj) {

let data = obj.data;
let layerTbOptions = {
// 在 table.on 中进行 初始化,否则拿不到对应 obj,$(this) 等参数
};
});
## [嘻嘻] 这里的 reqField 参数的传递,可以是数组,也可以是对象。
为了更好的说明,我假设当前操作行中,carname = '京AX123Y'(测试数据)
1、数组
比如 reqField: ['carname'],则子表 的http 请求中传递的where = {'carname':'京AX123Y'}。
2、对象
比如 reqField: {'req_name':'carname'},则子表 的http 请求中传递的where = {'req_name':'京AX123Y'}。
能看明白两者的区别吗?



至此,大功告成。


layerTable.js
v1.0,仅支持 主表table 采用自动渲染方式
v2.0,仅支持 主表table 采用方法渲染方式
??什么是自动渲染?方法渲染?——哈,直接查看layui table 的介绍吧

后续仍然会继续优化
回帖