devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用ztree实现左侧树勾选添加到右侧列表_treewidget树形列表定位右侧表格

作者：繁依Fanyi0 | 2024-03-27 06:39:30

赞

踩

treewidget树形列表定位右侧表格

仅作记录

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>树形菜单表格</title>
  6.     <link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css"/>
  7.     <link rel="stylesheet" href="../lib/zTree_v3/css/metroStyle/metroStyle.css" type="text/css">
  8.     <link rel="stylesheet" type="text/css" href="../css/new-common.css"/>
  9.     <link rel="stylesheet" type="text/css" href="../css/new-public.css"/>
  10.     <style type="text/css">
  11.         .gt-body {
  12.             height: 100%;
  13.             padding: 0;
  14.         }
  15.  
  16.         .gt-header {
  17.             font-size: 18px;
  18.             text-align: center;
  19.         }
  20.  
  21.         .gtmap .gt-body .gtmap-body .gt-position-left {
  22.             width: 50%;
  23.             float: left;
  24.             height: 100%;
  25.             padding: 1% 0;
  26.             border-right: 1px solid #ccc;
  27.             box-sizing: border-box;
  28.         }
  29.  
  30.         .gtmap .gt-body .gtmap-body .gt-position-right {
  31.             width: 50%;
  32.             height: 100%;
  33.             padding: 1% 0;
  34.             left: 50%;
  35.         }
  36.  
  37.         .gtmap .gt-body .gtmap-body .tree-container {
  38.             background: #fff;
  39.             padding: 0;
  40.             right: 0px;
  41.             left: 20px;
  42.         }
  43.         .gtmap .gt-body .gtmap-body .tree-container .person-list{
  44.             position: absolute;
  45.             left: 0;
  46.             right: 0;
  47.             top: 30px;
  48.             bottom: 0;
  49.             overflow: auto;
  50.             padding-right: 20px;
  51.         }
  52.  
  53.         #treeDemo {
  54.             position: absolute;
  55.             top: 40px;
  56.             bottom: 0;
  57.             left: 0;
  58.             right: 0;
  59.         }
  60.  
  61.         .tip-info {
  62.             height: 30px;
  63.             line-height: 30px;
  64.         }
  65.  
  66.         .person-list li {
  67.             height: 30px;
  68.             line-height: 30px;
  69.             color: #333;
  70.         }
  71.  
  72.         .person-list li .layui-icon {
  73.             font-size: 20px;
  74.             color: #aaa;
  75.             float: right;
  76.             position: relative;
  77.             top: 1px;
  78.             cursor: pointer;
  79.         }
  80.  
  81.         .person-list li .left-icon {
  82.             background-color: transparent;
  83.             background-repeat: no-repeat;
  84.             background-attachment: scroll;
  85.             background-image: url(../lib/zTree_v3/css/metroStyle/img/ztree-cl-qunzu.png);
  86.             background-image: url(../lib/zTree_v3/css/metroStyle/img/ztree-cl-qunzu.gif);
  87.             font-size: 12px;
  88.             background-position: -147px -42px;
  89.             vertical-align: middle;
  90.             line-height: 0;
  91.             margin: 0;
  92.             padding: 0;
  93.             width: 21px;
  94.             height: 20px;
  95.             line-height: 20px;
  96.             float: left;
  97.             position: relative;
  98.             top: 3px;
  99.             margin-right: 3px;
  100.         }
  101.         .zTreeBlurrySearch{
  102.             margin-right: 20px;
  103.         }
  104.     </style>
  105. </head>
  106. <body class="gtmap">
  107. <div class="gt-body">
  108.     <div class="gt-toolbar gt-header">
  109.         添加人员
  110.     </div>
  111.     <div class="gtmap-body">
  112.         <div class="gt-position-left">
  113.             <div class="tree-container">
  114.                 <!--<div class="tree-cnt">-->
  115.                 <div class="zTreeBlurrySearch" id="zTreeSearch">
  116.                     <div class="input-icon-box-right input-icon-box-sm">
  117.                         <input id="key" name="" placeholder="请输入检索内容" autocomplete="off" class="layui-input">
  118.                         <i class="layui-icon layui-icon-search"></i>
  119.                     </div>
  120.                 </div>
  121.                 <ul id="treeDemo" class="ztree userTreeColor"></ul>
  122.             </div>
  123.         </div>
  124.         <div class="gtmap-cnt gt-position-right">
  125.             <div class="tree-container list-container">
  126.                 <p class="tip-info">已选择了<span>0</span>个联系人</p>
  127.                 <ul class="person-list">   无数据  </ul>
  128.             </div>
  129.         </div>
  130.     </div>
  131. </div>
  132. </body>
  133. <script type="text/html" id="listTpl">
  134.     <p class="tip-info">已选择了<span>{{d.length}}</span>个联系人</p>
  135.     <ul class="person-list">
  136.         {{# layui.each(d, function(index, item){ }}
  137.         <li data-id="{{item.id}}">
  138.             <i class="left-icon"></i>
  139.             <span>{{item.name}}</span>
  140.             <i class="layui-icon layui-icon-close-fill delete-icon"></i>
  141.         </li>
  142.         {{# }); }}
  143.         {{# if(d.length === 0){ }}
  144.         无数据
  145.         {{# } }}
  146.     </ul>
  147.  
  148. </script>
  149. <script type="text/javascript" src="../lib/layui/layui.js"></script>
  150. <!--加载ztree-->
  151. <script type="text/javascript" src="../lib/zTree_v3/js/jquery-1.4.4.min.js"></script>
  152. <script type="text/javascript" src="../lib/zTree_v3/js/jquery.ztree.core.js"></script>
  153. <script type="text/javascript" src="../lib/zTree_v3/js/jquery.ztree.excheck.js"></script>
  154. <script type="text/javascript" src="../lib/zTree_v3/js/jquery.ztree.exedit.js"></script>
  155. <script type="text/javascript" src="../lib/zTree_v3/js/jquery.ztree.exhide.js"></script>
  156. <script src="../lib/zTree_v3/js/fuzzysearch.js" type="text/javascript" charset="utf-8"></script>
  157. <script>
  158.     // 先取到ztree要用的jquery
  159.     var ztreeS = $;
  160.     layui.use(['jquery', 'form', 'laypage', 'laytpl', 'element'], function () {
  161.         var form = layui.form,
  162.             laypage = layui.laypage,
  163.             laytpl = layui.laytpl,
  164.             element = layui.element,
  165.             $ = layui.jquery;
  166.  
  167.  
  168.         // 定义右侧列表渲染的数组
  169.         var renderArr = [];
  170.  
  171.  
  172.         //树形配置
  173.         var setting = {
  174.             check: {
  175.                 enable: true//checkbox
  176.             },
  177.             view: {
  178.                 nameIsHTML: true, //允许name支持html
  179.                 selectedMulti: false
  180.             },
  181.             edit: {
  182.                 enable: false,
  183.                 editNameSelectAll: false
  184.             },
  185.             data: {
  186.                 simpleData: {
  187.                     enable: true
  188.                 }
  189.             },
  190.             callback: {
  191.                 onCheck: zTreeOnCheck
  192.             }
  193.         };
  194.  
  195.         //树形的节点数据
  196.         var zNodes = [
  197.             {id: 1, pId: 0, name: "父节点1", open: true},
  198.             {id: 11, pId: 1, name: "父节点11", open: true},
  199.             {id: 111, pId: 11, name: "叶子节点111"},
  200.             {id: 112, pId: 11, name: "叶子节点112"},
  201.             {id: 113, pId: 11, name: "叶子节点113"},
  202.             {id: 114, pId: 11, name: "叶子节点114"},
  203.             {id: 12, pId: 1, name: "父节点12"},
  204.             {id: 121, pId: 12, name: "叶子节点121"},
  205.             {id: 122, pId: 12, name: "叶子节点122"},
  206.             {id: 123, pId: 12, name: "叶子节点123"},
  207.             {id: 124, pId: 12, name: "叶子节点124"},
  208.             {id: 13, pId: 1, name: "父节点13"},
  209.             {id: 2, pId: 0, name: "父节点2"},
  210.             {id: 21, pId: 2, name: "父节点21", open: true},
  211.             {id: 211, pId: 21, name: "叶子节点211"},
  212.             {id: 212, pId: 21, name: "叶子节点212"},
  213.             {id: 213, pId: 21, name: "叶子节点213"},
  214.             {id: 214, pId: 21, name: "叶子节点214"},
  215.             {id: 22, pId: 2, name: "父节点22"},
  216.             {id: 221, pId: 22, name: "叶子节点221"},
  217.             {id: 222, pId: 22, name: "叶子节点222"},
  218.             {id: 223, pId: 22, name: "叶子节点223"},
  219.             {id: 224, pId: 22, name: "叶子节点224"},
  220.             {id: 23, pId: 2, name: "父节点23"},
  221.             {id: 231, pId: 23, name: "叶子节点231"},
  222.             {id: 232, pId: 23, name: "叶子节点232"},
  223.             {id: 233, pId: 23, name: "叶子节点233"},
  224.             {id: 234, pId: 23, name: "叶子节点234"},
  225.             {id: 3, pId: 0, name: "父节点3"}
  226.         ];
  227.  
  228.         // 获取某节点下的所有叶子节点
  229.         function getAllChildrenNodes(treeNode, result) {
  230.             if (treeNode.isParent) {
  231.                 var childrenNodes = treeNode.children;
  232.                 if (childrenNodes) {
  233.                     for (var i = 0; i < childrenNodes.length; i++) {
  234.                         if (childrenNodes[i].isParent) {
  235.                             result = getAllChildrenNodes(childrenNodes[i], result);
  236.                         } else {
  237.                             result += ',' + childrenNodes[i].id;
  238.                         }
  239.                     }
  240.                 }
  241.             }
  242.             return result;
  243.         }
  244.  
  245.         // 勾选回调函数
  246.         function zTreeOnCheck(event, treeId, treeNode) {
  247.             // alert(treeNode.id + ", " + treeNode.name + "," + treeNode.checked);
  248.             // 拿到name值，因为搜索之后匹配字段加样式，获取到的name值不正确，所以要根据id进行匹配
  249.             var str = "";
  250.             var selectedNodesId = [];
  251.             if (treeNode.checked) {
  252.                 if (treeNode.isParent) {
  253.                     str = getAllChildrenNodes(treeNode, str);
  254.                     selectedNodesId = str.split(',');
  255.                     selectedNodesId = selectedNodesId.slice(1);
  256.                 } else {
  257.                     selectedNodesId.push(treeNode.id)
  258.                 }
  259.                 for (var i = 0; i < selectedNodesId.length; i++) {
  260.                     var selectedId = selectedNodesId[i];
  261.                     var selectedName = zNodes.filter(function (v) {
  262.                         return v.id == selectedId
  263.                     })[0].name;
  264.                     renderArr.push({
  265.                         id: selectedId,
  266.                         name: selectedName
  267.                     })
  268.                 }
  269.             } else {
  270.                 if (treeNode.isParent) {
  271.                     str = getAllChildrenNodes(treeNode, str);
  272.                     selectedNodesId = str.split(',');
  273.                     selectedNodesId = selectedNodesId.slice(1);
  274.                 } else {
  275.                     selectedNodesId.push(treeNode.id)
  276.                 }
  277.                 for (var i = 0; i < selectedNodesId.length; i++) {
  278.                     var selectedId = selectedNodesId[i];
  279.                     var index = renderArr.indexOf(renderArr.filter(function (v) {
  280.                         return v.id == selectedId
  281.                     })[0]);
  282.                     renderArr.splice(index, 1);
  283.                 }
  284.             }
  285.             console.log(renderArr)
  286.             laytpl($('#listTpl').html()).render(renderArr, function (html) {
  287.                 $('.list-container').html(html);
  288.             })
  289.         }
  290.  
  291.         $(document).on('click', '.delete-icon', function () {
  292.             // 更新右侧列表
  293.             var dataId = $(this).parent().attr('data-id');
  294.             var index = renderArr.indexOf(renderArr.filter(function (v) {
  295.                 return v.id == dataId
  296.             })[0]);
  297.             renderArr.splice(index, 1);
  298.             laytpl($('#listTpl').html()).render(renderArr, function (html) {
  299.                 $('.list-container').html(html);
  300.             })
  301.             // 更新左侧树
  302.             var treeObj = ztreeS.fn.zTree.getZTreeObj("treeDemo");
  303.             function filter(node) {
  304.                 return (node.id == dataId);
  305.             }
  306.             var node = treeObj.getNodesByFilter(filter, true); // 仅查找一个节点
  307.             treeObj.checkNode(node, false, true, false)
  308.         })
  309.  
  310.         //树形加载
  311.         $(document).ready(function () {
  312.             ztreeS.fn.zTree.init($("#treeDemo"), setting, zNodes);
  313.             fuzzySearch('treeDemo', '#key', null, true); //初始化模糊搜索方法
  314.         });
  315.     });
  316.  
  317.  
  318. </script>
  319. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/322384
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号