在一个页面上同步多个 jstree移动和删除操作

原创 tiangr  2017-01-07 14:25  阅读 236 次

jsTree 是一款实现了树形菜单的JavaScript插件,这款功能强大的插件除了支持增加、删除和修改节点,还能引入插件,实现右键点击菜单和鼠标拖拽的功能。最近在开发时有一个有趣的需求,在一个页面上同步多个 jstree 实例的移动和删除操作。

基本思路是利用jstree的move_node 和delete_node的 操作及事件触发API 进行循环操作。

先从简单的删除节点同步操作开始:
新建多个jstree实例,

  1. <div id="jstree_div_1">
  2. </div>
  3. <div id="jstree_div_2">
  4. </div>
  5. <div id="jstree_div_3">
  6. </div>

实例化jstree,这里注意新增节点的ID构造方式为jstree标识id + '_' + 唯一ID,唯一ID在不同的jstree之间要保持一致,这样才能确定操作的节点为同一个。

  1. var jsTrees = ['1', '2', '3'];     // 不同jstree实例标识
  2. var eventTargets = [];          // 存储执行触发事件的实例,用来终结触发事件引发的递归。
  3. for(var i in jsTrees) {
  4.    var id = jsTrees[i];            // 实例化jstree
  5.    $('#jstree_div_' + id).jstree({
  6.     plugins: ["contextmenu""dnd""state""types"],
  7.     types : {
  8.       "default" : {
  9.         "icon" : "fa fa-folder"
  10.       },
  11.       "category" : {
  12.         "icon" : "fa fa-tags"
  13.       },
  14.       "product" : {
  15.         "icon" : "fa fa-product-hunt"
  16.       },
  17.       "information_category" : {
  18.         "icon" : "fa fa-folder-open"
  19.       },
  20.       "information" : {
  21.         "icon" : "fa fa-file-text"
  22.       },
  23.       "download_category" : {
  24.         "icon" : "fa fa-download"
  25.       },
  26.       "download" : {
  27.         "icon" : "fa fa-arrow-circle-down"
  28.       },
  29.       "link" : {
  30.         "icon" : "fa fa-link"
  31.       },
  32.     },
  33.     contextmenu: {
  34.       items: function(node) {
  35.         var items = {
  36.           deleteItem: {
  37.             label: '删除',
  38.             action: function(obj) {
  39.               var tree = $('#jstree_div_' + id).jstree(true);
  40.               tree.delete_node(node);
  41.             }
  42.           }
  43.         };
  44.         return items;
  45.       }
  46.     },
  47.     core: {
  48.       data: [],
  49.       check_callback: function (operation, node, node_parent, node_position, more) {
  50.           // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
  51.           // in case of 'rename_node' node_position is filled with the new node name
  52.           return operation === 'copy_node' ? false : true;   // 禁止复制节点
  53.       }
  54.     }
  55.   });
  56.   // 监听移动和删除节点事件
  57.   $('#jstree_div_' + id).on('move_node.jstree', moveNodeTrigger);
  58.   $('#jstree_div_' + id).on('delete_node.jstree', delNodeTrigger);
  59. }

执行删除节点时的函数,

  1. function delNodeTrigger(e, data) {
  2.   if(eventTargets.length == 0) {
  3.     var node = data.node.id.split('_').splice(1, 1).join("");
  4.     var current_id = data.node.id.split('_').splice(0, 1).join("");
  5.     for(var i=0; i<jsTrees.length; i++) {
  6.       if(jsTrees[i] != current_id) {
  7.         var nod = jsTrees[i] + "_" + node;
  8.         eventTargets.push(jsTrees[i]);
  9.         $('#jstree_div_' + jsTrees[i]).jstree(true).delete_node(nod);
  10.       }
  11.       if(i == jsTrees.length - 1) {   // 最后一次循环
  12.         eventTargets = [];                // 重新置空目标事件数组
  13.       }
  14.     }
  15.   }
  16. }

同步执行移动节点时需要注意三个问题,一个是节点的父元素位置为根时,parent应为'#'号,一个是当元素下移时,move_node 的pos参数应该增加1,最后注意你的pos参数应该转化为数字类型。

  1. function moveNodeTrigger(e, data) {
  2.   // console.log(data.node, eventTargets, data);
  3.   if(eventTargets.length == 0) {
  4.     var node = data.node.id.split('_').splice(1, 1).join("");
  5.     var parent = data.parent == '#' ? '#' : data.parent.split('_').splice(1, 1).join("");
  6.     var position = data.position;
  7.     var old_position = data.old_position;
  8.     var current_id = data.node.id.split('_').splice(0, 1).join("");
  9.     for(var i=0; i<jsTrees.length; i++) {
  10.       if(jsTrees[i] != current_id) {
  11.         // console.log('current_id:', current_id);
  12.         // console.log('parent:', parent);
  13.         // console.log('移动节点:', '#jstree_div_' + jsTrees[i]);
  14.         var nod = jsTrees[i] + "_" + node;
  15.         var par = parent == '#' ? '#' : jsTrees[i] + "_" + parent;
  16.         if(old_position<position) {     //下移
  17.           var pos = parseInt(position) + 1;
  18.         } else {                                         //上移
  19.           var pos = parseInt(position);
  20.         }
  21.         // console.log('移动方式:', nod, par, pos);
  22.         $('#jstree_div_' + jsTrees[i]).jstree(true).move_node(nod, par, pos, function() {
  23.           eventTargets.push(jsTrees[i]);
  24.         });
  25.       }
  26.       if(i == jsTrees.length - 1) {   // 最后一次循环
  27.         // console.log("最后一次循环!");
  28.         eventTargets = [];               // 重新置空目标事件数组
  29.       }
  30.     }
  31.   }
  32. }

 

特别提示:本站资源全部免费下载,因服务器需经费维护,文中部分外链点击后会进入广告,请耐心等待5秒即可跳过广告进入目标页面。如遇页面外链打不开或下载地址失效,您可以在评论中指出错误,或扫描页面底部二维码。
本文地址:http://www.tiangr.com/yi-ge-ye-mian-shang-tong-bu-duo-ge-jstree-yi-dong-cao-zuo.html
版权声明:本文为原创文章,版权归 tiangr 所有,欢迎分享本文,转载请保留出处!

发表评论


表情