ExtTree之右键菜单增删改及拖拽同步数据库

ExtTree之右键菜单增删改及拖拽同步数据库

单凭一个ExtTree也要学习ExtJs是好多开发人员常说的话，的确，Ext对树的支持非常的好，并且展现起来非常美观。下面我就来通过代码介绍下我学习过程中关于ExtTree各方面的知识

代码如下：

Java代码
<SPAN style="FONT-SIZE: medium">

Ext.onReady(function() {

Ext.BLANK_IMAGE_URL = 'extjs3.1/resources/images/default/s.gif';

var Tree = Ext.tree;




// 定义根节点的Loader

var treeloader = new Tree.TreeLoader( {

dataUrl : "display.action?nodeId='A1'"

});

// 个人感觉上面这一步后面带的参数好像几乎没有起到作用，因为每次根节点第一次加载传数据时总是传递的是下面的



var treepanel = new Tree.TreePanel( {

// renderTo:"tree_div",//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。

el : 'tree_div', // 填充区域 ，后面的这个值是HTML页面上设置的DIV元素

rootVisible : true, // 设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性

border : true, // 有边框

animate : true, // 动画效果

autoScroll : true, // 自动滚动

enableDD : true, // 拖拽节点

containerScroll : true,

// root:rotnode, //两种设置root节点的方法，

// 一种配置root，另一种就是setRootNode S

loader : treeloader,

useArrows : true,

checkModel : 'cascade', // 对树的级联多选

onlyLeafCheckable : false

// 对树所有结点都可选




// 一般来说treeloader都是加载第一次的请求路径，只不过跟没有动态加载数据的

// 形如：loader: new Tree.TreeLoader({

// dataUrl:'http://localhost:8080/Struts2JsonExtJsTree/menus.action'

// })

// 上面的那个因为它是异步加载数据所以是这样写的loader:new

// Tree.TreeLoader({dataUrl:"menus.action?id='A1'"});

});

// 异步加载根节点

var rootnode = new Tree.AsyncTreeNode( { // 这个根节点是整棵树的根节点，你必须手动写上他的名称

id : 'workArea',

text : '工区管理',

draggable : false

// 这个表示我的根节点是否可以拖拽，默认跟写FALSE一样都是以不可拖拽的

});

// 设置根节点 ,设置之后当然要放到tree中去了

treepanel.setRootNode(rootnode);




// 响应事件，传递node参数 .这个响应我个人认为是你点击某个节点时就出发一个请求，这个请求传回来的数据导致你打开了下一级节点

// /响应事件，传递node参数 也就是说每一次加载树之前都要通过'beforeload'事件加载子节点

treepanel.on('beforeload', function(node) {

treepanel.loader.dataUrl = 'display.action?id=' + node.id; // 定义子节点的Loader

});




// Ext Tree demo里面，使用movenode : ( Tree tree, Node node, Node oldParent,

// Node newParent, Number index )

// 来响应节点的拖动操作，在Ext.tree.TreePanel的定义中，加入如下代码，响应拖动操作

// 在拖动的时候，主要通过发送ajax请求，到后台，进行数据的同步修改．（这一步非常重要）

treepanel.on('movenode',function(tree,node,oldParent,newParent,index){

Ext.Ajax.request({

url:'move.action',

params:{

nodeId:node.id,

oldParentId:oldParent.id,

newParentId:newParent.id,

index:index

}

});

});

/*

* 设置tree的节点放置函数此函数有一个很重要的参数对象e e对象有三个重要的属性，分别为dropNode,target,point

* 1.dropNode为在拖动时鼠标抓住的节点 2.target为将要放置在某处的节点

* 3.point为被放置的状态，分别有append表示添加，above节点的上方，below节点的下方。

*/

// treepanel.on('nodedrop', function(e) {

// if(e.point=='append'){

// Ext.Ajax.request({

// url:'node.action',

// params:{

// nodeId:e.dropNode.id,

// oldParentId:e.parentNode.id,

// newParentId:e.target.id

// }

// });

// }

// var msg;

// if (e.point == 'append') {

// msg = '当前"【' + e.dropNode.text + '】"被放到目录"【' + e.target.text

// + '】"下！';

// // alert('当前"【' + e.dropNode.text + '】"被放到目录"【' + e.target.text

// // + '】"下！');

// // var resultUrl =

// // "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append";

// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",

// // resultUrl, null, null);

// } else if (e.point == 'above') {

// // alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text

// // + '"上面！');

// msg = '当前"' + e.dropNode.text + '"放在了"' + e.target.text

// + '"上面！';

// // var resultUrl =

// // "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above";

// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",

// // resultUrl, null, null);

//

// } else if (e.point == 'below') {

// // alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text

// // + '"下面！');

// msg = '当前"' + e.dropNode.text + '"放在了"' + e.target.text

// + '"下面！';

// // var resultUrl =

// // "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below";

// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",

// // resultUrl, null, null);

// }

//

// // var viewPanel = Ext.getCmp('tree-window-view');

// // // 得到选中的节点

// // win.setTitle('消息提示');

// // win.show();

// // var tmpTpl = new Ext.Template(msg);

// // tmpTpl.overwrite(viewPanel.body);

// Ext.Msg.alert("消息提示", msg);

//

// });

treepanel.render(); // 这个tree当然要呈现出来喽

rootnode.expand();// 这个控制出来的节点是否全部都展开,这行代码是可以决定是否出来图像的，所以这个位置最佳了




// 定义右键菜单

var contextMenu = new Ext.menu.Menu( {

items : [ {

text : '添加子节点',

handler : addHandler

}, {

text : '添加兄弟点',

handler : addBrotherHandler

}, {

text : '删除',

handler : deleteHandler

}, {

text : '重命名',

handler : modifyHandler

}, {

text : '查看',

handler : viewHandler

} ]

});

// var treeSorter = new Ext.tree.TreeSorter(treepanel, {

// folderSort : true, //文件排序

// dir : 'asc' //升序, 这样如果排序的话，我的同级目录可能移动的时候就不起租

// });

var treeEditor = new Ext.tree.TreeEditor(treepanel, {// 树形编辑器

allowBlank : false, // 允许出现空白

cancelOnEsc : true,// 按下ESC建自动取消空白

selectOnFocus : true

});

// 弹出窗口

var win = new Ext.Window( {

maskDisabled : false,

id : 'tree-window',

modal : true,// 是否为模式窗口

constrain : true,// 窗口只能在viewport指定的范围

closable : true,// 窗口是否可以关闭

closeAction : 'hide',

layout : 'fit',

width : 300,

height : 200,

plain : true,

items : [ {

id : 'tree-window-view',

border : false

} ]

});



treepanel.on('contextmenu', treeContextHandler);

// 拖拽后

treepanel.on('beforemovenode', function(tree, node, oldParent,

newParent, index) {

// alert(tree + '-' + node + '-' + oldParent + '-' + newParent + '-'

// + index);

// TODO 存储入库的操作

});

// 拖拽判断，用于处理叶节目不能append的问题

treepanel.on('nodedragover', function(e) {

var n = e.target;

if (n.leaf) {

n.leaf = false;

}

return true;

});




// treeEditor.on('complete', function(o, newText, oldText) {

// alert('执行我啊，编辑器处理玩了');

// Ext.Ajax.request({

// url:'addchildnode.action',

// params:{

// newname:newText,

// nodeId:currentId,

// oldname:oldValue

// }

// });

// },this,true);

var pid;

var flag;

treeEditor.on("complete", function(treeEditor){

alert(treeEditor.editNode.text);

var ppid=pid==null?treeEditor.editNode.id:pid;

var fflag=flag==null?'modify':flag;

Ext.Ajax.request({

url:"addnode.action",

params:{

newname:treeEditor.editNode.text,

sign:fflag,

nodeId:ppid//这个是要新增节点的那个节点的Id,过去就是新的节点的父亲ID

}

});

});




// 绑定节点右键菜单功能

function treeContextHandler(node, event) {

event.preventDefault();//一说是组织浏览器的默认右键事件，二说是防止两次出现右键画面（怎么可能出现两次）

node.select();//选中右键单击的节点,有了它才有了希望

contextMenu.show(node.ui.getAnchor());

this.createrightClick(node).showAt(event.getXY());//在你右键单击的地方出现

}

// 插入子节点

function addHandler() {

var newNode = new Ext.tree.TreeNode( {

text : '新建节点'

});

var selectedNode = treepanel.getSelectionModel().getSelectedNode();

pid=selectedNode.id;

flag='add';

selectedNode.leaf = false;

selectedNode.expand(false, true, function() {

// 注意，应该先由expand展开非叶子节点，才能为之插入子节点，否则会出错

selectedNode.appendChild(newNode);

treepanel.getSelectionModel().select(newNode);

setTimeout(function() {

treeEditor.editNode = newNode;

treeEditor.startEdit(newNode.ui.textNode);

}, 10);



});

}

function addBrotherHandler() {

var newNode = new Ext.tree.TreeNode( {

text : '新建节点'

});

var selectedNode = treepanel.getSelectionModel().getSelectedNode();

var selectedParentNode = selectedNode.parentNode;

pid=selectedParentNode.id;

flag='add';

if (selectedParentNode == null) {

selectedNode.appendChild(newNode);

} else {

selectedParentNode.insertBefore(newNode, selectedNode);

}

setTimeout(function() {

treeEditor.editNode = newNode;

treeEditor.startEdit(newNode.ui.textNode);

}, 10);

}

function deleteHandler() {

var nodeid=treepanel.getSelectionModel().getSelectedNode().id;

var pnodeid=treepanel.getSelectionModel().getSelectedNode().parentNode.id;

//document.location.href="deletenode.action?nodeId="+nodeid+"&oldParentId="+pnodeid;

alert(nodeid+"==="+pnodeid);

Ext.Ajax.request({

url:'deletenode.action',

params:{

nodeId:nodeid,

oldParentId:pnodeid

}

});

treepanel.getSelectionModel().getSelectedNode().remove();



}

function modifyHandler() {

var selectedNode = treepanel.getSelectionModel().getSelectedNode();// 得到选中的节点

pid=selectedNode.id;

flag='modify';

treeEditor.editNode = selectedNode;

treeEditor.startEdit(selectedNode.ui.textNode);

}

function viewHandler() {

var viewPanel = Ext.getCmp('tree-window-view');

var selectedNode = treepanel.getSelectionModel().getSelectedNode();

// 得到选中的节点

var tmpid = selectedNode.attributes.id;

var tmpname = selectedNode.attributes.text;

var tmpdes = selectedNode.attributes.description;

var tmphref = selectedNode.attributes.href;




win.setTitle(tmpname + '的介绍');

win.show();




var dataObj = {

id : tmpid,

name : tmpname,

des : tmpdes,

href : tmphref

}

var tmpTpl = new Ext.Template(

['<div style="margin:10px"><div style="margin:10px">编号:{id}</div>',

'<div style="margin:10px">名称:{name}</div>',

'<div style="margin:10px">描述:{des}</div>',

'<div style="margin:10px">链接:{href}</div></div></div>' ]);

tmpTpl.overwrite(viewPanel.body, dataObj);

}

// function myEditor(editor, newValue, oldValue) {

//

Ext.Ajax.request({

url:'addchildnode.action',

params:{

newname:newValue,

nodeId:currentId,

}

});

// }







});

