Easyui Tree 关于树的操作

最新推荐文章于 2023-12-26 18:19:23 发布

转载最新推荐文章于 2023-12-26 18:19:23 发布 · 1.1k 阅读

EasyUI 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种将已选树形结构节点从源树迁移到目标树的方法，并提供了实现这一功能的具体JavaScript代码示例。

场景分析：某些情况下，我们在分配权限或组织结构时，需要从已有的树形结构中选择某些节点，添加到一个空的新树中，用以在新生成的树中展现所选择的树形结构节点。
本代码基本上实现了该种情况，已经过测试，拿出来和大家分享一下，如有更好的做法，欢迎指出，谢谢！

html code:

<ul id="basicTree" class="easyui-tree" style="height:200px;" data-options="url:'data/testTree1_data.json',checkbox:true,lines:true,animate:true"></ul>
<a id="addItemBtn" class="easyui-linkbutton" onclick='addNode("#basicTree","#targetTree");'>添加  >></a><br><br><br>
<ul id="targetTree" class="easyui-tree" style="height:200px;" data-options="checkbox:true,lines:true"></ul>

javascript:

/**
* 扩展方法，获得树的节点等级
*/
$.extend($.fn.tree.methods,{
   getLevel: function(jq, target){
   return $(target).find('span.tree-indent,span.tree-hit').length;
   }
});

/**
* 判断该节点是否是根节点
* @param tree
* @param node
* @returns {Boolean}
*/
function isRoot(tree,node){
   var level = $(tree).tree('getLevel',node.target);
   if(level == 1){
      return true;
   }else{
      return false;
   }
}

/**
* 获得当前节点的根节点(get the root of current node)
* @param tree
* @param node
* @returns
*/
function getRootByCurrentNode(tree,node){
   var level = $(tree).tree('getLevel',node.target);
   if(level == 1){
      return node;
   }else{
      var parentNode = $(tree).tree('getParent',node.target);
      return getRootByCurrentNode(tree,parentNode);
   }
}

/**
* 获得该节点的所有父节点数组(get all parents of current node)
* @param basicTree
* @param node
* @param nodeLevel
* @param nodeparentArry
* @returns
*/
function getParentArry(basicTree,node,nodeLevel,parentArry){
   if(nodeLevel == 1){
      return parentArry;
   }else{
      nodeLevel -= 1;
      var parent = $(basicTree).tree('getParent',node.target);
      parentArry.unshift(parent);
      return getParentArry(basicTree,parent,nodeLevel,parentArry);
   }
}

/**
* 把basicTree中的节点添加到targetTree中(append the checked nodes of basicTree to targetTree)
* @param basicTree
* @param targetTree
* @returns
*/
function addNode(basicTree,targetTree){
   var ckNodes = $(basicTree).tree('getChecked');
   for(var i = 0; i < ckNodes.length; i++){

      var nodeLevel = $(basicTree).tree('getLevel',ckNodes .target);
      var nodeData = $(basicTree).tree('getData',ckNodes.target);
      var root = getRootByCurrentNode(basicTree,ckNodes);

      if(!$(targetTree).tree('find',ckNodes.id)){
         var parentArry = new Array();
         parentArry = 　getParentArry(basicTree,ckNodes,nodeLevel,parentArry);
         if(parentArry.length == 0){//所选节点为根节点
            $(targetTree).tree('append',{
               data:[nodeData]
            });
         }else{
            for(var j = 0; j < parentArry.length; j++){//添加该节点的所有父节点
               if(!$(targetTree).tree('find',parentArry[j].id)){
                  if(root.id == parentArry[j].id){
                     $(targetTree).tree('append',{
                        data:[{
                           id:parentArry[j].id,
                           text:parentArry[j].text
                        }]
                     });
                  }else{
                     var parentNode = $(targetTree).tree('find',parentArry[j-1].id);
                     $(targetTree).tree('append',{
                        parent:(parentNode?parentNode.target:null),
                        data:[{
                           id:parentArry[j].id,
                           text:parentArry[j].text
                        }]
                     });
                  }
               }
            }
            var parentNode = $(targetTree).tree('find',parentArry[parentArry.length-1].id);
            $(targetTree).tree('append',{
               parent:(parentNode?parentNode.target:null),
               data:[nodeData]
            });
         }
      }
   }
}

 
   关于树的操作_转载连接：
   http://www.jeasyui.com/forum/index.php?topic=1047.0