easyUI中Tree实现级联移动

刚接触easyUI,且代码没有优化,勿喷

<script type="text/javascript">

var data=[{
            "id": 1,
            "text": "市工商局",
            "children": [{
                "id": 11,
                "text": "市工商局管理员"
            }, {
                "id": 12,
                "text": "工商行政管理局1分局",
                "children": [{
                    "id": 121,
                    "text": "7"
                }, {
                    "id": 122,
                    "text": "6"
                }]
            },{
                "id": 13,
                "text": "市工商行政管理局西2分局",
                "children": [{
                    "id": 131,
                    "text": "5"
                }, {
                    "id": 132,
                    "text": "4"
                }]
            },{
                "id": 14,
                "text": "市工商行政管理局重要商品市场管理分局",
                "children": [{
                    "id": 141,
                    "text": "3"
                }]
            }]
        },{
        "id": 2,
            "text": "市XX局", 
            "children": [{
                "id": 21,
                "text": "XX局管理员"
            },{
                "id": 22,
                "text": "XX税务局",
                "children": [{
                    "id": 221,
                    "text": "cxj"
                }, {
                    "id": 222,
                    "text": "rg"
                }]
            }]
        }];


$(function(){
$("#tree1").tree({
                data: data,
                checkbox: true
            });
$("#tree2").tree({
                checkbox: true
            });
})
//获取节点的级别 
$.extend($.fn.tree.methods, {  
   getLevel:function(jq,target){ 
   var l = $(target).parentsUntil("ul.tree","ul"); 
    return l.length+1;  
   } 
}); 
//判断tree2中是否存在要移动的节点 
$.extend($.fn.tree.methods, {  
   isOnly:function(jq,id){ 
  var f = $('#tree2').tree('find',id)==null?true:false;
  return f;
   } 
}); 
//判断tree2是否为空 
$.extend($.fn.tree.methods, {  
   isnull:function(jq){ 
  var f = $('#tree2').tree('getRoots').length == 0 ? true:false;
  return f;
   } 
}); 

