Ext树的相关操作

功能简介：（1）采用Ext2.2开发的；（2）支持数据三层操作；（3）支持右键菜单项；（4）节点增删改查操作；

数据库表的设计为表A（id,type,text)，表B(id,fid,text)，表A为根节点一级菜单与二级菜单数据项，其中type用于判别类型，fid为表B的外键，即A中的id，其实两张表也可以合为一张表，方法是利用type进行控制。

表A数据参考：

(1,0,'根节点');

(2,1,'二级菜单1');

(3,1,'二级菜单2');

... ...

 

表B数据参考：

(1,2,'三级菜单1');

(2,2,'三级菜单2');

(3,3,'三级菜单3');

...  ...

 

以下是Javascript代码实现

/***Ext树相关控件定义开始***/
/***定义树的节点***/
var treeRoot = new Ext.tree.AsyncTreeNode({
			id:'root',
			treeid : '1',//根节点在数据库表中对应的ID
			text : "根节点名称",
			expanded : true,
			expandable : true,
			draggable : false
		});
/***定义树的数据项加载器***/
var treeLoader = new Ext.tree.TreeLoader({
			url : '',//获取一级菜单数据项URL，输出JSON格式数据
			baseParams : {
				parentId : '0'
			},
			listeners : {
				beforeload : function(tree, node) {
					var treeid = node.attributes.treeid;
					//根据treeid获取第二层与第三层的数据项
					if (treeid == '1') {
						tree.url = '';//获取二级菜单数据项URL，输出JSON格式数据
						tree.baseParams.parentId = treeid;
					} else {
						tree.url = '';//获取二级菜单下对应三级菜单数据项URL，输出JSON格式
						tree.baseParams.parentId = treeid;
					}
				}
			}
		});
