经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
layui+ztree 树状下拉框
来源:cnblogs  作者:小群子0618  时间:2019/1/16 9:18:27  对本文有异议

一、效果图

【关闭】

  

【展开】    

     

二、代码

 【HTML】注:布局一定要用DIV不是select否则效果····

  1. 1 <div class="layui-form-item">
  2. 2
  3. 3 <label class="layui-form-label" style="float:left">部门</label>
  4. 4 <div class="layui-input-block">
  5. 5 @*<select name="PDEPT_KEY" lay-filter="PDEPT_KEY" id="PDEPT_KEY" lay-search="" lay-verType="tips">
  6. 6 <option value="" selected></option>
  7. 7 </select>*@
  8. 8 <div name="PDEPT_KEY" lay-filter="PDEPT_KEY" id="PDEPT_KEY" class="layui-form-select select-tree" lay-search=""></div>
  9. 9
  10. 10 </div>
  11. 11 </div>

 

【js】

   ① 以下为固定方法

  1. 1 function initSelectTree(id, isMultiple, chkboxType, zNodes) {
  2. 2 var setting = {
  3. 3
  4. 4 data: {
  5. 5 simpleData: {
  6. 6 enable: true
  7. 7 }
  8. 8 },
  9. 9 check: {
  10. 10 enable: false,
  11. 11 chkStyle: "radio",
  12. 12 radioType: "all",
  13. 13
  14. 14 },
  15. 15 chkboxType: { "Y": "ps", "N": "ps" },
  16. 16 callback: {
  17. 17 onClick: onClick,
  18. 18 onCheck: onCheck
  19. 19 }
  20. 20
  21. 21 };
  22. 22 if (isMultiple) {
  23. 23 setting.check.enable = isMultiple;
  24. 24 }
  25. 25 if (chkboxType !== undefined && chkboxType != null) {
  26. 26 setting.check.chkboxType = chkboxType;
  27. 27 }
  28. 28 var html = '<div class = "layui-select-title" >' +
  29. 29 '<input id="' + id + 'Show"' + 'type = "text" placeholder = "请选择" value = "" class = "layui-input" readonly>' +
  30. 30 '<i class= "layui-edge" ></i>' +
  31. 31 '</div>';
  32. 32 $("#" + id).append(html);
  33. 33
  34. 34 $("#" + id).append('<dl class="layui-anim layui-anim-upbit" ><div class="tree-content scrollbar">' +
  35. 35 '<input hidden id="' + id + 'Hide" ' +
  36. 36 'name="' + $(".select-tree").attr("id") + '">' +
  37. 37 '<ul id="' + id + 'Tree" class="ztree scrollbar" style="margin-top:0;"></ul>' +
  38. 38 '</div></dl>');
  39. 39 $("#" + id).bind("click", function () {
  40. 40 if ($(this).parent().find(".tree-content").css("display") !== "none") {
  41. 41 hideMenu()
  42. 42 } else {
  43. 43 $(this).addClass("layui-form-selected");
  44. 44 var Offset = $(this).offset();
  45. 45 var width = $(this).width() - 2 - 15;
  46. 46 $(this).parent().find(".tree-content").css({
  47. 47 left: Offset.left + "px",
  48. 48 top: Offset.top + $(this).height() + "px",
  49. 49 height: 250 + "px",
  50. 50 }).slideDown("fast");
  51. 51 $(this).parent().find(".tree-content").css({
  52. 52 width: width,
  53. 53
  54. 54 });
  55. 55 $("body").bind("mousedown", onBodyDown);
  56. 56 }
  57. 57 });
  58. 58 $.fn.zTree.init($("#" + id + "Tree"), setting, zNodes);
  59. 59 hideMenu();
  60. 60 }
  61. 61
  62. 62 //function beforeClick(treeId, treeNode) {
  63. 63 // var check = (treeNode && !treeNode.isParent);
  64. 64 // if (!check) alert("只能选择城市...");
  65. 65 // return check;
  66. 66 //}
  67. 67
  68. 68 function onClick(event, treeId, treeNode) {
  69. 69 var zTree = $.fn.zTree.getZTreeObj(treeId);
  70. 70 if (zTree.setting.check.enable == true) {
  71. 71 zTree.checkNode(treeNode, !treeNode.checked, false)
  72. 72 assignment(treeId, zTree.getCheckedNodes());
  73. 73 } else {
  74. 74 assignment(treeId, zTree.getSelectedNodes());
  75. 75 hideMenu();
  76. 76 }
  77. 77 }
  78. 78
  79. 79 function onCheck(event, treeId, treeNode) {
  80. 80 var zTree = $.fn.zTree.getZTreeObj(treeId);
  81. 81 assignment(treeId, zTree.getCheckedNodes());
  82. 82 }
  83. 83
  84. 84 function hideMenu() {
  85. 85 $(".select-tree").removeClass("layui-form-selected");
  86. 86 $(".tree-content").fadeOut("fast");
  87. 87 $("body").unbind("mousedown", onBodyDown);
  88. 88 }
  89. 89
  90. 90 function assignment(treeId, nodes) {
  91. 91 var names = "";
  92. 92 var ids = "";
  93. 93 for (var i = 0, l = nodes.length; i < l; i++) {
  94. 94 names += nodes[i].name + ",";
  95. 95 ids += nodes[i].id + ",";
  96. 96 }
  97. 97 if (names.length > 0) {
  98. 98 names = names.substring(0, names.length - 1);
  99. 99 ids = ids.substring(0, ids.length - 1);
  100. 100 }
  101. 101 treeId = treeId.substring(0, treeId.length - 4);
  102. 102 $("#" + treeId + "Show").attr("value", names);
  103. 103 $("#" + treeId + "Show").attr("title", names);
  104. 104 $("#" + treeId + "Hide").attr("value", ids);
  105. 105 }
  106. 106
  107. 107 function onBodyDown(event) {
  108. 108 if ($(event.target).parents(".tree-content").html() == null) {
  109. 109 hideMenu();
  110. 110 }
  111. 111 }

 

 ②以下为变动方法

  1. 1 Ajax("/BindCombox/GetDeptData", false, "POST", {}, function (data) {
  2. 2 var jsondata = JSON.parse(data);
  3. 3 if (jsondata.IsError) {
  4. 4 layer.msg("" + jsondata.ErrMsg, { icon: 5 });
  5. 5 } else {
  6. 6 zNodes = jsondata.Data;//获取数据源
  7. 7
  8. 8
  9. 9 initSelectTree("PDEPT_KEY", true, { "Y": "ps", "N": "s" }, zNodes);
  10. 10 var treeObj = $.fn.zTree.getZTreeObj("PDEPT_KEYTree");
  11. 11 var node = treeObj.getNodes();
  12. 12 treeObj.selectNode(node[0]);
  13. 13 treeObj.checkNode(node[0], true, true, true);
  14. 14 }
  15. 15 });

 

  ③数据源格式

  1. 1 [
  2. 2 {"id":41.0,"name":"技术二部","pId":1.0,"open":true},
  3. 3 {"id":42.0,"name":"技术三部","pId":null,"open":true}
  4. 4 ]

注:设置open为true,树状菜单为展开状态

 

三、未实现效果问题解析

  ①没有引用js。ztree和layui

  ②布局采用select,没有使用div

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

 

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

 

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号