借着空闲,跟大家分享一下,如何操作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; } }