当时遇到如下问题:
拖拽A tree 的a节点到B tree ,a节点可以顺利地被添加到了B tree中,我的问题是如何此时还让a 节点留在在A tree中,而不是彻底给了B tree。
这里做一下当时的一种解决方法,或许不是最好的方法 (大概思路是退拽完 往回追加所拖拽的node)
当时ext使用版本 3.3
首先 使tree的node具有clone方法
代码如下:
Ext.override(Ext.tree.TreeNode, {
clone: function() {
var atts = this.attributes;
if(this.childrenRendered || this.loaded || !this.attributes.children) {
var clone = new Ext.tree.TreeNode(Ext.apply({}, atts));
}
else {
var newAtts = Ext.apply({}, atts);
newAtts.children = this.cloneUnrenderedChildren();
var clone = new Ext.tree.AsyncTreeNode(newAtts);
}
clone.text = this.text;
for(var i=0; i<this.childNodes.length; i++){
clone.appendChild(this.childNodes[i].clone());
}
return clone;
},
cloneUnrenderedChildren: function() {
unrenderedClone = function(n) {
if(n.children)
{
for(var j=0; j<n.children.length; j++) {
n.children[j] = unrenderedClone(n.children[j]);
}
}
return n;
};
var c = [];
for(var i=0; i<this.attributes.children.length; i++) {
c[i] = Ext.apply({}, this.attributes.children[i]);
c[i] = unrenderedClone(c[i]);
}
return c;
}
});
下面造2个树 :
第1个树
// yui-ext tree
var tree = new Tree.TreePanel({
animate:true,
autoScroll:true,
loader: new Tree.TreeLoader(),
enableDD:true,
containerScroll: true,
border: false,
width: 250,
height: 300,
dropConfig: {appendOnly:true}
});
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false, // disable root node dragging
id:'src',
children: [
{text: '节点1',id:"node_1",leaf: true},
{text: '节点2',id:"node_2",leaf: false,children: [
{text: '节点21',id:"node_21",leaf: true},
{text: '节点22',id:"node_22",leaf: true}
]}
]
});
tree.setRootNode(root);
tree.render('tree');
root.expand(true, true);
第2个树:
// ExtJS tree
var tree2 = new Tree.TreePanel({
animate:true,
autoScroll:true,
rootVisible: false,
loader: new Ext.tree.TreeLoader(),
containerScroll: true,
border: false,
width: 250,
height: 300,
enableDrop :true,
dropConfig: {appendOnly:true,allowParentInsert:false},
listeners:{
"contextmenu":function(node,e){
var menu = new Ext.menu.Menu([
{text:"上移",iconCls:'up',handler:function(){
var nodeUp = new Ext.tree.TreeNode(Ext.apply({}, node.attributes));;
var previousNode = node.previousSibling;
var pNode = node.parentNode;
node.remove();
pNode.insertBefore(nodeUp,previousNode);
}
},
{text:"下移",iconCls:'down',handler:function(){
var nodeUp = new Ext.tree.TreeNode(Ext.apply({}, node.nextSibling.attributes));;
var previousNode = node.previousSibling;
var pNode = node.parentNode;
node.nextSibling.remove();
pNode.insertBefore(nodeUp,node);
}
},
{text:"删除",iconCls:'right_delete',handler:function(){
node.parentNode.removeChild(node);
}
},
{text:"重命名",iconCls:'right_rename',menu:new Ext.menu.Menu({
items: [
new Ext.form.FormPanel({
title: '输入',
frame: true,
defaultType: 'textfield',
labelWidth: 30,
width:190,
items: [{
fieldLabel: '名称',
name: 'name'
}],
buttons: [{
text: '确认',
//scope:this,
handler:function(){
var s = this.findParentByType("form").form.findField("name").getValue();
node.setText(s);
menu.hide();
}
}, {
text: '取消',handler:function(){
menu.hide();
}
}]
})
]
})
}
]);
if(!node.previousSibling){
menu.items.item(0).disable();
}
if(!node.nextSibling){
menu.items.item(1).disable();
}
menu.showAt(e.getPoint());
}
}//监听结束
});
// add the root node
var root2 = new Tree.AsyncTreeNode({
text: 'Extensions',
draggable:false,
id:'ux',
children: [
{text: '节点3',id:"node_3",zyid:"node_3",leaf: false,children: [
{text: '节点22',id:"node_22",zyid:"node_22",leaf: true}
]},
{text: '节点4',id:"node_4",zyid:"node_4",leaf: false,children: [
{text: '节点21',id:"node_2",zyid:"node_21",leaf: true}
]}
]
});
tree2.on("beforenodedrop",function(e){
//alert( e.data.node.text );取得拖拽的node
if(e.dropNode.getOwnerTree()==tree){
if(e.data.node.hasChildNodes()){
e.cancel=true;
Ext.Msg.alert('系统提示', '不允许拖拽目录!');
}else{
var isAllowDrag = true;
var parentNode = e.target;
var parentNodeChild = parentNode.childNodes;
for(var i = 0;i<parentNodeChild.length;i++){
if(parentNodeChild[i].attributes.zyid==e.dropNode.id){
isAllowDrag=false;
break;
}
}
if(isAllowDrag==true){
e.cancel=false;
e.dropNode = e.dropNode.clone(); //追加回节点
e.dropNode.attributes.zyid = e.dropNode.id;
e.dropNode.allowChildren=false;
}else{
e.cancel=true;
Ext.Msg.alert('系统提示', '此业务流程已经存在该节点!');
}
}
};
})
tree2.setRootNode(root2);
tree2.render('tree2');
root2.expand(true, true);
自此结束 以上仅是本人的一个做法 或许麻烦 或许有更好的办法