一、效果图
【关闭】
【展开】
二、代码
【HTML】注:布局一定要用DIV不是select否则效果····
1 <div class="layui-form-item">
2
3 <label class="layui-form-label" style="float:left">部门</label>
4 <div class="layui-input-block">
5 @*<select name="PDEPT_KEY" lay-filter="PDEPT_KEY" id="PDEPT_KEY" lay-search="" lay-verType="tips">
6 <option value="" selected></option>
7 </select>*@
8 <div name="PDEPT_KEY" lay-filter="PDEPT_KEY" id="PDEPT_KEY" class="layui-form-select select-tree" lay-search=""></div>
9
10 </div>
11 </div>
【js】
① 以下为固定方法
1 function initSelectTree(id, isMultiple, chkboxType, zNodes) {
2 var setting = {
3
4 data: {
5 simpleData: {
6 enable: true
7 }
8 },
9 check: {
10 enable: false,
11 chkStyle: "radio",
12 radioType: "all",
13
14 },
15 chkboxType: { "Y": "ps", "N": "ps" },
16 callback: {
17 onClick: onClick,
18 onCheck: onCheck
19 }
20
21 };
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" >' +
29 '<input id="' + id + 'Show"' + 'type = "text" placeholder = "请选择" value = "" class = "layui-input" readonly>' +
30 '<i class= "layui-edge" ></i>' +
31 '</div>';
32 $("#" + id).append(html);
33
34 $("#" + id).append('<dl class="layui-anim layui-anim-upbit" ><div class="tree-content scrollbar">' +
35 '<input hidden id="' + id + 'Hide" ' +
36 'name="' + $(".select-tree").attr("id") + '">' +
37 '<ul id="' + id + 'Tree" class="ztree scrollbar" style="margin-top:0;"></ul>' +
38 '</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,
53
54 });
55 $("body").bind("mousedown", onBodyDown);
56 }
57 });
58 $.fn.zTree.init($("#" + id + "Tree"), setting, zNodes);
59 hideMenu();
60 }
61
62 //function beforeClick(treeId, treeNode) {
63 // var check = (treeNode && !treeNode.isParent);
64 // if (!check) alert("只能选择城市...");
65 // return check;
66 //}
67
68 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
79 function onCheck(event, treeId, treeNode) {
80 var zTree = $.fn.zTree.getZTreeObj(treeId);
81 assignment(treeId, zTree.getCheckedNodes());
82 }
83
84 function hideMenu() {
85 $(".select-tree").removeClass("layui-form-selected");
86 $(".tree-content").fadeOut("fast");
87 $("body").unbind("mousedown", onBodyDown);
88 }
89
90 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
107 function onBodyDown(event) {
108 if ($(event.target).parents(".tree-content").html() == null) {
109 hideMenu();
110 }
111 }
②以下为变动方法
1 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
8
9 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 });
③数据源格式
1 [
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
③网络请求数据源不正确。
注：此方法仍存在不足之处，望有能人指点