devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ztree模糊搜索及ztree与bootstrapTable表格数据左右增加和删除_ztree bootstrap

作者：小小林熬夜学编程 | 2024-03-27 06:32:33

赞

踩

ztree bootstrap
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>用户管理</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <link rel="stylesheet" href="./static/libs/font-awesome/css/font-awesome.css">
  9. <link rel="stylesheet" href="./static/libs/web-icons/web-icons.css">
  10. <link rel="stylesheet" href="./static/libs/bootstrap/css/bootstrap.css">
  11. <link rel="stylesheet" href="./static/libs/bootstrap-table-master/bootstrap-table.css">
  12. <link rel="stylesheet" href="./static/libs/toastr/css/toastr.css">
  13. <link rel="stylesheet" href="./static/css/common/base.css">
  14. <link rel="stylesheet" href="./static/libs/bootstrap-validator/css/bootstrapValidator.css">
  15. <link rel="stylesheet" href="./static/libs/ztree/css/metroStyle/metroStyle_adm.css" type="text/css">
  16. <link rel="stylesheet" href="./static/libs/alertify.js-0.3.11/themes/alertify.core.css" type="text/css">
  17. <link rel="stylesheet" href="./static/libs/alertify.js-0.3.11/themes/alertify.bootstrap.css" type="text/css">
  18. <style>
  19. .pull-left {
  20.   padding-left: 10px;
  21. }
  22. .pull-right {
  23.   padding-right: 10px;
  24. }
  25. </style>
  26. </head>
  27.  
  28. <body>
  29. <a id="add-virtual-group-button" href="#" title="" onclick="return false;">添加</a>
  30.  
  31. <!-- // 创建虚拟组  begin -->
  32. <div class="modal fade" id="add-virtual-group-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  33.     <div class="modal-dialog modal-create" style="width: 700px;">
  34.         <div class="modal-content">
  35.                     <div class="modal-header">
  36.                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  37.                             ×
  38.                         </button>
  39.                         <h4 class="modal-title"> 创建虚拟组 </h4>
  40.                     </div>
  41.                     <form id="add-virtual-group-modal-form" method="post" class="form-horizontal" action="">
  42.                     <div class="modal-body">       
  43.                         <!-- // modal-body begin -->
  44.                          
  45.                               <!-- Nav tabs -->
  46.                               <ul class="nav nav-tabs" role="tablist" id="add-virtual-group-modal-tab">
  47.                                 <li role="presentation" class="active"><a href="#add-virtual-group-modal-base-info" aria-controls="add-virtual-group-modal-base-info" role="tab" data-toggle="tab">基本信息</a></li>
  48.                                 <li role="presentation"><a href="#add-virtual-group-modal-users" aria-controls="add-virtual-group-modal-users" role="tab" data-toggle="tab">用户</a></li>
  49.                               </ul>
  50.                            
  51.                               <!-- Tab panes -->
  52.                               <div class="tab-content">
  53.                                 <div role="tabpanel" class="tab-pane active" id="add-virtual-group-modal-base-info">
  54.                                     <div class="clear"></div>
  55.                                     <!-- 基本信息 bedin -->
  56.                                    
  57.                                        <div style="height: 30px; clear: both;"></div>
  58.                                    
  59.                                        <div class="form-group">
  60.                                             <label class="col-lg-3 col-md-3 col-sm-3 control-label font-normal align-right">名 称：</label>
  61.                                             <div class="col-lg-6 col-md-6 col-sm-6">
  62.                                                 <input type="text" class="form-control" id="add-virtual-group-modal-name" name="" placeholder="" onkeyup="checkAddVirtualGroupModalName(this);"/>
  63.                                             </div>
  64.                                        </div>
  65.                                        
  66.                                            <div class="form-group" id="add-virtual-group-modal-name-tips-content" style="display: none;">
  67.                                             <label class="col-lg-3 col-md-3 col-sm-3 control-label font-normal align-right"></label>
  68.                                             <div class="col-lg-9 col-md-9 col-sm-9"  id="add-virtual-group-modal-name-tips" style="font-size: 12px; color: #ff0000">
  69.                                                
  70.                                             </div>
  71.                                        </div>
  72.  
  73.                                     <!-- 基本信息 end -->
  74.                                 </div>
  75.                                 <div role="tabpanel" class="tab-pane" id="add-virtual-group-modal-users">
  76.                                     <!-- // 主机  begin -->
  77.                                    
  78.                                    
  79.                                    
  80.                                     <table width="100%" border="0">
  81.                                       <tr>
  82.                                         <td width="45%" align="left" valign="top">
  83.                                              <div style="height: 20px; clear: both;"></div>
  84.                                              <div class="form-group" style="margin-left: 0; margin-right: 0;">
  85.                                                 <label class="sr-only" for="exampleInputAmount"></label>
  86.                                                 <div class="input-group">
  87.                                                     <input type="text" id="add-virtual-group-modal-users-input" onkeyup="autoMatchForAddVirtualGroupUsers();" class="form-control" placeholder="模糊匹配" style="border: 1px solid #cccccc; border-right: 0;"/>
  88.                                                   <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
  89.                                                 </div>
  90.                                               </div>
  91.                                               <ul class="ztree strategy-tab-ul" id="add-virtual-group-modal-users-tree" style="height: 200px; overflow: auto; margin-top: 0; border: 1px solid #e4eaec;">
  92.                                                
  93.                                               </ul>
  94.                                         </td>
  95.                                         <td align="left" valign="middle">
  96.                                             <a href="javascript:void(0)" class="btn btn-primary btn-xs" id="add-virtual-group-modal-users-add-button" style="margin: 20px;">添加</a>
  97.                                             <br>
  98.                                             <a href="javascript:void(0)" class="btn btn-primary btn-xs" id="add-virtual-group-modal-users-delete-button" style="margin: 20px;">删除</a>
  99.                                         </td>
  100.                                         <td width="45%" align="left" valign="top">
  101.                                             <table id="add-virtual-group-modal-users-table" data-toggle="table" class="table table-bordered table-striped" style="margin-top: 0;"></table>
  102.                                         </td>
  103.                                       </tr>
  104.                                     </table>
  105.                                     <!-- 主机  end // -->
  106.                                 </div>
  107.                               </div>
  108.  
  109.                        
  110.                         <!-- modal-body end // -->
  111.                     </div>
  112.                     <div class="modal-footer">
  113.                         <button class="btn btn-primary"  id="add-virtual-group-modal-submit" type="submit">
  114.                             确 定
  115.                         </button>
  116.                         <button class="btn btn-default" type="button" data-dismiss="modal">
  117.                             取 消
  118.                         </button>
  119.                     </div>
  120.             </form>
  121.         </div><!-- /Modal -->
  122.     </div>
  123. </div><!-- 创建虚拟组 end // -->
  124.  
  125. <script src="./static/libs/jquery/jquery-1.11.2.min.js"></script>
  126. <script src="./static/libs/bootstrap/js/bootstrap.js"></script>
  127. <script src="./static/libs/bootstrap-table-master/bootstrap-table.js"></script>
  128. <script src="./static/libs/bootstrap-table-master/locale/bootstrap-table-zh-CN.js"></script>
  129. <script src="./static/libs/toastr/js/toastr.min.js"></script>
  130. <script src="./static/libs/bootstrap-validator/js/bootstrapValidator.js"></script>
  131. <script src="./static/libs/ztree/js/jquery.ztree.core-3.5.js"></script>
  132. <script src="./static/libs/ztree/js/jquery.ztree.exedit.js"></script>
  133. <script src="./static/libs/ztree/js/jquery.ztree.excheck-3.5.js"></script>
  134. <script src="./static/libs/ztree/js/jquery.ztree.exhide-3.5.js"></script>
  135. <script src="./static/libs/alertify.js-0.3.11/lib/alertify.min.js"></script>
  136. <script src="./static/libs/My97DatePicker/WdatePicker.js"></script>
  137. <script>
  138. // 所有节点
  139. var allNodes = [];
  140.  
  141. $("#add-virtual-group-button").click(function(){
  142. 	$("#add-virtual-group-modal").modal("show");
  143. 	initTreeForAddVirtualGroupUsers();
  144. 	var ztreeObj  = $.fn.zTree.getZTreeObj("add-virtual-group-modal-users-tree");
  145. 	allNodes = ztreeObj.transformToArray(ztreeObj.getNodes());
  146. 	console.log(allNodes);
  147. });
  148.  
  149. //添加用户表格
  150. var $addVirtualGroupModalUsersTable = $('#add-virtual-group-modal-users-table').bootstrapTable('destroy').bootstrapTable({
  151.     url: '',
  152.     method: 'POST',
  153.     uniqueId: 'id',
  154.     striped: false,
  155.     cache: false,
  156.     sortable: true,
  157.     sortOrder: "asc",
  158.     sidePagination: "client",
  159.     undefinedText: '--',
  160.     //singleSelect: true,
  161.     //showRefresh   : true,
  162.     //showColumns   : true,
  163.     toolbar: '#user-table-toolbar',
  164.     search: false,
  165.     strictSearch: true,
  166.     clickToSelect: true,
  167.     pagination: true,
  168.     pageNumber:1,
  169.     pageSize:5,
  170.     pageList: [5, 10, 20, 50, 100],
  171.     paginationPreText:"上一页",
  172.     paginationNextText:"下一页",
  173.     paginationLoop:false,
  174.     //showToggle: true,
  175.     //cardView: false,
  176.     //detailView: false,
  177.     //showPaginationSwitch: true,
  178.     //得到查询的参数
  179.     queryParams : function (params) {
  180.         //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
  181.         var temp = {
  182.             rows: params.limit,                         //页面大小
  183.             page: (params.offset / params.limit) + 1,   //页码
  184.             sort: params.sort,      //排序列名
  185.             sortOrder: params.order, //排位命令（desc，asc）
  186.         };
  187.         // console.log(temp);
  188.         return temp;
  189.     },
  190.     columns: [
  191.         {
  192.             checkbox: true
  193.         },{
  194.                 field: 'name',
  195.                 title: '用户'
  196.         }
  197.     ],
  198.     onLoadSuccess: function () {
  199.         //alert('表格加载成功！');
  200.     },
  201.     onLoadError: function () {
  202.         showTips("数据加载失败！");
  203.     },
  204.     onDblClickRow: function (row, $element) {
  205.         var id = row.ID;
  206.         //$("#user-details-modal").modal("show");
  207.         //EditViewById(id, 'view');
  208.     },
  209.     rowStyle: function (row, index) { //设置行的特殊样式
  210.         //这里有5个取值颜色['active', 'success', 'info', 'warning', 'danger'];
  211.         var strclass = "";
  212.         if (index == 1) {
  213.             //strclass = "warning";
  214.             //console.log(row);
  215.         }
  216.         return { classes: strclass }
  217.     }
  218. });
  219.  
  220. /**
  221.  * 功能：创建虚拟组(dsh)
  222.  */
  223. function searchChildren(keyword, children){
  224.     if(children == null || children.length == 0){
  225.         return false;
  226.     }
  227.     for(var i = 0; i < children.length; i++){
  228.         var node = children[i];
  229.         if(node.name.indexOf(keyword) != -1 && node.isHidden === false){
  230.             return true;
  231.         }
  232.         var result = searchChildren(keyword, node.children);
  233.         if(result){
  234.             return true;
  235.         }
  236.     }
  237.     return false;
  238. }
  239.  
  240. function searchParent(keyword, node){
  241.     if(node == null){
  242.         return false;
  243.     }
  244.     if(node.name.indexOf(keyword) != -1 && node.isHidden === false){
  245.         return true;
  246.     }
  247.     return searchParent(keyword, node.getParentNode());
  248. }
  249.  
  250. var hiddenNodesForAddVirtualGroupUsers = [];
  251.  
  252. function autoMatchForAddVirtualGroupUsers(){
  253.     setTimeout(function(){
  254.         var ztreeObj = $.fn.zTree.getZTreeObj("add-virtual-group-modal-users-tree");
  255.        
  256.         ztreeObj.showNodes(hiddenNodesForAddVirtualGroupUsers);
  257.  
  258.         function filterFunc(node){
  259.             var keyword = $("#add-virtual-group-modal-users-input").val();
  260.  
  261.             if(searchParent(keyword, node) || searchChildren(keyword, node.children)){
  262.                 return false;
  263.             }
  264.             return true;
  265.         };
  266.  
  267.         hiddenNodesForAddVirtualGroupUsers = ztreeObj.getNodesByFilter(filterFunc);
  268.  
  269.         ztreeObj.hideNodes(hiddenNodesForAddVirtualGroupUsers);
  270.  
  271.     }, 300);
  272. }
  273.  
  274. function initTreeForAddVirtualGroupUsers(){
  275.     $.fn.zTree.init($("#add-virtual-group-modal-users-tree"), settingForAddVirtualGroupUsers, zNodes);
  276. }
  277.  
  278. var zNodes = [
  279.              { "id":0, "pId":-1, "name":"根主机组", "isParenta": true, "open": true, "icon":"/secret-hollow/static/img/computers.png"},
  280.              { "id":1, "pId":0, "name":"主机组1", "isParenta": true, "open": true, "icon":"/secret-hollow/static/img/computers.png"},
  281.              { "id":2, "pId":0, "name":"主机组2", "isParenta": true, "open": true, "icon":"/secret-hollow/static/img/computers.png"},
  282.              { "id":6, "pId":1, "name":"主机1", "open": true, "icon":"/secret-hollow/static/img/computer.png"},
  283.              { "id":7, "pId":1, "name":"主机2", "open": true, "icon":"/secret-hollow/static/img/computer.png"},
  284.              { "id":3, "pId":0, "name":"主机组3", "isParenta": true, "open": true, "icon":"/secret-hollow/static/img/computers.png"},
  285.              { "id":4, "pId":0, "name":"主机组4", "isParenta": true, "open": true, "icon":"/secret-hollow/static/img/computers.png"},
  286.              { "id":5, "pId":0, "name":"主机组5", "isParenta": true, "open": true, "icon":"/secret-hollow/static/img/computers.png"}
  287.            ]
  288.  
  289. var settingForAddVirtualGroupUsers = {
  290.         check : {
  291.             enable : true,
  292.             chkboxType : {
  293.                 "Y" : "ps",
  294.                 "N" : "ps"
  295.             }
  296.         },
  297.         view : {
  298.             dblClickExpand : false
  299.         },
  300.         data: {
  301.             simpleData : {
  302.                 enable : true,
  303.                 idKey : "id",
  304.                 pIdKey : "pId",
  305.                 rootPId : null
  306.             }
  307.         },
  308.         callback: {
  309.                 beforeClick : function(treeId, treeNode) {
  310.                     var zTree = $.fn.zTree.getZTreeObj("add-virtual-group-modal-users-tree");
  311.                     zTree.checkNode(treeNode, !treeNode.checked, null, true);
  312.                     return true;
  313.                 },
  314.                 onCheck : function(e, treeId, treeNode) {
  315.  
  316.                 }
  317.         }
  318. };
  319.  
  320. // 点击添加按钮
  321. $("#add-virtual-group-modal-users-add-button").click(function(){
  322. 	 // 获取树对象
  323.      var ztreeObj  = $.fn.zTree.getZTreeObj("add-virtual-group-modal-users-tree");
  324.      // 选择的节点
  325.      var selectedNodes = ztreeObj.getCheckedNodes(true);
  326.      console.log(selectedNodes);
  327.      var len = selectedNodes.length;
  328.      // 表格中节点集合
  329.      var nodesArrForTable = [];
  330.      // 用于删除的节点集合
  331.      var nodesArrForRemove = [];
  332.      for(var i = 0; i < len; i++){
  333.     	 // 将叶子节点添加进集合
  334.          if(!selectedNodes[i].isParenta){
  335.              nodesArrForTable.push({id: selectedNodes[i].id, name: selectedNodes[i].name});
  336.              nodesArrForRemove.push(selectedNodes[i]);
  337.          }
  338.      }
  339.      if(nodesArrForTable.length == 0){
  340.          toastr.error("当前没有选择任何用户", "错误提示");
  341.          return false;
  342.      }
  343.      // 删除节点
  344.      for (var i=0; i < nodesArrForRemove.length; i++) {
  345.     	 ztreeObj.removeNode(nodesArrForRemove[i]);
  346.      }
  347.      // 表格中插入节点
  348.      $addVirtualGroupModalUsersTable.bootstrapTable('prepend', nodesArrForTable);
  349. })
  350.  
  351. // 点击删除按钮
  352. $("#add-virtual-group-modal-users-delete-button").click(function(){
  353.     var checkedUsers = $addVirtualGroupModalUsersTable.bootstrapTable('getSelections');
  354.     var checkedUsersUidArr = [];
  355.     if($addVirtualGroupModalUsersTable.bootstrapTable('getData').length == 0){
  356.         toastr.error("当前没有要移除的用户", "错误提示");
  357.         return false;
  358.     }
  359.     if(checkedUsers.length == 0){
  360.          toastr.error("请选择要移除的用户", "错误提示");
  361.          return false;
  362.     }
  363.     for(var i = 0; i < checkedUsers.length; i++){
  364.         checkedUsersUidArr.push(checkedUsers[i].id);
  365.     }
  366.     $addVirtualGroupModalUsersTable.bootstrapTable('remove', {
  367.         field: 'id', values: checkedUsersUidArr
  368.     });
  369.    
  370.     var userNodesForAdd = [];
  371.     for(var i = 0; i < checkedUsersUidArr.length; i++){
  372.         for(var j = 0; j < allNodes.length; j++){
  373.             if(checkedUsersUidArr[i] == allNodes[j].id){
  374.             	userNodesForAdd.push(allNodes[j]);
  375.             }
  376.         }
  377.     }
  378.    
  379.     console.log("allNodes");
  380.     console.log(allNodes);
  381.    
  382. 	var ztreeObj  = $.fn.zTree.getZTreeObj("add-virtual-group-modal-users-tree");
  383. 	nowNodes = ztreeObj.transformToArray(ztreeObj.getNodes());
  384. 	for(var i = 0; i<nowNodes.length; i++){
  385. 		if('children' in nowNodes[i]){
  386. 			delete nowNodes[i].children;
  387. 		}
  388. 	}
  389.  
  390. 	$.fn.zTree.init($("#add-virtual-group-modal-users-tree"), settingForAddVirtualGroupUsers, nowNodes.concat(userNodesForAdd));
  391. })
  392. </script>
  393. </body>
  394. </html>

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

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

  

闽ICP备14008679号