You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
202 lines
7.6 KiB
202 lines
7.6 KiB
11 months ago
|
<!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="../../layui/css/layui.css" media="all" />
|
||
|
|
<script src="../../js/jquery-2.1.3.min.js" type="text/javascript"></script>
|
||
|
|
<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 type="text/javascript" src="../../layui/layui.js"></script>
|
||
|
|
<script>
|
||
|
|
layui.config({
|
||
|
|
version: '1545041465443' //为了更新 js 缓存，可忽略
|
||
|
|
});
|
||
|
|
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'],
|
||
|
|
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>
|