使用
下載Layui-TreeSelect源碼
獲取核心 js 文件 treeSelect.js
文件目錄 /module/treeSelect/treeSelect.js
引入工程
目錄結構
示例demo
<html>
<head>
<meta charset="UTF-8" />
<title>測試</title>
<link href="${base}/static/layui/css/layui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="text" id="tree" lay-filter="tree" class="layui-input">
<script type="text/javascript" src="${base}/static/layui/layui.js"></script>
<script type="text/javascript" src="${base}/static/js/jquery-3.5.0.min.js"></script>
<script>
// 引入treeSelect 組件
layui.config({
base: "/static/layui/"
}).extend({
treeSelect: "treeSelect/treeSelect"
});
layui.use(['treeSelect'], function () {
var treeSelect = layui.treeSelect;
treeSelect.render({
// 選擇器
elem: '#tree',
// 數據
data: '/system/resource/treeSelectList',
// 異步加載方式：get/post，默認get
type: 'get',
// 占位符
placeholder: '修改默認提示信息',
// 是否開啟搜索功能：true/false，默認false
search: true,
// 點擊回調
click: function (d) {
console.log(d);
},
// 加載完成后的回調函數
success: function (d) {
console.log(d);
}
});
});
</script>
</body>
</html>
返回數據參考
[{
"id": 1,
"name": "zzz",
"open": true,
"children": [{
"id": 2,
"name": "1",
"open": false,
"checked": true
}, {
"id": 3,
"name": "2",
"open": false,
"checked": true
}, {
"id": 17,
"name": "3z",
"open": false,
"checked": true
}],
"checked": true
}, {
"id": 4,
"name": "評論",
"open": false,
"children": [{
"id": 5,
"name": "留言列表",
"open": false,
"checked": false
}, {
"id": 6,
"name": "發表留言",
"open": false,
"checked": false
}, {
"id": 333,
"name": "233333",
"open": false,
"checked": false
}],
"checked": false
}, {
"id": 10,
"name": "權限管理",
"open": false,
"children": [{
"id": 8,
"name": "用戶列表",
"open": false,
"children": [{
"id": 40,
"name": "添加用戶",
"open": false,
"url": null,
"title": "40",
"checked": false,
"level": 2,
"check_Child_State": 0,
"check_Focus": false,
"checkedOld": false,
"dropInner": false,
"drag": false,
"parent": false
}, {
"id": 41,
"name": "編輯用戶",
"open": false,
"checked": false
}, {
"id": 42,
"name": "刪除用戶",
"open": false,
"checked": false
}],
"checked": false
}, {
"id": 11,
"name": "角色列表",
"open": false,
"checked": false
}, {
"id": 13,
"name": "所有權限",
"open": false,
"children": [{
"id": 34,
"name": "添加權限",
"open": false,
"checked": false
}, {
"id": 37,
"name": "編輯權限",
"open": false,
"checked": false
}, {
"id": 38,
"name": "刪除權限",
"open": false,
"checked": false
}],
"checked": false
}, {
"id": 15,
"name": "操作日志",
"open": false,
"checked": false
}],
"checked": false
}]
數據格式解析
主要屬性 id, name, children, checked, open
問題記錄
因為在修改頁面中需要有默認選中的功能，在使用官方提供的 api treeSelect.checkNode('tree', 3); 時報錯 Cannot read property 'getNodeByParam' of null
原因：該方法 checkNode('tree', 3) 需要在渲染完成后執行，即在 success 回調方法中使用
$.ajax({
url: '/system/resource/' + menuId,
method: 'get',
success: function (res) {
if (res.code == 200) {
console.log(res.data);
form.val('example', res.data);
treeSelect.render({
// 選擇器
elem: '#tree',
// 數據
data: '/system/resource/treeSelectList',
// 異步加載方式：get/post，默認get
type: 'get',
// 占位符
placeholder: '修改默認提示信息',
// 是否開啟搜索功能：true/false，默認false
search: true,
// 點擊回調
click: function (d) {
},
// 加載完成后的回調函數
success: function (d) {
treeSelect.checkNode('tree', res.data.parentId);
}
});
}
}
})