layui表格套模块（表格）
官网的layui是这样的：
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
但有的时候只使用一种代码是无法实现我们的需求的，例如我今天要说的，layui中表格中嵌套模块（本文以表格为例），效果图是这样的：
代码主要分为两步：
//第一步，主表头模板
{
field: 'username',
title: '用户名',
minWidth: 100,
event: 'collapse',
templet: function(d) {
return '<div style="position: relative;\n' + ' padding: 0 10px 0 20px;">' + d.username + '<i style="left: 0px;" lay-tips="展开" class="layui-icon layui-colla-icon layui-icon-right"></i></div>'
}
}
// 第二步，监听点击单元格 collapse 事件，通过方法 collapseTable 渲染子表格
//监听工具条
table.on('tool(test)',
function(obj) {
var data = obj.data;
if (obj.event === 'collapse') {
var trObj = layui.$(this).parent('tr'); //当前行
var accordion = true //开启手风琴，那么在进行折叠操作时，始终只会展现当前展开的表格。
var content = '<table></table>' //内容
//表格行折叠方法
collapseTable({
elem: trObj,
accordion: accordion,
content: content,
success: function(trObjChildren, index) { //成功回调函数
//trObjChildren 展开tr层DOM
//index 当前层索引
trObjChildren.find('table').attr("id", index);
table.render({
elem: "#" + index,//其他略
});
}
});这段代码参考了layui中的表格、 折叠tab面板、弹出层。
完整栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>layui在线调试</title>
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css?t=1545041465443" media="all">
<style>
body{margin: 10px;}
.demo-carousel{height: 200px; line-height: 200px; text-align: center;}
</style>
</head>
<body>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
</script>
<script type="text/html" id="barDemo1">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
</script>
<script src="//res.layui.com/layui/dist/layui.js?t=1545041465443"></script>
<script>
layui.config({
version: '1545041465443' //为了更新 js 缓存，可忽略
});
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'],
function() {
var table = layui.table //表格
//执行一个 table 实例
table.render({
elem: '#demo',
height: 670,
url: '/demo/table/user/' //数据接口
,
title: '用户表',
page: true //开启分页
,
cols: [[ //表头
{
type: 'checkbox',
fixed: 'left'
},
{
field: 'username',
title: '用户名',
minWidth: 100,
event: 'collapse',
templet: function(d) {
return '<div style="position: relative;\n' + ' padding: 0 10px 0 20px;">' + d.username + '<i style="left: 0px;" lay-tips="展开" class="layui-icon layui-colla-icon layui-icon-right"></i></div>'
}
},
{
field: 'experience',
title: '积分',
width: 90,
sort: true
},
{
field: 'sex',
title: '性别',
width: 80,
sort: true
},
{
field: 'score',
title: '评分',
width: 80,
sort: true
},
{
field: 'city',
title: '城市',
width: 150
},
{
fixed: 'right',
width: 80,
align: 'center',
toolbar: '#barDemo'
}]]
});
//监听工具条
table.on('tool(test)',
function(obj) {
var data = obj.data;
if (obj.event === 'collapse') {
var trObj = layui.$(this).parent('tr'); //当前行
var accordion = true //开启手风琴，那么在进行折叠操作时，始终只会展现当前展开的表格。
var content = '<table></table>' //内容
//表格行折叠方法
collapseTable({
elem: trObj,
accordion: accordion,
content: content,
success: function(trObjChildren, index) { //成功回调函数
//trObjChildren 展开tr层DOM
//index 当前层索引
trObjChildren.find('table').attr("id", index);
table.render({
elem: "#" + index,
url: '/demo/table/user',
limit: 3,
cellMinWidth: 80,
cols: [[{
type: 'checkbox',
fixed: 'left'
},
{
field: 'id',
width: 80,
title: 'ID',
sort: true
},
{
field: 'username',
title: '用户名'
},
{
field: 'sex',
title: '性别',
sort: true
},
{
field: 'city',
title: '城市'
},
{
fixed: 'right',
width: 80,
align: 'center',
toolbar: '#barDemo1'
}]]
});
}
});
}
});
function collapseTable(options) {
var trObj = options.elem;
if (!trObj) return;
var accordion = options.accordion,
success = options.success,
content = options.content || '';
var tableView = trObj.parents('.layui-table-view'); //当前表格视图
var id = tableView.attr('lay-id'); //当前表格标识
var index = trObj.data('index'); //当前行索引
var leftTr = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + index + '"]'); //左侧当前固定行
var rightTr = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + index + '"]'); //右侧当前固定行
var colspan = trObj.find('td').length; //获取合并长度
var trObjChildren = trObj.next(); //展开行Dom
var indexChildren = id + '-' + index + '-children'; //展开行索引
var leftTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + indexChildren + '"]'); //左侧展开固定行
var rightTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + indexChildren + '"]'); //右侧展开固定行
var lw = leftTr.width() + 15; //左宽
var rw = rightTr.width() + 15; //右宽
//不存在就创建展开行
if (trObjChildren.data('index') != indexChildren) {
//装载HTML元素
var tr = '<tr data-index="' + indexChildren + '"><td colspan="' + colspan + '"><div style="height: auto;padding-left:' + lw + 'px;padding-right:' + rw + 'px" class="layui-table-cell">' + content + '</div></td></tr>';
trObjChildren = trObj.after(tr).next().hide(); //隐藏展开行
var fixTr = '<tr data-index="' + indexChildren + '"></tr>';//固定行
leftTrChildren = leftTr.after(fixTr).next().hide(); //左固定
rightTrChildren = rightTr.after(fixTr).next().hide(); //右固定
}
//展开|折叠箭头图标
trObj.find('td[lay-event="collapse"] i.layui-colla-icon').toggleClass("layui-icon-right layui-icon-down");
//显示|隐藏展开行
trObjChildren.toggle();
//开启手风琴折叠和折叠箭头
if (accordion) {
trObj.siblings().find('td[lay-event="collapse"] i.layui-colla-icon').removeClass("layui-icon-down").addClass("layui-icon-right");
trObjChildren.siblings('[data-index$="-children"]').hide(); //展开
rightTrChildren.siblings('[data-index$="-children"]').hide(); //左固定
leftTrChildren.siblings('[data-index$="-children"]').hide(); //右固定
}
success(trObjChildren, indexChildren); //回调函数
heightChildren = trObjChildren.height(); //展开高度固定
rightTrChildren.height(heightChildren + 115).toggle(); //左固定
leftTrChildren.height(heightChildren + 115).toggle(); //右固定
}
});
</script>
</body>
</html> 参考网址：https://fly.layui.com/jie/47944/
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2019-07-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
