dtree下拉树的一些基础用法
id Number 唯一的id
pid Number 判定父节点的数字,根节点的值为 -1
name String 节点的文本标签
url String 节点的Url
title String 节点的Title
target String 节点的target
icon String 用做节点的图标,节点没有指定图标时使用默认值
iconOpen String 用做节点打开的图标,节点没有指定图标时使用默认值
open Boolean 判断节点是否打开
/**
*
* @param id 要渲染的dom
* @param data 数据
* @param none 无数据时显示 "暂时没有数据!"
* @param checkbar 是否开启复选框
* @param checkbarType 上下级联关系 半选、单向级联、独立、仅存一个
* @returns {*}
*/
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, // 默认就是all,其他的值为: no-all p-casc self only
menubar: true,
// width : "500px",
height: height,
menubarTips: {
group: ["moveDown", "moveUp", "refresh", "searchNode"]
}
});
// 绑定节点点击事件
dtree.on("node("+id+")", function(obj){
var nodeId = obj.param.nodeId;
dtreeObj.clickNodeCheckbar(nodeId);// 点击节点选中复选框
// console.log(obj.param)
// var checkbarNodes = dtree.getCheckbarNodesParam("checkbarTreeNode");
// layer.msg(JSON.stringify(checkbarNodes));
});
});
return dtreeObj;
}
/**
* 获取选中数据
* @param id
* @returns {*[]}
*/
function getCheckbarNodesParam(id){
var checkStr = [];
layui.use(['dtree'], function() {
var dtree = layui.dtree;
checkStr = dtree.getCheckbarNodesParam(id); //id是元素的dtree-id(默认是checkemployeetree)
});
return checkStr;
}
/**
* 数组转化为树形结构
* @param list
* @returns {*[]}
*/
function arrayToDtree (arr, pid){
var list = [];
arr.map(item=>{
console.log(1)
if (item.parent == pid){
var result = {
id : item.id, //节点ID(必填)
title : item.name, //节点名称(必填)
parentId : item.parent, //父节点ID(必填)
checkArr : "0", //复选框列表(开启复选框必填,默认是json数组。)
checked : false, //是否选中(开启复选框,0-未选中,1-选中,2-半选。非必填)
spread : true, //节点展开状态(v2.4.5_finally_beta版本新增。true:展开,false:不展开,布尔值,非必填)
disabled : false,
children : []
};
list.push(result);
}
});
list.map(item=>{
console.log(2)
item.children = arrayToDtree(arr,item.id) ;
})
return list;
};