//将左侧选中复制到右侧框中 
function movetoright(){//两个选择框选项之间的全部移动
var nodes = $('#tree1').tree('getChecked'); //获取所有已选节点 
if(nodes.length == 0){
$.messager.alert('提示信息','请选择要移动的人员!');
return false;
}
            for (var i = 0; i < nodes.length; i++) {
            var lv1 =  $().tree("getLevel",nodes[i].target);
            //当已选节点中为根节点时
              if(lv1 == 1){
              var t2rnodes = $('#tree2').tree('getRoots'); // 获取tree2所有根节点
              if($().tree("isnull")){//如果tree2为空,则新建tree
              $("#tree2").tree({
               data: [{
                id:nodes[i].id,
                text:nodes[i].text
               }]
           });
              }else {//不为空则追加根节点
              if($().tree("isOnly",nodes[i].id)){
           $('#tree2').tree('insert', {
after: t2rnodes[t2rnodes.length-1].target,
data: {
id:nodes[i].id,
                text:nodes[i].text
}
});
              }else{//节点已存在就跳过,下面不执行 
              continue;
              }
              }
             
           var t2rootnode = $('#tree2').tree('find', nodes[i].id);//得到对应的tree2中的根节点
           var cnodes = $('#tree1').tree('getChildren',nodes[i].target);//得到改根节点下的所有子节点 
           for(var j = 0; j < cnodes.length; j++){
            var lv2 = $().tree("getLevel",cnodes[j].target);
            var ccnodes = '';  //叶子节点 
           if(lv2==2){
            ccnodes = $('#tree1').tree('getChildren',cnodes[j].target);//得到对应父节点下的子节点 (叶子节点)
            $('#tree2').tree('append', {//将第二级节点插入根节点 
parent: t2rootnode.target,
data: [{
                id:cnodes[j].id,
                text:cnodes[j].text
               }]
           });
           var t2panode = $('#tree2').tree('find', cnodes[j].id);//得到对应的tree2中的父节点
           $('#tree2').tree('append', {//将叶子节点插入第二级父节点 
parent: t2panode.target,
data: ccnodes
           });
           
           }
           }
              }
              //当已选节点为第二级别节点时 
              if(lv1==2){
              if(!$().tree("isOnly",nodes[i].id)){//如果该二级节点已经存在就跳过 
              continue;
              }else{
              var crootnode = $('#tree1').tree('getParent', nodes[i].target);//tree1中第二节点对应的根节点 
              var c2rootnode = '';
              if($().tree("isnull")){//tree2为空 ,新建tree2
              $("#tree2").tree({
               data: [{
                id:crootnode.id,
                text:crootnode.text
               }]
           });
           c2rootnode = $('#tree2').tree('find', crootnode.id);//得到对应的tree2中的根节点
           $('#tree2').tree('append', {//将第二级节点插入根节点 
parent: c2rootnode.target,
data: [{
                id:nodes[i].id,
                text:nodes[i].text
               }]
           });
           var t2panode = $('#tree2').tree('find', nodes[i].id);//得到对应的tree2中的父节点
           var ccnodes = $('#tree1').tree('getChildren',nodes[i].target);
           $('#tree2').tree('append', {//将叶子节点插入第二级父节点 
parent: t2panode.target,
data: ccnodes
           });
           
              }else{//tree2不为空 
              if(!$().tree("isOnly",crootnode.id)){//如果tree2中对应根节点已经存在 
              c2rootnode = $('#tree2').tree('find', crootnode.id);//得到对应的tree2中的根节点
              $('#tree2').tree('append', {//将第二级节点插入根节点 
parent: c2rootnode.target,
data: [{
                id:nodes[i].id,
                text:nodes[i].text
               }]
           });
           var t2panode = $('#tree2').tree('find', nodes[i].id);//得到对应的tree2中的父节点
           var ccnodes = $('#tree1').tree('getChildren',nodes[i].target);
           $('#tree2').tree('append', {//将叶子节点插入第二级父节点 
parent: t2panode.target,
data: ccnodes
           });
              }else{//如果tree2中对应根节点不存在 
              c2roots = $('#tree2').tree('getRoots');//获取tree2中所有根节点 
              $('#tree2').tree('insert', {
after: c2roots[c2roots.length-1].target,
data: {
id:crootnode.id,
                text:crootnode.text
}
}); 
var c2root = $('#tree2').tree('find', crootnode.id);//得到对应的tree2中的根节点
$('#tree2').tree('append', {//将第二级节点插入根节点  
parent: c2root.target,
data: [{
                id:nodes[i].id,
                text:nodes[i].text
               }]
           });
           var c2pa = $('#tree2').tree('find', nodes[i].id);//得到对应的tree2中的父节点
           ccnodes = $('#tree1').tree('getChildren',nodes[i].target);
           $('#tree2').tree('append', {//将第二级节点插入根节点  
parent: c2pa.target,
data: ccnodes
           });
              }
              }
             
              }
              }
             
              
              //当已选节点为叶子节点时
              if(lv1==3){
              if(!$().tree("isOnly",nodes[i].id)){//如果该叶子节点已经存在就跳过 
              continue;
              }else{
              var t1node = $('#tree1').tree('getParent', nodes[i].target);//在tree1中获取对应父节点 
  var t2node = $('#tree2').tree('find',t1node.id);//得到tree2中的父节点
              if(t2node != null){//如果tree2中存在对应的该叶子节点的父节点,就直接添加 
              $('#tree2').tree('append', {//将叶子节点插入第二级父节点 
parent: t2node.target,
data: [{
                id:nodes[i].id,
                text:nodes[i].text
               }]
           });
              }else{
              var t1root = $('#tree1').tree('getParent', t1node.target);//在tree1中获取根节点 
              var t2root = $('#tree2').tree('find',t1root.id);//得到tree2中的根节点 
              if(t2root != null){//如果tree2中存在根节点,则将父节点插入 
              $('#tree2').tree('append', {
parent: t2root.target,
data: [{
                id:t1node.id,
                text:t1node.text
               }]
           });
           t2node = $('#tree2').tree('find',t1node.id);
           $('#tree2').tree('append', {//将叶子节点插入第二级父节点 
parent: t2node.target,
data: [{
                id:nodes[i].id,
                text:nodes[i].text
               }]
           });
              }else{//如果tree2中不存在对应根节点 
              var c2roots = $('#tree2').tree('getRoots');//得到对应的tree2中的根节点
              if(c2roots.length == 0){//如果tree2为空 
              $("#tree2").tree({
               data: [{
                id:t1root.id,
                text:t1root.text
               }]
           });
           t2root = $('#tree2').tree('find',t1root.id);//得到tree2中的根节点 
           $('#tree2').tree('append', {
parent: t2root.target,
data: [{
                id:t1node.id,
                text:t1node.text
               }]
           });
           t2node = $('#tree2').tree('find',t1node.id);
           $('#tree2').tree('append', {//将叶子节点插入第二级父节点 
parent: t2node.target,
data: [{
                id:nodes[i].id,
                text:nodes[i].text
               }]
           });
              }else{//tree2不为空 
              //插入根节点 
              $('#tree2').tree('insert', {
after: c2roots[c2roots.length-1].target,
data: {
id:t1root.id,
                text:t1root.text
}
}); 
//插入父节点
t2root = $('#tree2').tree('find',t1root.id);//得到tree2中的根节点  
$('#tree2').tree('append', {
parent: t2root.target,
data: [{
                id:t1node.id,
                text:t1node.text
               }]
           });
           //插入叶子节点 
           t2node = $('#tree2').tree('find',t1node.id);//得到tree2中对应父节点 
           $('#tree2').tree('append', {//将叶子节点插入第二级父节点 
parent: t2node.target,
data: [{
                id:nodes[i].id,
                text:nodes[i].text
               }]
           });
              }
             
              }
              }
             
              }
              }
             
             
             
}



var nodes2 = $('#tree2').tree('getChecked'); //获取tree2所有已选节点 
if(nodes2.length>0){
for(var l=0;l<nodes2.length;l++){
$('#tree2').tree('uncheck',nodes2[l].target);//保证tree2中所有节点不被选中 
}
}
}

