345 lines
12 KiB
HTML
345 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>Layui树形表格2.x演示</title>
|
|||
|
|
<link rel="stylesheet" href="../../../component/layui/css/layui.css"/>
|
|||
|
|
<link rel="stylesheet" href="../../../admin/css/treeTable.css"/>
|
|||
|
|
<style>
|
|||
|
|
.pear-container{
|
|||
|
|
margin: 10px;
|
|||
|
|
background-color: whitesmoke;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body class="pear-container">
|
|||
|
|
<div class="layui-card">
|
|||
|
|
<div class="layui-card-header"></div>
|
|||
|
|
<div class="layui-card-body">
|
|||
|
|
<div class="page-wrapper">
|
|||
|
|
|
|||
|
|
<div class="layui-btn-container" style="display: inline-block;">
|
|||
|
|
<button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
|
|||
|
|
<i class="layui-icon"></i>展开全部
|
|||
|
|
</button>
|
|||
|
|
<button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
|
|||
|
|
<i class="layui-icon"></i>折叠全部
|
|||
|
|
</button>
|
|||
|
|
<button id="btnExpand" class="layui-btn layui-btn-sm layui-btn-primary">
|
|||
|
|
<i class="layui-icon"></i>展开2
|
|||
|
|
</button>
|
|||
|
|
<button id="btnFold" class="layui-btn layui-btn-sm layui-btn-primary">
|
|||
|
|
<i class="layui-icon"></i>折叠2
|
|||
|
|
</button>
|
|||
|
|
<button id="btnChecked" class="layui-btn layui-btn-sm layui-btn-primary">
|
|||
|
|
<i class="layui-icon"></i>勾选1_1_2
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<input class="layui-input" id="edtSearch" value="1_1_2" placeholder="输入关键字"
|
|||
|
|
style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
|
|||
|
|
<div class="layui-btn-container" style="display: inline-block;">
|
|||
|
|
<button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
|
|||
|
|
<i class="layui-icon"></i>搜索
|
|||
|
|
</button>
|
|||
|
|
<button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
|
|||
|
|
<i class="layui-icon">ဆ</i>清除搜索
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-btn-container" style="display: inline-block;">
|
|||
|
|
<a href="async.html" class="layui-btn layui-btn-sm layui-btn-primary" lay-tips="千呼万唤始出来~"
|
|||
|
|
style="position: relative;">
|
|||
|
|
<i class="layui-icon"></i>异步加载
|
|||
|
|
<span class="layui-badge-dot" style="position: absolute;right: 3px;top: 3px;"></span>
|
|||
|
|
</a>
|
|||
|
|
<a href="fixed.html" class="layui-btn layui-btn-sm layui-btn-primary">
|
|||
|
|
<i class="layui-icon"></i>固定表头
|
|||
|
|
</a>
|
|||
|
|
<a href="edit.html" class="layui-btn layui-btn-sm layui-btn-primary">
|
|||
|
|
<i class="layui-icon"></i>单元格编辑
|
|||
|
|
</a>
|
|||
|
|
<a href="icon.html" class="layui-btn layui-btn-sm layui-btn-primary">
|
|||
|
|
<i class="layui-icon"></i>自定义图标
|
|||
|
|
</a>
|
|||
|
|
<a href="big.html" class="layui-btn layui-btn-sm layui-btn-primary">
|
|||
|
|
<i class="layui-icon"></i>数据量测试
|
|||
|
|
</a>
|
|||
|
|
<a href="../../1.x/demo/index.html" class="layui-btn layui-btn-sm layui-btn-primary" target="_blank">
|
|||
|
|
回顾1.x
|
|||
|
|
</a>
|
|||
|
|
<a href="https://whvse.gitee.io/treetable/" class="layui-btn layui-btn-sm layui-btn-primary" target="_blank">
|
|||
|
|
bom表格
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<table id="demoTreeTable1"></table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!--<div class="right-desc">
|
|||
|
|
<div class="layui-text desc-item">
|
|||
|
|
treeTable时隔一年进行了彻底重构，不再基于数据表格table，从零开始，
|
|||
|
|
实现了数据表格的大部分功能，在使用方法上与数据表格一致，
|
|||
|
|
并且支持懒加载、复选框联动、折叠状态记忆等功能，
|
|||
|
|
<a href="https://gitee.com/whvse/treetable-lay" target="_blank">码云下载</a>。
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-text desc-item" style="padding: 0;overflow: hidden;">
|
|||
|
|
<img src="https://s2.ax1x.com/2019/08/23/msiO78.png" width="100%"/>
|
|||
|
|
<div style="padding: 5px 10px;">
|
|||
|
|
EasyWeb管理系统模板
|
|||
|
|
<a href="https://demo.easyweb.vip/iframe/" style="float: right;" target="_blank">前往查看</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>-->
|
|||
|
|
|
|||
|
|
<!-- 表格操作列 -->
|
|||
|
|
<script type="text/html" id="demoTreeTableBar1">
|
|||
|
|
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
|
|||
|
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- 表格状态列 -->
|
|||
|
|
<script type="text/html" id="demoTreeTableState1">
|
|||
|
|
<input type="checkbox" lay-filter="ckState" value="{{d.id}}" lay-skin="switch"
|
|||
|
|
lay-text="正常|锁定" {{d.state==0?'checked':''}}/>
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<div class="page-loading">
|
|||
|
|
<div class="ball-loader sm">
|
|||
|
|
<span></span><span></span><span></span><span></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="../../../component/layui/layui.js"></script>
|
|||
|
|
<script>
|
|||
|
|
layui.use(['layer', 'util', 'treeTable'], function () {
|
|||
|
|
var $ = layui.jquery;
|
|||
|
|
var layer = layui.layer;
|
|||
|
|
var util = layui.util;
|
|||
|
|
var treeTable = layui.treeTable;
|
|||
|
|
var data = [{
|
|||
|
|
id: "1",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: [{
|
|||
|
|
id: "1_1",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: [{
|
|||
|
|
id: "1_1_1",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: []
|
|||
|
|
}, {
|
|||
|
|
id: "1_1_2",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: []
|
|||
|
|
}, {
|
|||
|
|
id: "1_1_3",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: []
|
|||
|
|
}]
|
|||
|
|
}, {
|
|||
|
|
id: "1_2",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: [{
|
|||
|
|
id: "1_2_1",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: []
|
|||
|
|
}, {
|
|||
|
|
id: "1_2_2",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: []
|
|||
|
|
}, {
|
|||
|
|
id: "1_2_3",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: []
|
|||
|
|
}]
|
|||
|
|
}, {
|
|||
|
|
id: "1_3",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: []
|
|||
|
|
}]
|
|||
|
|
}, {
|
|||
|
|
id: "2",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: [{
|
|||
|
|
id: "2_1",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: [{
|
|||
|
|
id: "2_1_1",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: []
|
|||
|
|
}, {
|
|||
|
|
id: "2_1_2",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: []
|
|||
|
|
}, {
|
|||
|
|
id: "2_1_3",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: []
|
|||
|
|
}]
|
|||
|
|
}, {
|
|||
|
|
id: "2_2",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: []
|
|||
|
|
}, {
|
|||
|
|
id: "2_3",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: []
|
|||
|
|
}]
|
|||
|
|
}, {
|
|||
|
|
id: "3",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: [{
|
|||
|
|
id: "3_1",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: []
|
|||
|
|
}, {
|
|||
|
|
id: "3_2",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: []
|
|||
|
|
}, {
|
|||
|
|
id: "3_3",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: []
|
|||
|
|
}]
|
|||
|
|
}, {
|
|||
|
|
id: "4",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: []
|
|||
|
|
}, {
|
|||
|
|
id: "5",
|
|||
|
|
name: "xxx",
|
|||
|
|
state: 0,
|
|||
|
|
createTime: "2019/11/18 10:44:00",
|
|||
|
|
children: []
|
|||
|
|
}];
|
|||
|
|
|
|||
|
|
// 渲染表格
|
|||
|
|
var insTb = treeTable.render({
|
|||
|
|
elem: '#demoTreeTable1',
|
|||
|
|
data: data,
|
|||
|
|
tree: {
|
|||
|
|
iconIndex: 2
|
|||
|
|
},
|
|||
|
|
cols: [
|
|||
|
|
{type: 'numbers'},
|
|||
|
|
{type: 'checkbox'},
|
|||
|
|
{field: 'id', title: 'ID'},
|
|||
|
|
{field: 'name', title: 'name', width: 160},
|
|||
|
|
{
|
|||
|
|
field: 'createTime', title: '创建时间', templet: function (d) {
|
|||
|
|
return util.toDateString(d.createTime);
|
|||
|
|
}, width: 180
|
|||
|
|
},
|
|||
|
|
{templet: '#demoTreeTableState1', title: '状态', width: 100},
|
|||
|
|
{align: 'center', toolbar: '#demoTreeTableBar1', title: '操作', width: 120}
|
|||
|
|
],
|
|||
|
|
style: 'margin-top:0;'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
treeTable.on('tool(demoTreeTable1)', function (obj) {
|
|||
|
|
var event = obj.event;
|
|||
|
|
if (event == 'del') {
|
|||
|
|
layer.msg('点击了删除', {icon: 1});
|
|||
|
|
} else if (event == 'edit') {
|
|||
|
|
layer.msg('点击了修改', {icon: 1});
|
|||
|
|
obj.update({name: 'newname'});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 全部展开
|
|||
|
|
$('#btnExpandAll').click(function () {
|
|||
|
|
insTb.expandAll();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 全部折叠
|
|||
|
|
$('#btnFoldAll').click(function () {
|
|||
|
|
insTb.foldAll();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#btnExpand').click(function () {
|
|||
|
|
insTb.expand('2');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#btnFold').click(function () {
|
|||
|
|
insTb.fold('2');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#btnChecked').click(function () {
|
|||
|
|
insTb.expand('1_1_2');
|
|||
|
|
insTb.setChecked(['1_1_2']);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#btnSearch').click(function () {
|
|||
|
|
var keywords = $('#edtSearch').val();
|
|||
|
|
if (keywords) {
|
|||
|
|
insTb.filterData(keywords);
|
|||
|
|
} else {
|
|||
|
|
insTb.clearFilter();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#btnClearSearch').click(function () {
|
|||
|
|
insTb.clearFilter();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(document).on('mouseenter', '*[lay-tips]', function () {
|
|||
|
|
layer.tips($(this).attr('lay-tips'), this, {tips: [1, '#FF5722'], time: -1});
|
|||
|
|
}).on('mouseleave', '*[lay-tips]', function () {
|
|||
|
|
layer.closeAll('tips');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
setTimeout(function () {
|
|||
|
|
$('body').children('.page-loading').hide();
|
|||
|
|
$('body').removeClass('page-no-scroll');
|
|||
|
|
}, 150);
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|