一、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/zh-tw/n/370386.html
微信掃一掃 
支付寶掃一掃 