layui+ztree 树状下拉框
发布时间:2020-12-15 02:14:21 所属栏目:C语言 来源:网络整理
导读:一、效果图 【关闭】 【展开】 二、代码 ?【HTML】 注:布局一定要用DIV不是select否则效果···· 1 div class ="layui-form-item" 2 3 label ="layui-form-label" style ="float:left" 部门 / label 4 ="layui-input-block" 5 @* select name ="PDEPT_KEY"
一、效果图【关闭】 【展开】 二、代码?【HTML】注:布局一定要用DIV不是select否则效果···· 1 <div class="layui-form-item">
2
3 label ="layui-form-label" style="float:left">部门</label 4 ="layui-input-block" 5 @*select name="PDEPT_KEY" lay-filter id lay-search="" lay-verType="tips" 6 option value selected></option 7 select>*@
8 class="layui-form-select select-tree"=""div 9
10 11 >
? 【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,1)"> 11 chkStyle: "radio" 12 radioType: "all" 13 14 15 chkboxType: { "Y": "ps","N": "ps" },1)"> 16 callback: { 17 onClick: onClick,1)"> 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", () { 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 $( 52 width: width,1)"> 53 54 }); 55 $("body").bind("mousedown" 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 onClick(event,treeId,treeNode) { 69 var zTree = $.fn.zTree.getZTreeObj(treeId); 70 if (zTree.setting.check.enable == true 71 zTree.checkNode(treeNode,!treeNode.checked,1)">) 72 assignment(treeId,zTree.getCheckedNodes()); 73 } 74 75 hideMenu(); 76 77 78 79 onCheck(event,1)"> 80 81 assignment(treeId,1)"> 82 83 84 hideMenu() { 85 $(".select-tree").removeClass("layui-form-selected" 86 $(".tree-content").fadeOut("fast" 87 $("body").unbind("mousedown" 88 89 90 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 + ",1)"> 96 97 if (names.length > 0 98 names = names.substring(0,names.length - 1 99 ids = ids.substring(0,ids.length - 1100 101 treeId = treeId.substring(0,treeId.length - 4102 $("#" + treeId + "Show").attr("value"103 $("#" + treeId + "Show").attr("title"104 $("#" + treeId + "Hide").attr("value"105 106 107 onBodyDown(event) { 108 if ($(event.target).parents(".tree-content").html() == 109 110 111 } ? ?②以下为变动方法 1 Ajax("/BindCombox/GetDeptData",1)">false,"POST",{},1)"> (data) { 2 var jsondata = JSON.parse(data); (jsondata.IsError) { 4 layer.msg("" + jsondata.ErrMsg,{ icon: 5 }); 5 } 6 zNodes = jsondata.Data;//获取数据源 7 8 9 initSelectTree("PDEPT_KEY",1)">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],1)">14 15 }); ? ③数据源格式 1 [
2 {"id":41.0,"name":"技术二部","pId":1.0,"open":true},1)">3 {"id":42.0,"name":"技术三部","pId":null,"open":true}
4 ]
注:设置open为true,树状菜单为展开状态 ? 三、未实现效果问题解析①没有引用js。ztree和layui ②布局采用select,没有使用div ③网络请求数据源不正确。 ? 注:此方法仍存在不足之处,望有能人指点 ? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |