加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > C语言 > 正文

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

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

?

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

?

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读