var treeMenu;//定义右键菜单
/***定义树的面板***/
var treePanel = tree = new Ext.tree.TreePanel({
	root : treeRoot,
	loader : treeLoader,
	width : 220,
	height : 340,
	autoScroll :true,
	contextMenu : treeMenu,
	listeners : {
		click : function(node, e) {
			if (node.isLeaf()) {
				//当前节点是叶子节点时触发
			}
		},
		//定义右键菜单
		contextmenu : function(node, e) {
			//当节点为根节点时
			if (node.parentNode == null) {
				node.select();//当前节点被选中
				treeMenu = new Ext.menu.Menu({
					items : [{
						text : "添加二级菜单项",
						iconCls : 'leaf',
						handler : function() {
							Ext.MessageBox.prompt('请输入二级菜单名称', "", function(e,
									text) {
								if (e == "ok") {
									Ext.Ajax.request({
										//添加二级菜单的URL
										url : '',
										params : {
											czdw : text,
											dwlb : node.attributes.treeid,
											gdjdm: wp.gdjdm
										},
										method : 'post',
										sync : true,
										success : function(res) {
											//请求返回成功后在前天添加相应节点
											var jsonObj = eval("(" + res.responseText + ")");											
											var tempNode = new Ext.tree.TreeNode({
												treeid : jsonObj.treeid,
												text :jsonObj.text,
												expandable : true,
												draggable : false,
												dw:true//节点自定义属性，可根据需要添加，主要为判断加载菜单项
											});
											//注册右键菜单
											tempNode.on('contextmenu',function(node,e){
												node.select();
												treeMenu.showAt(e.getPoint());		
											});
											node.appendChild(tempNode);
											try{
												tempNode.select();//定位到新节点	
											}catch(e){}
										},
										failure : function() {
											Ext.Msg.alert('提示消息','操作失败！');
										}
									});
								} 
							})
						}
					}]
				});
				
				treeMenu.showAt(e.getPoint());//显示菜单位置
			} else if (node.attributes.dw == true) {//当前为二级菜单节点时,即二层节点
				node.select();
				treeMenu = new Ext.menu.Menu({
					items : [{
						text : "添加三级菜单",
						iconCls : 'leaf',
						handler : function() {
							Ext.MessageBox.prompt("请输入三级菜单名称", "", function(e,
											text) {
										if (e == "ok") {
											Ext.Ajax.request({
														//三级菜单添加URL
														url : '',
														params : {
															mid : node.attributes.treeid,
															ryxm : text,
															gdjdm : wp.gdjdm
														},
														success : function(res) {
															//前台添加相应节点
															var jsonObj = eval("(" + res.responseText + ")");											
															var tempNode = new Ext.tree.TreeNode({
																treeid : jsonObj.treeid,
																text :jsonObj.text,
																expanded : false,
																expandable : false,
																draggable : false,
																ry:true//和dw属性类似，用于判断当前为第几级菜单
															});
															node.appendChild(tempNode);
															tempNode.on('contextmenu',function(node,e){
																node.select();
																treeMenu.showAt(e.getPoint());		
															});
															node.attributes.leaf=false;
															node.attributes.leaf.iconCls='';
															node.getUI().getIconEl().src='../../../ext/resources/images/default/tree/folder.gif';//修改父节点图标
															node.expand();	
															//定位到新节点	
															try{
																tempNode.select();
															}catch(e){}
														},
														failure : function() {
															Ext.Msg.alert('提示消息','操作失败！');
														}
													});
										}
									})
						}
					}, {
						text : "编辑二级菜单",
						iconCls : 'leaf',
						handler : function() {
							var nodeText = node.attributes.text;
							Ext.MessageBox.prompt("请输入二级菜单新名称", nodeText, function(e,
											text) {
										if (e == "ok") {
											Ext.Ajax.request({
														url : '',//二级菜单更新URL
														params : {
															id : node.attributes.treeid,
															czdw : text
														},
														success : function(request) {
															node.setText(text);
															Ext.Msg.alert('提示消息','编辑成功！');
														},
														failure : function() {
															Ext.Msg.alert('提示消息','操作失败！');
														}
													});
										}
									})
						}
					}, {
						text : '删除二级菜单项',
						iconCls : 'leaf',
						handler : function() {
							Ext.Ajax.request({
								url : '',
								params : {
									id : node.attributes.treeid
								},
								success : function(request) {
										
										if(node.hasChildNodes()){
											var nodes = node.childNodes;
											for(var i=0;i<nodes.length;i++){
												nodes[i].remove();
											}
										}
										node.remove();
										//Ext.Msg.alert('提示消息','删除成功！');
								},
								failure : function() {
										Ext.Msg.alert('提示消息','操作失败！');
								}
							});
						}
					}]
				});
				treeMenu.showAt(e.getPoint());
			} else if ( node.attributes.ry == true) {//当前节点为三级菜单项时,即三层节点
				node.select();
				treeMenu = new Ext.menu.Menu({
							items : [{
						text : "编辑三级菜单项",
						iconCls : 'leaf',
						handler : function() {
							var nodeText = node.attributes.text;
							Ext.MessageBox.prompt("请输入三级菜单新名称", nodeText, function(e,
											text) {
										if (e == "ok") {
											Ext.Ajax.request({
														url : '',//更新三级菜单数据项URL
														params : {
															id : node.attributes.treeid,
															ryxm : text
														},
														success : function(request) {	
															node.setText(text);
														},
														failure : function() {
															Ext.Msg.alert('提示消息','操作失败！');
														}
													});
										}
									})
						}
					}, {
						text : '删除三级菜单项',
						iconCls : 'leaf',
						handler : function() {
							
							Ext.Ajax.request({
								url : '',//删除三级菜单的URL
								params : {
									id : node.attributes.treeid
								},
								success : function(request) {
									node.remove();	
									//Ext.Msg.alert('提示消息','删除成功！');
								},
								failure : function() {
										Ext.Msg.alert('提示消息','操作失败！');
								}
							});
						}
					}]
						});
				treeMenu.showAt(e.getPoint());
			}
		}
	}
});
//var treeEditor = new Ext.tree.TreeEditor(treePanel);
var treeWin;
/***树相关控件定义结束***/

/***
 * 获取树界面
 */
function getUnitsManageTreeWin() {
	if (!treeWin) {
		treeWin = new Ext.Window({
					title : "Ext树",
					width : 240,
					height : 370,
					items : [treePanel],
					closeAction : 'hide'
				});
	}
	treeWin.show();
}