layui+ztree 树状下拉框

<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>

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}
]