//删除右侧选中节点 
function delSelected(){
var nodes = $('#tree2').tree('getChecked'); //获取tree2所有已选节点 
if(nodes.length == 0){
$.messager.alert('提示信息','请选择要撤销的人员!');
return false;
}
for(var i=0;i<nodes.length;i++){
var node2 = $("#tree2").tree('find',nodes[i].id);
if(node2 != null){//如果tree2中存在该节点就删除 
$('#tree2').tree('remove',nodes[i].target);
}
}
}

</script>
  </head>
  
  <body>
  <form method="post" id="form1"> 
    <div class="divwxfh" style="width: 850px">
  <table style="margin-top: 0px;margin-left: 0px;text-align: center;overflow-x: hidden; border: 1; width: 800px;">
  <tr>
  <td align="left">
  <span style=" color:#ff0000; height:28px; line-height:28px; font-size:14px; font-family:'宋体'; cursor:pointer;">通讯录</span><br>
  <div id="js_left" style="width:380px;height:450px;border:1px solid #ccc">
  <ul id="tree1" class="easyui-tree">
 
  </ul>
  </div>
  <br>
<p align="center"></p>
</td>
  <td align="left">
  <p align="center">
   <input type="button" name="button" value="&gt;" οnclick="javascript:movetoright();" class="button2" title="右移">&nbsp;&nbsp;&nbsp;&nbsp;
</p>
<!--
<p align="center">
   <input type="button" name="button" value="&gt;" οnclick="javascript:selectMove(document.forms[0].fh_js_left,document.forms[0].yxfh_js);" class="button2" title="右移">&nbsp;&nbsp;&nbsp;&nbsp;
</p>
<p align="center">
  <input type="button" name="button" value="&lt;" οnclick="javascript:selectMove(document.forms[0].yxfh_js,document.forms[0].fh_js_left,'右');" class="button2" title="左移">&nbsp;&nbsp;&nbsp;&nbsp;
</p>-->
<p align="center">
   <input type="button" name="button" value="&lt;" οnclick="javascript:delSelected();" class="button2" title="左移">&nbsp;&nbsp;&nbsp;&nbsp;
</p>
  </td>
   
  <td align="left">
  <span style=" color:#ff0000; height:28px; line-height:28px; font-size:14px; font-family:'宋体'; cursor:pointer;">已选择</span><br>
  <div id="js_right" style="width:380px;height:450px;border:1px solid #ccc">
  <ul id="tree2" class="easyui-tree"></ul>
  </div>
  <br>
  <p align="center"></p>
  </td>
  </tr>
  </table>
  </div>
   <form method="post" id="form1">  
  </body>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值