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>*@
                     <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) {
             var setting = {

                 data: {
                     simpleData: {
                         enable: true
                     }
                 },
                 check: {
                     enable: false,
                     chkStyle: "radio",
                     radioType: "all",

                 },
                 chkboxType: { "Y": "ps", "N": "ps" },
                 callback: {
                     onClick: onClick,
                     onCheck: onCheck
                 }

             };
             if (isMultiple) {
                 setting.check.enable = isMultiple;
             }
             if (chkboxType !== undefined && chkboxType != null) {
                 setting.check.chkboxType = chkboxType;
             }
             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>';
             $("#" + 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") {
                     hideMenu()
                 } 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 beforeClick(treeId, treeNode) {
         //    var check = (treeNode && !treeNode.isParent);
         //    if (!check) alert("只能选择城市...");
         //    return check;
         //}

         function onClick(event, treeId, treeNode) {
             var zTree = $.fn.zTree.getZTreeObj(treeId);
             if (zTree.setting.check.enable == true) {
                 zTree.checkNode(treeNode, !treeNode.checked, false)
                 assignment(treeId, zTree.getCheckedNodes());
             } else {
                 assignment(treeId, zTree.getSelectedNodes());
                 hideMenu();
             }
         }

         function onCheck(event, treeId, treeNode) {
             var zTree = $.fn.zTree.getZTreeObj(treeId);
             assignment(treeId, zTree.getCheckedNodes());
         }

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

         function assignment(treeId, nodes) {
             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);
             $("#" + treeId + "Show").attr("value", names);
             $("#" + treeId + "Show").attr("title", names);
             $("#" + treeId + "Hide").attr("value", ids);
         }

         function onBodyDown(event) {
             if ($(event.target).parents(".tree-content").html() == null) {
                 hideMenu();
             }
         }

②以下为变动方法

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

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

　　③数据源格式

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

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

三、未实现效果问题解析

　　①没有引用js。ztree和layui

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

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

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