layui+ztree 树状下拉框

一、效果图

【关闭】

　　

【展开】　　　　

　　　　　

二、代码

 【HTML】注:布局一定要用DIV不是select否则效果····

 <div class="layui-form-item">

                <label class="layui-form-label" style="float:left">部门</label>
                <div class="layui-input-block">
                    @*<select name="PDEPT_KEY" lay-filter="PDEPT_KEY" id="PDEPT_KEY" lay-search="" lay-verType="tips">
                       <option value="" selected></option>
                        </select>*@  8                     <div name="PDEPT_KEY" lay-filter="PDEPT_KEY" id="PDEPT_KEY" class="layui-form-select select-tree" lay-search=""></div>

                </div>
        </div>

 

【js】

   ① 以下为固定方法

  function initSelectTree(id, isMultiple, chkboxType, zNodes) {  2             var setting = {  3 
 data: {  5  simpleData: {  6                         enable: true
 }  8  },  9  check: {  10                     enable: false,  11                     chkStyle: "radio",  12                     radioType: "all",  13 
 },  15                 chkboxType: { "Y": "ps", "N": "ps" },  16  callback: {  17  onClick: onClick,  18  onCheck: onCheck  19  }  20 
 };  22             if (isMultiple) {  23                 setting.check.enable = isMultiple;  24  }  25             if (chkboxType !== undefined && chkboxType != null) {  26                 setting.check.chkboxType = chkboxType;  27  }  28             var html = '<div class = "layui-select-title" >' +
                '<input id="' + id + 'Show"' + 'type = "text" placeholder = "请选择" value = "" class = "layui-input" readonly>' +
                '<i class= "layui-edge" ></i>' +
                '</div>';  32             $("#" + id).append(html);  33 
            $("#" + 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>');  39             $("#" + id).bind("click", function () {  40                 if ($(this).parent().find(".tree-content").css("display") !== "none") {  41  hideMenu()  42                 } else {  43                     $(this).addClass("layui-form-selected");  44                     var Offset = $(this).offset();  45                     var width = $(this).width() - 2 - 15;  46                     $(this).parent().find(".tree-content").css({  47                         left: Offset.left + "px",  48                         top: Offset.top + $(this).height() + "px",  49                         height: 250 + "px",  50                     }).slideDown("fast");  51                     $(this).parent().find(".tree-content").css({  52  width: width,  53 
 });  55                     $("body").bind("mousedown", onBodyDown);  56  }  57  });  58             $.fn.zTree.init($("#" + id + "Tree"), setting, zNodes);  59  hideMenu();  60  }  61 
        //function beforeClick(treeId, treeNode) {
        // var check = (treeNode && !treeNode.isParent);
        // if (!check) alert("只能选择城市...");
        // return check;
        //}

        function onClick(event, treeId, treeNode) {  69             var zTree = $.fn.zTree.getZTreeObj(treeId);  70             if (zTree.setting.check.enable == true) {  71                 zTree.checkNode(treeNode, !treeNode.checked, false)  72  assignment(treeId, zTree.getCheckedNodes());  73             } else {  74  assignment(treeId, zTree.getSelectedNodes());  75  hideMenu();  76  }  77  }  78 
        function onCheck(event, treeId, treeNode) {  80             var zTree = $.fn.zTree.getZTreeObj(treeId);  81  assignment(treeId, zTree.getCheckedNodes());  82  }  83 
        function hideMenu() {  85             $(".select-tree").removeClass("layui-form-selected");  86             $(".tree-content").fadeOut("fast");  87             $("body").unbind("mousedown", onBodyDown);  88  }  89 
        function assignment(treeId, nodes) {  91             var names = "";  92             var ids = "";  93             for (var i = 0, l = nodes.length; i < l; i++) {  94                 names += nodes[i].name + ",";  95                 ids += nodes[i].id + ",";  96  }  97             if (names.length > 0) {  98                 names = names.substring(0, names.length - 1);  99                 ids = ids.substring(0, ids.length - 1); 100  } 101             treeId = treeId.substring(0, treeId.length - 4); 102             $("#" + treeId + "Show").attr("value", names); 103             $("#" + treeId + "Show").attr("title", names); 104             $("#" + treeId + "Hide").attr("value", ids); 105  } 106 
        function onBodyDown(event) { 108             if ($(event.target).parents(".tree-content").html() == null) { 109  hideMenu(); 110  } 111         }

 

 ②以下为变动方法

Ajax("/BindCombox/GetDeptData", false, "POST", {}, function (data) {  2                 var jsondata = JSON.parse(data);  3                 if (jsondata.IsError) {  4                     layer.msg("" + jsondata.ErrMsg, { icon: 5 });  5                 } else {  6                     zNodes = jsondata.Data;//获取数据源  7 

                    initSelectTree("PDEPT_KEY", true, { "Y": "ps", "N": "s" }, zNodes); 10                     var treeObj = $.fn.zTree.getZTreeObj("PDEPT_KEYTree"); 11                     var node = treeObj.getNodes(); 12                     treeObj.selectNode(node[0]); 13                     treeObj.checkNode(node[0], true, true, true); 14  } 15             });

 

　　③数据源格式

[ 2 {"id":41.0,"name":"技术二部","pId":1.0,"open":true}, 3 {"id":42.0,"name":"技术三部","pId":null,"open":true} 4 ]

注：设置open为true，树状菜单为展开状态

 

三、未实现效果问题解析

　　①没有引用js。ztree和layui

　　②布局采用select，没有使用div

　　③网络请求数据源不正确。

 

注：此方法仍存在不足之处，望有能人指点