文档位置
dtree官方文档地址链接
渲染下拉树js dTreeUtil.js
function renderDtreeData(id,data,none,checkbar,checkbarType,select,height){
var dtreeObj ;
layui.extend({
dtree: '/plugin/layui_ext/dtree/dtree'
}).use(['dtree'], function() {
var dtree = layui.dtree;
dtreeObj = dtree.render({
elem: "#" + id,
data: data,
none: none,
select : select,
checkbar: checkbar,
checkbarType: checkbarType,
menubar: true,
height: height,
menubarTips: {
group: ["moveDown", "moveUp", "refresh", "searchNode"]
}
});
dtree.on("node("+id+")", function(obj){
var nodeId = obj.param.nodeId;
dtreeObj.clickNodeCheckbar(nodeId);
});
});
return dtreeObj;
}
function getCheckbarNodesParam(id){
var checkStr = [];
layui.use(['dtree'], function() {
var dtree = layui.dtree;
checkStr = dtree.getCheckbarNodesParam(id);
});
return checkStr;
}
function arrayToDtree (arr, pid){
var list = [];
arr.map(item=>{
console.log(1)
if (item.parent == pid){
var result = {
id : item.id,
title : item.name,
parentId : item.parent,
checkArr : "0",
checked : false,
spread : true,
disabled : false,
children : []
};
list.push(result);
}
});
list.map(item=>{
console.log(2)
item.children = arrayToDtree(arr,item.id) ;
})
return list;
};
渲染dom
<link rel="stylesheet" href="/plugin/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="/plugin/layui_ext/dtree/font/dtreefont.css">
<link rel="stylesheet" href="/plugin/layui/css/layui.css" media="all">
<script src="/plugin/layui/layui.all.js"></script>
<script src="/js/dTreeUtil.js"></script>
<div class="layui-inline">
<label class="layui-form-label">组织机构</label>
<div class="layui-input-inline" style="width: 398px;" >
<ul id="organ_dtree" class="dtree" data-id="1" ></ul>
</div>
</div>
<script>
var organDtree ;
$.ajax({
url : '/admin/organ/loadOrganDtree',
type : 'get',
data : {},
success : function(res){
if(res.status == '0'){
list = res.data || [];
organDtree = renderDtreeData("organ_dtree",list,"暂时没有数据!",true,"only",true,"800px");
}
}
});
$("body").on("click", function(event){
$("div[dtree-id][dtree-select]").removeClass("layui-form-selected");
$("div[dtree-id][dtree-card]").removeClass("dtree-select-show layui-anim layui-anim-upbit");
});
var dtreeCheck = getCheckbarNodesParam('organ_dtree');
var organId = "";
if (dtreeCheck.length != 0){
organId = dtreeCheck[0].nodeId ;
}
</script>
数据格式
data: [{
"id": "4028820e68e4a48e0168e4d7772914e8",
"title": "广西壮族自治区",
"checkArr": "0",
"parentId": "0",
"iconClass": null,
"last": null,
"checked": null,
"spread": true,
"disabled": true,
"children": [{
"id": "a3a1704fddf3860934a44b59df6f4d6e",
"title": "1哈",
"checkArr": "0",
"parentId": "4028820e68e4a48e0168e4d7772914e8",
"iconClass": null,
"last": null,
"checked": null,
"spread": true,
"disabled": false,
"children": [{
"id": "e15f05c4af077d328dcabecd453c238e",
"title": "2哈",
"checkArr": "0",
"parentId": "a3a1704fddf3860934a44b59df6f4d6e",
"iconClass": null,
"last": null,
"checked": null,
"spread": true,
"disabled": false,
"children": []
},
{
"id": "fc946add55ab6e2673e85523e8c555ad",
"title": "3哈",
"checkArr": "0",
"parentId": "a3a1704fddf3860934a44b59df6f4d6e",
"iconClass": null,
"last": null,
"checked": null,
"spread": true,
"disabled": false,
"children": []
}
]
}]
}]