使用Layui Select框集成Ztree

前幾天項目中有個需求，需要在select 框中加載一個兩層的樹（樹本身是無線級，但需求是根節點及根節點的下級節點）。

具體樣式如圖：

 這裏因爲採用異步加載樹，所以使用Ztree 進行開發，完成後效果如上圖。

整個開發過程還是有點繁瑣的，下邊將所作的做一個整理。

引入ztree 插件省略。。。

界面html 代碼，構建select  元素

​<div class="layui-inline">
     <label class="layui-form-label">庫房名稱：</label>
     <div class="layui-input-inline">
          <div name="PDEPT_KEY" lay-filter="PDEPT_KEY" id="PDEPT_KEY" class="layui-form-select select-tree" lay-search=""></div>
     </div>
</div>​

 js 渲染ztree組件：

$(document).ready(function() {
    initStoreTree();
});

//請求數據
function initStoreTree(){
	$.ajax({
		method : 'post',
		url : '${ctxPath}/store/management/getList',
		data : {"pid" : 0 },
		success : function(res) {
			var zNodes = JSON.parse(res);
			for ( var i in zNodes) {
				zNodes[i].isParent = true;//默認都是父節點（都有子節點）
			}
			initSelectTree("PDEPT_KEY",zNodes);
		}
	})
}

//渲染組件  固定方法
function initSelectTree(id,zNodes) {
      var setting = {
           data: {
                simpleData: {
                    enable: true
                }
           },
           callback: {
                onClick: onClick,//點擊名稱觸發（選中）
                onExpand:zTreeOnExpand//點擊“+”出發（伸縮展開）
           }
       };
       var html = '<div class = "layui-select-title" >' +
                '<input id="' + id + 'Show"' + 'type = "text" placeholder = "請選擇" lay-verify="required" value = "" class = "layui-input" readonly>' +
                '<i class= "layui-edge" ></i>' +
                '</div>';
            $("#" + id).append(html);

            $("#" + id).append('<dl  class="layui-anim layui-anim-upbit" ><div class="tree-content scrollbar">' +
                '<input hidden id="' + id + 'Hide" ' +
                'name="' + $(".select-tree").attr("id") + '">' +
                '<ul id="' + id + 'Tree" class="ztree scrollbar" style="margin-top:0;"></ul>' + '</div></dl>');
            $("#" + id).bind("click", function () {
                if ($(this).parent().find(".tree-content").css("display") !== "none") {
                } else {
                    $(this).addClass("layui-form-selected");
                    var Offset = $(this).offset();
                    var width = $(this).width() - 2 - 15;
                    $(this).parent().find(".tree-content").css({
                        left: Offset.left + "px",
                        top: Offset.top + $(this).height() + "px",
                        height: 250 + "px",
                    }).slideDown("fast");
                    $(this).parent().find(".tree-content").css({
                        width: width,

                    });
                    $("body").bind("mousedown", onBodyDown);
                }
            });
            $.fn.zTree.init($("#" + id + "Tree"), setting, zNodes);
            hideMenu();
        }
        
        function zTreeOnExpand(event, treeId, treeNode) {
        	if(treeNode.level < 1){
				getChildNodes(treeNode,null);
        	} else {
        		Dialog.warn("只需選定前兩級庫房名稱！");
        	}
		}
        
        function onClick(event, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("PDEPT_KEYTree");
            var pName = treeNode.getParentNode().name;
            if (zTree.setting.check.enable == true) {
                zTree.checkNode(treeNode, !treeNode.checked, false)
                assignment(treeId, zTree.getCheckedNodes(),pName);
            } else {
                assignment(treeId, zTree.getSelectedNodes(),pName);
                hideMenu();
            }
        }

        function hideMenu() {
            $(".select-tree").removeClass("layui-form-selected");
            $(".tree-content").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }

        function assignment(treeId, nodes,pName) {
            var names = "";
            var ids = "";
            for (var i = 0, l = nodes.length; i < l; i++) {
                names += nodes[i].name + ",";
                ids += nodes[i].id + ",";
            }
            if (names.length > 0) {
                names = names.substring(0, names.length - 1);
                ids = ids.substring(0, ids.length - 1);
            }
            treeId = treeId.substring(0, treeId.length - 4);
            //if(pName != "" || pName !=null){
                //爲input組件設置屬性 value/name/對應字段爲王后臺提交的字段
            	$("#" + treeId + "Show").attr("value", pName+"-"+names);//此處的pName 爲父節點名稱，這裏選中子節點需要帶出父節點名稱，如不需要可以不做設置。
            	$("#" + treeId + "Show").attr("name", "storeName");
            	$("#" + treeId + "Hide").attr("value", ids);
            //}
        }

        function onBodyDown(event) {
            if ($(event.target).parents(".tree-content").html() == null) {
                hideMenu();
            }
        }
        function getChildNodes(treeNode,newnode) {
			var treeObj = $.fn.zTree.getZTreeObj("PDEPT_KEYTree");
			var param = 0;
			if(treeNode != null){//子元素操作 
				if(treeNode.p_id != null){
					param = treeNode.p_id;
				}
			}else{//頂級元素操作
				if(param == 0 && newnode != null){//添加頂級節點
					newnode.isParent = true;//默認都是父節點（都有子節點）
					treeObj.addNodes(null, newnode, true);
					return;
				}
			}
			
			var parentZNode = treeObj.getNodeByParam("sid", treeNode.sid, null);//獲取指定父節點
			var childNodes = treeObj.transformToArray(treeNode);//獲取子節點集合
			
			//子節點已加載過一次，無需再次加載 	
			if (childNodes.length > 1) {
				if (newnode != null) {//有新寫入的元素
					if (childNodes.length == 2) {//長度爲2 且有noChildPoint（暫無下級階元）時需重新加載
						for ( var i in childNodes) {
							if (childNodes[i].name == noChildPoint) {
								treeObj.removeNode(childNodes[i]); //移除"noChildPoint（暫無下級節點）"
							}
						}
					}
					newnode.isParent = true;//默認都是父節點（都有子節點）
					treeObj.addNodes(parentZNode, newnode, false); //添加節點 
				}
				return;
			}
			//子節點第一次加載
			$.ajax({
				method : 'post',
				url : '${ctxPath}/store/management/getList',
				data : {
					"pid" : treeNode.sid
				},
				success : function(res) {
					var data = JSON.parse(res);
					if (data == null || data == '') {//無下級節點
						data = [ {
							sid : 'no',
							p_id : treeNode.sid,
							name : noChildPoint,
						} ];
					} else {//有下級節點
						for ( var i in data) {
							data[i].isParent = true;//默認都是父節點
						}
					}
					treeObj.addNodes(parentZNode, data, false); //添加節點 
				}
			})
		}

最終展示效果：