下拉樹形列表layui-treeSelect2
介紹
站在巨人的肩膀上（Layui-TreeSelect基礎(chǔ)上），重新構(gòu)建樹形下拉選擇框拟蜻。樣式保持和layui盡量相符。
- 暫不支持搜索篩選
1字币、支持本地JSON對(duì)象數(shù)據(jù)做數(shù)據(jù)源
2晃虫、支持重新刷新整個(gè)樹結(jié)構(gòu)
3承冰、支持啟用禁用節(jié)點(diǎn)（作為多選擇情況锭魔，啟用則允許勾選换途；作為單選節(jié)點(diǎn)劲厌，啟用則顯示膛薛，否則隱藏）
4、支持zTree的簡(jiǎn)單樹补鼻，treeSetting參數(shù)
計(jì)劃：
- 完善禁用和啟用
- 支持多選
使用說(shuō)明
依賴：
layui v2.5.4
zTree v3.5.40 需要引用exhide庫(kù)
第一步：頁(yè)面引入 layui和zTree
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<link href="~/lib/zTree.v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/lib/layui/layui.all.js"></script>
<script src="~/lib/zTree.v3/js/jquery.ztree.all.min.js"></script>
<script src="~/lib/zTree.v3/js/jquery.ztree.exhide.min.js"></script>
html下拉框定義
<input type="text" id="treeSel" lay-filter="tree" class="layui-input" placeholder="請(qǐng)選擇所屬部門" />
初始化（刷新樹）
layui.config({
base: "/lib/laymodules/"
}).extend({
treeSelect2: 'treeSelect2/treeSelect2'
}).use(["treeSelect2"], function () {
var treeSelect2 = layui.treeSelect2;
treeSelect2.render({
elem: '#treeSel',
data: [
{name:'最頂層', id:1, parentId:-1},
{name:'最高組織部門', id:2, parentId:1},
{name:'研發(fā)部', id:3, parentId:1},
{name:'硬件研發(fā)部', id:4, parentId:1}
],
valueId: "id",//數(shù)據(jù)源中唯一標(biāo)準(zhǔn)值的屬性名稱哄啄，默認(rèn)id
treeSetting: {//zTree配置，詳參見zTree官網(wǎng)
treeId: 'treeSelTree',
check: {
enable: false,
chkboxType: {
"Y": "p",
"N": "ps"
},
chkStyle: "checkbox"
},
data: {
key: {
name: "name",
title: "name"
},
simpleData: {
enable: true,
idKey: "id",
pIdKey: "parentId",
rootPId: '-1'
}
}
}
, click: function (obj) {
console.log(obj);
}
, success: function () {
treeSelect2.selectNode('tree', '4');//選擇硬件研發(fā)部
}
});
});
刷新樹风范，刷新完成之后會(huì)觸發(fā)原來(lái)success事件
treeSelect2.refresh('tree', {data:[
{name:'最頂層', id:1, parentId:-1},
{name:'最高組織部門1', id:2, parentId:1},
{name:'研發(fā)部1', id:3, parentId:1},
{name:'硬件研發(fā)部1', id:4, parentId:1}
]});
選擇節(jié)點(diǎn)
treeSelect2.selectNode('tree', 4);//選擇id為4的節(jié)點(diǎn)
取消選擇
treeSelect2.revokeNode('tree');
禁用節(jié)點(diǎn)
treeSelect2.disableNode('tree', 4, true);//選擇id為4的節(jié)點(diǎn)咨跌，true為禁用，false為啟用
銷毀樹
treeSelect2.destroy('tree');
獲取zTree對(duì)象
treeSelect2.zTree('tree');
