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> |