一、LayuiTreeTable插件的介绍
LayuiTreeTable插件是一款基于layui框架的JavaScript库，可用于树形结构展示，其主要特点有以下几个方面：
1、具有极其强大的多级表头功能，可实现多重层级树结构的展示；
2、采用异步数据加载方式，数据量大时也能够快速加载；
3、支持复选框、拖拽、排序、编辑等基本常用功能；
4、代码简洁，易于理解、修改和扩展。
二、LayuiTreeTable插件的使用
在使用LayuiTreeTable插件前需要引入相关的JavaScript和CSS文件，步骤如下：
// 引入LayuiTreeTable插件需要的样式文件 <link rel="stylesheet" href="layuicss/layui.css"> <link rel="stylesheet" href="layuicss/treeTable.css"> // 引入LayuiTreeTable插件需要的JavaScript文件 <script src="layui/layui.js"></script> <script src="layui/layui.all.js"></script> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/treeTable.js"></script>
引入相关文件后，需要构造一个table元素，并给该元素赋予一个唯一标识符。
<table id="treeTable">
<thead>
<tr>
<th lay-data="{width: 50, type:'checkbox'}"></th>
<th lay-data="{width: 200}">名称</th>
<th lay-data="{width: 200}">时间</th>
<th lay-data="{width: 200}">操作</th>
</tr>
</thead>
<tbody>
<tr data-tt-id="1" data-tt-parent-id="0">
<td></td>
<td>一级节点1</td>
<td>2020-01-01</td>
<td></td>
</tr>
</tbody>
</table>
接下来通过JavaScript代码调用treeTable方法，对table元素进行初始化：
<script>
layui.use(['treeTable'], function() {
var layuiTreeTable = layui.treeTable;
layuiTreeTable.render({
elem: '#treeTable', // 表格的选择器
url: '/data/getTreeData', // 获取数据的URL
icon_key: 'name', // 显示树形结构图标的属性名称
is_checkbox: false, //是否显示复选框
checked: "checked", // 默认复选框选中状态
operate: false, // 是否带有操作列
icon_close: '- ', // 图标关闭状态
icon_open: '+ ', // 图标打开状态
skin: "default" // 风格
});
});
</script>
其中elem表示表格的选择器，url表示获取数据的URL，icon_key表示显示树形结构图标的属性名称，is_checkbox表示是否显示复选框，checked表示默认复选框选中状态，operate表示是否带有操作列，icon_close表示图标关闭状态，icon_open表示图标打开状态，skin表示样式的风格。
三、LayuiTreeTable插件的实例演示
下面是一段使用LayuiTreeTable插件实现树形结构展示的示例代码：
<html>
<head>
<title>LayuiTreeTable插件：实现树形结构展示的JavaScript库</title>
<link rel="stylesheet" href="layuicss/layui.css">
<link rel="stylesheet" href="layuicss/treeTable.css">
</head>
<body>
<table id="treeTable">
<thead>
<tr>
<th lay-data="{width: 50, type:'checkbox'}"></th>
<th lay-data="{width: 200}">名称</th>
<th lay-data="{width: 200}">时间</th>
<th lay-data="{width: 200}">操作</th>
</tr>
</thead>
<tbody>
<tr data-tt-id="1" data-tt-parent-id="0">
<td></td>
<td>一级节点1</td>
<td>2020-01-01</td>
<td></td>
</tr>
<tr data-tt-id="2" data-tt-parent-id="0">
<td></td>
<td>一级节点2</td>
<td>2020-01-01</td>
<td></td>
</tr>
<tr data-tt-id="3" data-tt-parent-id="1">
<td></td>
<td>二级节点</td>
<td>2020-01-01</td>
<td></td>
</tr>
<tr data-tt-id="4" data-tt-parent-id="3">
<td></td>
<td>三级节点</td>
<td>2020-01-01</td>
<td></td>
</tr>
</tbody>
</table>
<script src="layui/layui.js"></script>
<script src="layui/layui.all.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/treeTable.js"></script>
<script>
layui.use(['treeTable'], function() {
var layuiTreeTable = layui.treeTable;
layuiTreeTable.render({
elem: '#treeTable', // 表格的选择器
url: '/data/getTreeData', // 获取数据的URL
icon_key: 'name', // 显示树形结构图标的属性名称
is_checkbox: false, //是否显示复选框
checked: "checked", // 默认复选框选中状态
operate: false, // 是否带有操作列
icon_close: '- ', // 图标关闭状态
icon_open: '+ ', // 图标打开状态
skin: "default" // 风格
});
});
</script>
</body>
</html>
原创文章，作者：PUVQA，如若转载，请注明出处：https://www.506064.com/n/370386.html
微信扫一扫 
支付宝扫一扫 