借着空闲,跟大家分享一下,如何操作extjs3.0的treepanel,实现增删改查

以下是页面的代码:

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<html>
	<head>
		<title>用户组管理</title>
		<link rel="stylesheet" type="text/css"
			href="style/ext/resources/css/ext-all.css" />
		<link rel="stylesheet" type="text/css" href="style/ext/forum.css" />
		<link href="style/style.css" rel="stylesheet" type="text/css">
		<link rel="stylesheet" type="text/css" href="style/main.css" />
		<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="js/ext/ext-all.js"></script>
		<script type="text/javascript" src="js/ext/ext-lang-zh_CN.js"></script>
		<script type="text/javascript" src="js/public/treeDialog.js"></script>
	</head>
	<script type="text/javascript">

	   /*
		 * 这里很有必要对方法中的node.text和node.id进行一下说明,text和id都是在后台定义的,因为
		 * TreePanel要求后台返回给前台的是一个[{节点对象1},{节点对象2}...],而每一个节点类型就是一个树对象
		 * */
		Ext.onReady(function() {
			Ext.QuickTips.init();
			var Tree = Ext.tree;
			var win;
			var userclsTree = new Tree.TreePanel( {
				id : 'userclsTree',
				el : 'tree_div',  
				baseCls : 'y-panel',
				width : 300,
				height : 600,
				autoScroll : true,
				animate : false,
				rootVisible : true,
				enableDD : false,
				containerScroll : false,
				loader : new Tree.TreeLoader( {
					dataUrl : 'usercls.do?action=showUserclsTree'//请求页,接收的数据格式为:[{节点对象1},{节点对象2}]
					})
			});
			var rootID = 'root';
			var ThisSiteName = " - 用户组";
			var root = new Tree.AsyncTreeNode(
					{
						text : ThisSiteName,
						draggable : false,
						cls : 'root',
						icon : 'http://www.cnblogs.com/http://www.cnblogs.com/Scripts/ext-2.3.0/resources/images/list-items.gif',
						id : rootID
					});
			userclsTree.on('contextmenu', function(node, event) {
				event.preventDefault(); //屏蔽默认右键菜单
					node.select();
					rightClick.showAt(event.getXY());
				});
			var rightClick = new Ext.menu.Menu( {//增加新的右键菜单功能
				id : 'rightClickCount',
				items : [ {
					text : '添加',
					icon : '/style/ext/images/add.gif',  //指定图片的路径
					handler : page_input                 //点击触发的事件
				}, {
					text : '编辑',
					icon : '/style/ext/images/edit.gif',//指定图片的路径
					handler : page_update               //点击触发的事件
				}, {
					text : '删除',
					icon : '/style/ext/images/delete.gif',//指定图片的路径
					handler : onDeleteItemClick           //点击触发的事件
				} ]
			});

			function onDeleteItemClick() {
				var node = userclsTree.getSelectionModel().getSelectedNode(); //获取选中节点
				var text = node.text;  //选中节点的文本值
				var msg = "确定要删除【" + text + "】节点吗?";
				if (confirm(msg)) {
					Ext.Ajax.request( {
						url : '/usercls.do?action=deleteUserCls',
						params : {
							ids : node.id   //node.id指选中数的id
						},
						success : function(response, options) {
							var results = Ext.util.JSON
									.decode(response.responseText);
							switch (results.msg) {
							case "true":
								userclsTree.root.reload();
								break;
							case "false":
								alert("对不起,删除【" + text + "】出错,请稍候再试!");
								break;
							}
						}
					});
				}
			}
				/**
				 * 
				 * @param {Object} response
				 * @param {Object} options
				 * 由于ajax方法是异步调用,所以对数据和窗体的操作要放到success方法里面,赋值也是一样的
				 * 在success方法里面赋的值在success方法外面是不起作用的
				 */
			function page_update()//更新数据操作
			{
				var node = userclsTree.getSelectionModel().getSelectedNode();
				Ext.Ajax
						.request( {
							url : 'usercls.do?action=findUserCls',
							method : 'post',
							params : {
								id : node.id
							},
							success : function(response, options) {
								var results = Ext.util.JSON
										.decode(response.responseText);
								var entity = results.model;

								userclsid = entity.userclsid;
								name = entity.name;
								supperid = entity.supperid;
								type = entity.type;
								remark = entity.remark;

								var typeCbo = new Ext.form.ComboBox( {//用户状态
											id : 'type',
											name : 'type',
											emptyText : '',
											mode : 'local',
											fieldLabel : '用户组类别',
											triggerAction : 'all',
											valueField : 'type',
											displayField : 'typename',
											allowBlank : false,
											editable : false,
											forceSelection : true,
											readOnly : true,
											width : 220,
											store : new Ext.data.SimpleStore( { //填充的数据
														fields : [ 'type',
																'typename' ],
														data : [
																[ '0', '用户类别' ],
																[ '1', '角色类别' ] ]
													})
										}).setValue(type);

								var userGroupData = new Ext.data.JsonStore( {
									url : "usercls.do?action=findAllUserCls",
									root : "model",
									fields : [ "userclsid", "name" ]
								});
								userGroupData.load( {
									callback : function(records) {
										if (supperid != 0)
											userGroupCbo.setValue(supperid);
										else
											userGroupCbo.setValue("");
									}
								});

								var userGroupCbo = new Ext.form.ComboBox( {//用户组
											id : 'supperid',
											name : 'supperid',
											emptyText : '',
											mode : 'remote',
											fieldLabel : '用户组',
											triggerAction : 'all',
											valueField : 'userclsid',
											displayField : 'name',
											allowBlank : true,
											editable : false,
											forceSelection : true,
											readOnly : true,
											width : 220,
											store : userGroupData
										});

								var updateForm = new Ext.form.FormPanel( {//生成更新的form表单
											id : 'updateForm',
											method : 'POST',
											url : 'usercls.do?method=updateUserCls',
											frame : true,
											bodyStyle : 'padding:5px 5px 0',
											labelWidth : 120,
											height : 300,
											defaultType : 'textfield',
											labelAlign : "right",
											items : [ {
												fieldLabel : '',
												hidden : true,
												id : 'userclsid',
												name : 'userclsid',
												value : userclsid
											}, {
												fieldLabel : '名称',
												id : 'name',
												name : 'name',
												allowBlank : false,
												value : name
											}, userGroupCbo, typeCbo, {
												fieldLabel : '备注',
												xtype : 'textarea',
												id : 'remark',
												name : 'remark',
												width : 220,
												value : remark
											} ],
											buttonAlign : "center",
											buttons : [ {
												text : '保存',
												handler : update_bussystem
											}, {
												text : '取消',
												handler : function() {
													updateWindow.close();
													updateWindow.destroy();
												}
											} ]
										});

								var updateWindow = new Ext.Window( {
									id : 'updateWindow',
									title : '更新用户组信息',
									layout : 'form',
									labelAlign : 'right',
									width : 400,
									border : true,
									height : 350,
									plain : true,
									modal : true,
									items : [ updateForm ]
								});
								updateWindow.show();

							},
							failure : function() {
							}
						});

			}

			function update_bussystem()//更新动作执行
			{
				var czlx = "update";
				var updateWindow = Ext.getCmp("updateWindow");
				var userclsid = Ext.getCmp('userclsid').getValue();//用户id
				var name = Ext.getCmp('name').getValue();//用户名称
				var supperid = Ext.getCmp('supperid').getValue(); //用户编码
				var type = Ext.getCmp('type').getValue(); //用户密码
				var remark = Ext.getCmp('remark').getValue(); //用户类型

				if (updateWindow == '' || updateWindow == undefined) {
					Ext.MessageBox.alert("提示", "获取不到对象");
					return;
				}
				if (trim(name) == '') {
					Ext.MessageBox.alert("提示", "请填写用户组名称");
					return;
				}
				if (trim(supperid) == '') {
					Ext.MessageBox.alert("提示", "请选择上级单位");
					return;
				}
				if (trim(remark) == undefined || trim(remark) == '')
					remark = '';

				Ext.Ajax.request( {
					url : 'usercls.do?action=updateUserCls',
					params : {
						userclsid : userclsid,
						name : name,
						supperid : supperid,
						type : type,
						remark : remark
					},
					success : function(response) {
						Ext.MessageBox.alert('提示', '用户组更新成功!', function() {
							updateWindow.close();
							updateWindow.destroy();
						});
						userclsTree.root.reload();

					},
					failure : function(response) {
						Ext.MessageBox.alert('提示', '用户组更新失败!');
						updateWindow.close();
						updateWindow.destroy();
					}
				});
			}

			function page_input()//执行新增操作
			{
				var node = userclsTree.getSelectionModel().getSelectedNode().id;
				var typeCbo = new Ext.form.ComboBox( {//用户状态
							id : 'type',
							name : 'type',
							emptyText : '',
							mode : 'local',
							fieldLabel : '用户组类别',
							triggerAction : 'all',
							valueField : 'type',
							displayField : 'typename',
							allowBlank : false,
							editable : false,
							forceSelection : true,
							readOnly : true,
							width : 220,
							store : new Ext.data.SimpleStore( { //填充的数据
										fields : [ 'type', 'typename' ],
										data : [ [ '0', '用户类别' ],
												[ '1', '角色类别' ] ]
									})
						});

				var userGroupCbo = new Ext.form.ComboBox( {//用户组
							id : 'supperid',
							name : 'supperid',
							emptyText : '',
							mode : 'remote',
							fieldLabel : '用户组',
							triggerAction : 'all',
							valueField : 'userclsid',
							displayField : 'name',
							allowBlank : true,
							editable : false,
							forceSelection : true,
							readOnly : true,
							width : 220,
							store : new Ext.data.JsonStore( {
								url : "usercls.do?action=findAllUserCls",
								root : "model",
								fields : [ "userclsid", "name" ]
							})
						});

				var inputForm = new Ext.form.FormPanel( {//生成新增的form表单
							id : 'inputForm',
							method : 'POST',
							url : 'usercls.do?action=addUserCls',
							frame : true,
							bodyStyle : 'padding:5px 5px 0',
							labelWidth : 80,
							height : 300,
							defaultType : 'textfield',
							labelAlign : "right",
							items : [ {
								fieldLabel : '名称',
								id : 'name',
								name : 'name',
								allowBlank : false,
								emptyText : '用户组名称'
							}, userGroupCbo, typeCbo, {
								fieldLabel : '备注',
								xtype : 'textarea',
								id : 'remark',
								name : 'remark',
								width : 220,
								emptyText : '备注'
							} ],
							buttonAlign : "center",
							buttons : [ {
								text : '保存',
								handler : save_bussystem
							}, {
								text : '取消',
								handler : function() {
									inputWindow.close();
									inputWindow.destroy();
								}
							} ]
						});
				var inputWindow = new Ext.Window( {//新增窗口打印在页面
							id : 'inputWindow',
							title : '新增用户组',
							layout : 'form',
							labelAlign : 'right',
							width : 400,
							border : true,
							height : 350,
							plain : true,
							modal : true,
							items : [ inputForm ]
						});
				inputWindow.show();
			}

			function save_bussystem()//保存数据动作执行
			{
				var czlx = "save";
				var inputWindow = Ext.getCmp("inputWindow");
				var name = Ext.getCmp('name').getValue();//用户组名称
				var supperid = Ext.getCmp('supperid').getValue(); //用户组上级编码
				var type = Ext.getCmp('type').getValue(); //用户组类型
				var remark = Ext.getCmp('remark').getValue(); //备注

				if (inputWindow == '' || inputWindow == undefined) {
					Ext.MessageBox.alert("提示", "获取不到对象");
					return;
				}
				if (trim(name) == '') {
					Ext.MessageBox.alert("提示", "请填写用户组名称");
					return;
				}
				if (trim(supperid) == '') {
					Ext.MessageBox.alert("提示", "请选择上级单位");
					return;
				}
				if (trim(remark) == undefined || trim(remark) == '')
					remark = '';
				Ext.Ajax.request( {
					url : 'usercls.do?action=saveUserCls',
					params : {
						name : name,
						supperid : supperid,
						type : type,
						remark : remark
					},
					success : function(response) {
						Ext.MessageBox.alert('提示', '新增用户组成功!', function() {
							inputWindow.close();
							inputWindow.destroy();
						});
						userclsTree.root.reload();
					},
					failure : function(response) {
						Ext.MessageBox.alert('提示', '新增用户组失败!');
						inputWindow.close();
						inputWindow.destroy();
					}
				});
			}
			//去左右空格
			function trim(s) {
				return (s.toString()).replace(/\s+/g, "");
			}
			userclsTree.setRootNode(root);
			userclsTree.render();

		});
