本文介绍如何使用ExtJS3.0的TreePanel组件实现用户组管理功能，包括增删改查等操作，并提供了完整的页面代码示例及后台查询方法。
借着空闲，跟大家分享一下，如何操作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;
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
