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