刚接触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=">" οnclick="javascript:movetoright();" class="button2" title="右移">
</p>
<!--
<p align="center">
<input type="button" name="button" value=">" οnclick="javascript:selectMove(document.forms[0].fh_js_left,document.forms[0].yxfh_js);" class="button2" title="右移">
</p>
<p align="center">
<input type="button" name="button" value="<" οnclick="javascript:selectMove(document.forms[0].yxfh_js,document.forms[0].fh_js_left,'右');" class="button2" title="左移">
</p>-->
<p align="center">
<input type="button" name="button" value="<" οnclick="javascript:delSelected();" class="button2" title="左移">
</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>