dtree渲染下拉树，layui集成dtree，dtree渲染下拉框

文档位置

dtree官方文档地址链接

渲染下拉树js dTreeUtil.js

/**
 *
 * @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);
    });
    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;
};

渲染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": []
			}
		]
	}]
}]