</script>
	<div id="tree_div"></div>
</html>

以上是页面的代码,注释不算太丰富,但是如果有一点基础的话基本上都能看懂,后台的代码出来查询树的时候需要自己定义一个树的类,其他的应该都不复杂。

下面我将显示树的查询方法在此列一下,顺便也把我定义的树的类列一下,大家可以根据自己的需要做必要修改,不懂的可以给我留言!

-------查询书节点并返回客户端的方法--------

/**
	 * 构造树形展示
	 * 
	 * @param request
	 * @param response
	 * @return
	 * @throws Exception
	 */
	public ModelAndView showUserclsTree(HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		String nodeid = request.getParameter("nodeid");  //支持树节点查询功能
		List userClsList;
		if (null == nodeid || "".equals(nodeid)) {
			userClsList = userClsBPO.findAll();
		} else {
			userClsList = userClsBPO.findChildrenUserCls(nodeid);
		}
		if (userClsList.isEmpty())
			return null;
		List<UserclsTreeDTO> JsonTreeNodeLst = new ArrayList<UserclsTreeDTO>(); // 返回给客户端的节点对象应该是一个树的集合的json数据类型
		boolean isChild;
		for (int i = 0; i < userClsList.size(); i++) {
			UserclsDTO userclsDTO = (UserclsDTO) userClsList.get(i);
			if (userclsDTO.getSupperid() != 0) // 外部循环只循环父节点,然后根据父节点找到对应子节点
				continue;
			UserclsTreeDTO userclsTreeDTO = new UserclsTreeDTO();
			userclsTreeDTO.setId(userclsDTO.getUserclsid().toString());
			userclsTreeDTO.setCls(userclsDTO.getRemark());
			userclsTreeDTO.setExpandable(userclsDTO.getUserclsid() == 1 ? false
					: true);
			userclsTreeDTO.setText(userclsDTO.getName());
			userclsTreeDTO
					.setLeaf(userclsDTO.getSupperid() != 0 ? true : false);
			List children = new ArrayList();
			for (int j = 0; j < userClsList.size(); j++) {// 添加父节点对应的子节点
				UserclsDTO userclsDTOSupper = (UserclsDTO) userClsList.get(j);
				if (userclsDTO.getUserclsid().intValue() == userclsDTOSupper
						.getSupperid().intValue()) {
					UserclsTreeDTO userclsTreeChildDTO = new UserclsTreeDTO();
					userclsTreeChildDTO.setId(userclsDTOSupper.getUserclsid()
							.toString());
					userclsTreeChildDTO.setCls(userclsDTOSupper.getRemark());
					userclsTreeChildDTO.setExpandable(userclsDTOSupper
							.getUserclsid() == 1 ? false : true);
					userclsTreeChildDTO.setText(userclsDTOSupper.getName());
					userclsTreeChildDTO
							.setLeaf(userclsDTOSupper.getSupperid() != 0 ? true
									: false);
					children.add(userclsTreeChildDTO);
				}
			}
			userclsTreeDTO.setChildren(children);
			JsonTreeNodeLst.add(userclsTreeDTO);
		}
		Map jsonMap = new HashMap();
		jsonMap.put("model", JsonTreeNodeLst);
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		out.print(JSONArray.fromObject(JsonTreeNodeLst));
		out.flush();
		out.close();
		return null;
	}

---------自定义的树类----------

package gov.mof.zplatform.ca.cls.dto;

import java.util.List;

/**
 * UserclsTreeDTO entity.
 */

public class UserclsTreeDTO extends gov.mof.zplatform.dto.CommonDTO implements java.io.Serializable
{

	private static final long serialVersionUID = -6423277916315941945L;
	
	private String id;
	private String text;
	private boolean leaf;
	private String cls;
	private List<UserclsTreeDTO> children;
	private boolean expandable;
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public boolean isLeaf() {
		return leaf;
	}
	public void setLeaf(boolean leaf) {
		this.leaf = leaf;
	}
	public String getCls() {
		return cls;
	}
	public void setCls(String cls) {
		this.cls = cls;
	}
	public List<UserclsTreeDTO> getChildren() {
		return children;
	}
	public void setChildren(List<UserclsTreeDTO> children) {
		this.children = children;
	}
	public boolean isExpandable() {
		return expandable;
	}
	public void setExpandable(boolean expandable) {
		this.expandable = expandable;
	}


}

posted on 2011-05-05 11:16  第一印象  阅读(2343)  评论(0编辑  收藏  举报