ExtTree之右键菜单增删改及拖拽同步数据库
单凭一个ExtTree也要学习ExtJs是好多开发人员常说的话，的确，Ext对树的支持非常的好，并且展现起来非常美观。下面我就来通过代码介绍下我学习过程中关于ExtTree各方面的知识
代码如下：
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¤RootId="+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¤RootId="+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¤RootId="+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中所有几乎涉及到与数据库有关又不知道改怎么办的时候，就在触发事件的处理方法中写上
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数据，希望我的树代码能对大家起到一些作用，虽然有点乱，好多注释掉的代码也是有用的，大家可以取消注释试试看效果