</SPAN>



Ext.onReady(function() {

Ext.BLANK_IMAGE_URL = 'extjs3.1/resources/images/default/s.gif';

var Tree = Ext.tree;


// 定义根节点的Loader

var treeloader = new Tree.TreeLoader( {

dataUrl : "display.action?nodeId='A1'"

});

// 个人感觉上面这一步后面带的参数好像几乎没有起到作用，因为每次根节点第一次加载传数据时总是传递的是下面的


var treepanel = new Tree.TreePanel( {

// renderTo:"tree_div",//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。

el : 'tree_div', // 填充区域 ，后面的这个值是HTML页面上设置的DIV元素

rootVisible : true, // 设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性

border : true, // 有边框

animate : true, // 动画效果

autoScroll : true, // 自动滚动

enableDD : true, // 拖拽节点

containerScroll : true,

// root:rotnode, //两种设置root节点的方法，

// 一种配置root，另一种就是setRootNode S

loader : treeloader,

useArrows : true,

checkModel : 'cascade', // 对树的级联多选

onlyLeafCheckable : false

// 对树所有结点都可选


// 一般来说treeloader都是加载第一次的请求路径，只不过跟没有动态加载数据的

// 形如：loader: new Tree.TreeLoader({

// dataUrl:'http://localhost:8080/Struts2JsonExtJsTree/menus.action'

// })

// 上面的那个因为它是异步加载数据所以是这样写的loader:new

// Tree.TreeLoader({dataUrl:"menus.action?id='A1'"});

});

// 异步加载根节点

var rootnode = new Tree.AsyncTreeNode( { // 这个根节点是整棵树的根节点，你必须手动写上他的名称

id : 'workArea',

text : '工区管理',

draggable : false

// 这个表示我的根节点是否可以拖拽，默认跟写FALSE一样都是以不可拖拽的

});

// 设置根节点 ,设置之后当然要放到tree中去了

treepanel.setRootNode(rootnode);


// 响应事件，传递node参数 .这个响应我个人认为是你点击某个节点时就出发一个请求，这个请求传回来的数据导致你打开了下一级节点

// /响应事件，传递node参数 也就是说每一次加载树之前都要通过'beforeload'事件加载子节点

treepanel.on('beforeload', function(node) {

treepanel.loader.dataUrl = 'display.action?id=' + node.id; // 定义子节点的Loader

});


// Ext Tree demo里面，使用movenode : ( Tree tree, Node node, Node oldParent,

// Node newParent, Number index )

// 来响应节点的拖动操作，在Ext.tree.TreePanel的定义中，加入如下代码，响应拖动操作

// 在拖动的时候，主要通过发送ajax请求，到后台，进行数据的同步修改．（这一步非常重要）

treepanel.on('movenode',function(tree,node,oldParent,newParent,index){

Ext.Ajax.request({

url:'move.action',

params:{

nodeId:node.id,

oldParentId:oldParent.id,

newParentId:newParent.id,

index:index

}

});

});

/*

* 设置tree的节点放置函数此函数有一个很重要的参数对象e e对象有三个重要的属性，分别为dropNode,target,point

* 1.dropNode为在拖动时鼠标抓住的节点 2.target为将要放置在某处的节点

* 3.point为被放置的状态，分别有append表示添加，above节点的上方，below节点的下方。

*/

// treepanel.on('nodedrop', function(e) {

// if(e.point=='append'){

// Ext.Ajax.request({

// url:'node.action',

// params:{

// nodeId:e.dropNode.id,

// oldParentId:e.parentNode.id,

// newParentId:e.target.id

// }

// });

// }

// var msg;

// if (e.point == 'append') {

// msg = '当前"【' + e.dropNode.text + '】"被放到目录"【' + e.target.text

// + '】"下！';

// // alert('当前"【' + e.dropNode.text + '】"被放到目录"【' + e.target.text

// // + '】"下！');

// // var resultUrl =

// // "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append";

// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",

// // resultUrl, null, null);

// } else if (e.point == 'above') {

// // alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text

// // + '"上面！');

// msg = '当前"' + e.dropNode.text + '"放在了"' + e.target.text

// + '"上面！';

// // var resultUrl =

// // "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above";

// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",

// // resultUrl, null, null);

//

// } else if (e.point == 'below') {

// // alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text

// // + '"下面！');

// msg = '当前"' + e.dropNode.text + '"放在了"' + e.target.text

// + '"下面！';

// // var resultUrl =

// // "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below";

// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",

// // resultUrl, null, null);

// }

//

// // var viewPanel = Ext.getCmp('tree-window-view');

// // // 得到选中的节点

// // win.setTitle('消息提示');

// // win.show();

// // var tmpTpl = new Ext.Template(msg);

// // tmpTpl.overwrite(viewPanel.body);

// Ext.Msg.alert("消息提示", msg);

//

// });

treepanel.render(); // 这个tree当然要呈现出来喽

rootnode.expand();// 这个控制出来的节点是否全部都展开,这行代码是可以决定是否出来图像的，所以这个位置最佳了


// 定义右键菜单

var contextMenu = new Ext.menu.Menu( {

items : [ {

text : '添加子节点',

handler : addHandler

}, {

text : '添加兄弟点',

handler : addBrotherHandler

}, {

text : '删除',

handler : deleteHandler

}, {

text : '重命名',

handler : modifyHandler

}, {

text : '查看',

handler : viewHandler

} ]

});

// var treeSorter = new Ext.tree.TreeSorter(treepanel, {

// folderSort : true, //文件排序

// dir : 'asc' //升序, 这样如果排序的话，我的同级目录可能移动的时候就不起租

// });

var treeEditor = new Ext.tree.TreeEditor(treepanel, {// 树形编辑器

allowBlank : false, // 允许出现空白

cancelOnEsc : true,// 按下ESC建自动取消空白

selectOnFocus : true

});

// 弹出窗口

var win = new Ext.Window( {

maskDisabled : false,

id : 'tree-window',

modal : true,// 是否为模式窗口

constrain : true,// 窗口只能在viewport指定的范围

closable : true,// 窗口是否可以关闭

closeAction : 'hide',

layout : 'fit',

width : 300,

height : 200,

plain : true,

items : [ {

id : 'tree-window-view',

border : false

} ]

});



treepanel.on('contextmenu', treeContextHandler);

// 拖拽后

treepanel.on('beforemovenode', function(tree, node, oldParent,

newParent, index) {

// alert(tree + '-' + node + '-' + oldParent + '-' + newParent + '-'

// + index);

// TODO 存储入库的操作

});

// 拖拽判断，用于处理叶节目不能append的问题

treepanel.on('nodedragover', function(e) {

var n = e.target;

if (n.leaf) {

n.leaf = false;

}

return true;

});


// treeEditor.on('complete', function(o, newText, oldText) {

// alert('执行我啊，编辑器处理玩了');

// Ext.Ajax.request({

// url:'addchildnode.action',

// params:{

// newname:newText,

// nodeId:currentId,

// oldname:oldValue

// }

// });

// },this,true);

var pid;

var flag;

treeEditor.on("complete", function(treeEditor){

alert(treeEditor.editNode.text);

var ppid=pid==null?treeEditor.editNode.id:pid;

var fflag=flag==null?'modify':flag;

Ext.Ajax.request({

url:"addnode.action",

params:{

newname:treeEditor.editNode.text,

sign:fflag,

nodeId:ppid//这个是要新增节点的那个节点的Id,过去就是新的节点的父亲ID

}

});

});


// 绑定节点右键菜单功能

function treeContextHandler(node, event) {

event.preventDefault();//一说是组织浏览器的默认右键事件，二说是防止两次出现右键画面（怎么可能出现两次）

node.select();//选中右键单击的节点,有了它才有了希望

contextMenu.show(node.ui.getAnchor());

this.createrightClick(node).showAt(event.getXY());//在你右键单击的地方出现

}

// 插入子节点

function addHandler() {

var newNode = new Ext.tree.TreeNode( {

text : '新建节点'

});

var selectedNode = treepanel.getSelectionModel().getSelectedNode();

pid=selectedNode.id;

flag='add';

selectedNode.leaf = false;

selectedNode.expand(false, true, function() {

// 注意，应该先由expand展开非叶子节点，才能为之插入子节点，否则会出错

selectedNode.appendChild(newNode);

treepanel.getSelectionModel().select(newNode);

setTimeout(function() {

treeEditor.editNode = newNode;

treeEditor.startEdit(newNode.ui.textNode);

}, 10);


});

}

function addBrotherHandler() {

var newNode = new Ext.tree.TreeNode( {

text : '新建节点'

});

var selectedNode = treepanel.getSelectionModel().getSelectedNode();

var selectedParentNode = selectedNode.parentNode;

pid=selectedParentNode.id;

flag='add';

if (selectedParentNode == null) {

selectedNode.appendChild(newNode);

} else {

selectedParentNode.insertBefore(newNode, selectedNode);

}

setTimeout(function() {

treeEditor.editNode = newNode;

treeEditor.startEdit(newNode.ui.textNode);

}, 10);

}

function deleteHandler() {

var nodeid=treepanel.getSelectionModel().getSelectedNode().id;

var pnodeid=treepanel.getSelectionModel().getSelectedNode().parentNode.id;

//document.location.href="deletenode.action?nodeId="+nodeid+"&oldParentId="+pnodeid;

alert(nodeid+"==="+pnodeid);

Ext.Ajax.request({

url:'deletenode.action',

params:{

nodeId:nodeid,

oldParentId:pnodeid

}

});

treepanel.getSelectionModel().getSelectedNode().remove();


}

function modifyHandler() {

var selectedNode = treepanel.getSelectionModel().getSelectedNode();// 得到选中的节点

pid=selectedNode.id;

flag='modify';

treeEditor.editNode = selectedNode;

treeEditor.startEdit(selectedNode.ui.textNode);

}

function viewHandler() {

var viewPanel = Ext.getCmp('tree-window-view');

var selectedNode = treepanel.getSelectionModel().getSelectedNode();

// 得到选中的节点

var tmpid = selectedNode.attributes.id;

var tmpname = selectedNode.attributes.text;

var tmpdes = selectedNode.attributes.description;

var tmphref = selectedNode.attributes.href;


win.setTitle(tmpname + '的介绍');

win.show();


var dataObj = {

id : tmpid,

name : tmpname,

des : tmpdes,

href : tmphref

}

var tmpTpl = new Ext.Template(

['<div style="margin:10px"><div style="margin:10px">编号:{id}</div>',

'<div style="margin:10px">名称:{name}</div>',

'<div style="margin:10px">描述:{des}</div>',

'<div style="margin:10px">链接:{href}</div></div></div>' ]);

tmpTpl.overwrite(viewPanel.body, dataObj);

}

// function myEditor(editor, newValue, oldValue) {

//

Ext.Ajax.request({

url:'addchildnode.action',

params:{

newname:newValue,

nodeId:currentId,

}

});

// }


});



后续说明，Ext中所有几乎涉及到与数据库有关又不知道改怎么办的时候，就在触发事件的处理方法中写上
Java代码
<SPAN style="FONT-SIZE: medium">Ext.Ajax.request({

url:"addnode.action",

params:{

newname:treeEditor.editNode.text,

sign:fflag,

nodeId:ppid//这个是要新增节点的那个节点的Id,过去就是新的节点的父亲ID

}

});

</SPAN>

Ext.Ajax.request({

url:"addnode.action",

params:{

newname:treeEditor.editNode.text,

sign:fflag,

nodeId:ppid//这个是要新增节点的那个节点的Id,过去就是新的节点的父亲ID

}

});


这样的异步请求在Ext中随处可以用到，至于后台处理代码我就不贴了，大家应该也都知道，无非是接受参数，查询数据后

以JSON格式的数据传递回来即可当然JSON数据格式必须为：[{name:'张三'},{age:34},{sex:'男'}]这样数据形式的JSON数据，希望我的树代码能对大家起到一些作用，虽然有点乱，好多注释掉的代码也是有用的，大家可以取消注释试试看效果