ext树表
如上是效果图：
做成简单的树表：
具体代码如下：
前台jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"%> <%@ include file="/WEB-INF/views/commons/taglibs.jsp"%> <html> <head> <script type="text/javascript"> yepnope({ load:[ "${ctx}/resources/extjs/ux/treegrid/treegrid.css", "${ctx}/resources/extjs/ux/treegrid/TreeGridSorter.js", "${ctx}/resources/extjs/ux/treegrid/TreeGridColumnResizer.js", "${ctx}/resources/extjs/ux/treegrid/TreeGridNodeUI.js", "${ctx}/resources/extjs/ux/treegrid/TreeGridLoader.js", "${ctx}/resources/extjs/ux/treegrid/TreeGridColumns.js", "${ctx}/resources/extjs/ux/treegrid/TreeGrid.js", '${ctx}/resources/extjs/ux/combotree/ComboTree.js', "${ctx}/resources/js/ux/DeptTreePanel.js", "${ctx}/resources/js/user/department/DeptFormPanel.js", "${ctx}/resources/js/user/department/DeptFormWin.js", "${ctx}/resources/js/user/department/DeptTreeGridPanel.js"], complete:function(){ new Ext.basic.DeptTreeGridPanel({ actionJson:${actionJson}, height : index.tabPanel.getInnerHeight() - 1, width : index.tabPanel.getInnerWidth() - 1, id: '${param.id}' + '_panel', renderTo:'${param.id}' }); } }); </script> </head> <body> <div id="${param.id}"></div> </body> </html>
deptTreePanel.js
Ext.ns('Ext.ux');
Ext.ux.DeptTreePanel = Ext.extend(Ext.tree.TreePanel, {
url : null,
userType : null,// 1教职工 2学生
parentId:null,
constructor : function(_config) {
if (_config == null) {
_config = {};
}
Ext.apply(this, _config);
this.userType = this.userType == undefined ? 0 : this.userType
this.deptTreeUrl = ctx+'/dept/getDeptList';
this.queryField = new Ext.form.TextField({
name : 'deptName',
width : 100,
emptyText : '请输入部门名称',
enableKeyEvents : true,
tbar : ['部门名称:', this.queryField]
});
Ext.ux.DeptTreePanel.superclass.constructor.call(this, {
useArrows : true,
autoScroll : true,
style : 'padding:5px;',
root : {
type : 'async',
text : '部门'
},
tbar : ['部门名称:', this.queryField],
loader : new Ext.tree.TreeLoader({
dataUrl : this.deptTreeUrl,
baseParams : {
userType : this.userType,
parentId:this.parentId
}
})
});
this.treeFilter = new Ext.tree.TreeFilter(this, {
clearBlank : true,
autoClear : true
});
// 保存上次隐藏的空节点
var hiddenPkgs = [];
var field = this.queryField;
// 按键后触发事件
field.on('keyup', function(e) {
var text = field.getValue();
// 先要显示上次隐藏掉的节点
Ext.each(hiddenPkgs, function(n) {
n.ui.show();
});
// 如果输入的数据不存在，就执行clear()
if (!text) {
this.treeFilter.clear();
return;
}
this.expandAll();
// 根据输入制作一个正则表达式，'i'代表不区分大小写
var re = new RegExp(Ext.escapeRe(text), 'i');
this.treeFilter.filterBy(function(n) {
// 只过滤叶子节点，这样省去枝干被过滤的时候，底下的叶子都无法显示
return !n.isLeaf() || re.test(n.text);
});
// 如果这个节点不是叶子，而且下面没有子节点，就应该隐藏掉
hiddenPkgs = [];
this.root.cascade(function(n) {
if (!n.isLeaf() && n.ui.ctNode.offsetHeight < 3) {
n.ui.hide();
hiddenPkgs.push(n);
}
});
}, this);
}
});
DeptTreeGridPanel.js
Ext.ns("Ext.basic");
/**
* 部门的GridTree列表
*
* @class Ext.basic.DeptTreePanel
* @extends Ext.ux.tree.TreeGrid
*/
Ext.basic.DeptTreeGridPanel = Ext.extend(Ext.ux.tree.TreeGrid, {
actionJson : null,
constructor : function(_config) {
/** 当前页面的请求路径 */
this.departmentUrl = {
treeLoadUrl : ctx+'/dept/queryListForTree',
insertUrl : ctx+'/dept/insert',
updateUrl : ctx+'dept/update',
deleteUrl : ctx+'dept/delete',
exportUrl : ctx+'dept/generateExcel',
loadRoleUrl : ctx+'role',
loadDeptRoleUrl : ctx+'dept/role'
};
Ext.apply(this, _config || {});
/** 顶部工具栏 */
this.actionToolBar = new Ext.ActionToolbar({
actionPanel : this,
actionJson : this.actionJson,
addFunction : this.showAddWindow,
editFunction : this.showEditWindow,
deleteFunction : this.deleteData
});
this.queryField = new Ext.form.TextField({
name : 'deptName',
enableKeyEvents : true
});
this.actionToolBar.add('-', this.queryField);
this.actionToolBar.add('-', {
text : '闭合节点',
scope : this,
handler : function(btn) {
if (btn.getText() == '闭合节点') {
this.collapseAll();
btn.setText('展开节点');
} else if (btn.getText() == '展开节点') {
this.expandAll();
btn.setText('闭合节点');
}
}
});
Ext.basic.DeptTreeGridPanel.superclass.constructor.call(this, {
columns : [{
header : '部门名称',
dataIndex : 'deptName',
width : 200
}, {
header : '部门编号',
dataIndex : 'deptId',
width : 150
}, {
header : '部门简介',
dataIndex : 'deptComment',
width : 200
}, {
header : '显示顺序',
dataIndex : 'displayIndex',
width : 60
}, {
header : '部门类型',
dataIndex : 'deptType',
renderer : function(v) {
if (v) {
if (v == 1) {
return '普通部门';
} else if (v == '2') {
return '系部';
} else if (v == '3') {
return '班级';
} else {
return v;
}
}
return v;
},
width : 100
}],
// enableSort : false,
dataUrl : this.departmentUrl.treeLoadUrl,
tbar : this.actionToolBar,
listeners : {
'click' : this.enableToolBar,
'dblclick' : this.showDetailWindow,
scope : this
}
});
this.expandAll();
this.treeFilter = new Ext.tree.TreeFilter(this, {
clearBlank : true,
autoClear : true
});
// 保存上次隐藏的空节点
var hiddenPkgs = [];
var field = this.queryField;
// 按键后触发事件
field.on('keyup', function(e) {
var text = field.getValue();
// 先要显示上次隐藏掉的节点
Ext.each(hiddenPkgs, function(n) {
n.ui.show();
});
// 如果输入的数据不存在，就执行clear()
if (!text) {
this.treeFilter.clear();
return;
}
this.expandAll();
// 根据输入制作一个正则表达式，'i'代表不区分大小写
var re = new RegExp(Ext.escapeRe(text), 'i');
this.treeFilter.filterBy(function(n) {
// 只过滤叶子节点，这样省去枝干被过滤的时候，底下的叶子都无法显示
return !n.attributes.leaf
|| re.test(n.attributes.deptName);
});
// 如果这个节点不是叶子，而且下面没有子节点，就应该隐藏掉
hiddenPkgs = [];
this.root.cascade(function(n) {
if (!n.attributes.leaf && n.ui.ctNode.offsetHeight < 3) {
n.ui.hide();
hiddenPkgs.push(n);
}
});
}, this);
},
enableToolBar : function(node) {
if (node) {
this.actionToolBar.enableEditDelete();
} else {
this.actionToolBar.disableEditDelete();
}
node.select();
},
/** 显示新增窗口 */
showAddWindow : function() {
if (this.addWin == null) {
this.addWin = new Ext.basic.DeptFormWin({
saveUrl : this.departmentUrl.insertUrl,
loadRoleUrl : this.departmentUrl.loadRoleUrl,
loadDeptRoleUrl : this.departmentUrl.loadDeptRoleUrl,
rootNode : this.getRootNode()
});
this.addWin.setTitle('新增部门信息');
}
this.addWin.show();
this.addWin.reset();
var node = this.getSelectionModel().getSelectedNode();
if (node) {
var record = new Ext.data.Record({
parent : {
deptId : node.attributes.deptId,
deptName : node.attributes.deptName
}
});
this.addWin.loadRecord(record);
}
},
showEditWindow : function() {
var node = this.getSelectionModel().getSelectedNode();
if (node) {
this.showDetailWindow(node);
} else {
Ext.MessageBox.alert('提示', '你必须选中一个部门！');
}
},
/** 显示详细信息窗口 */
showDetailWindow : function(node) {
var parentNode = node.parentNode;
var parent;
if (parentNode != this.getRootNode()) {
parent = {
deptId : parentNode.attributes.deptId,
deptName : parentNode.attributes.deptName
};
}
var record = new Ext.data.Record({
deptId : node.attributes.deptId,
deptName : node.attributes.deptName,
parent : parent,
deptComment : node.attributes.deptComment,
displayIndex : node.attributes.displayIndex,
deptType : node.attributes.deptType,
leaf : node.attributes.leaf
});
//
if (this.editWin == null) {
this.editWin = new Ext.basic.DeptFormWin({
saveUrl : this.departmentUrl.updateUrl,
loadRoleUrl : this.departmentUrl.loadRoleUrl,
loadDeptRoleUrl : this.departmentUrl.loadDeptRoleUrl,
rootNode : this.getRootNode()
});
this.editWin.setTitle('修改部门信息');
}
this.editWin.show();
this.editWin.reset();
this.editWin.loadRecord(record);
},
/** 删除数据 */
deleteData : function() {
/** 选中的记录 */
var node = this.getSelectionModel().getSelectedNode();
/** 存放id的数组 */
var array = [];
if (node == undefined) {
Ext.MessageBox.show({
title : '警告',
icon : Ext.MessageBox.WARNING,
buttons : Ext.MessageBox.OK,
msg : '请选择要删除的记录'
});
return false;
} else if (node.hasChildNodes()) {
Ext.MessageBox.show({
title : '警告',
icon : Ext.MessageBox.WARNING,
buttons : Ext.MessageBox.OK,
msg : '该部门下还有子部门,不能删除！'
});
return false;
} else {
Ext.MessageBox.confirm('提示', '你确定要删除选中的记录吗？', function(btn) {
if (btn == 'yes') {
Ext.Ajax.request({
url : this.departmentUrl.deleteUrl
+ '/' + node.attributes.deptId,
method : 'post',
success : function(response, options) {
var text = Ext
.decode(response.responseText);
Ext.Msg.alert('提示', text.msg,
function() {
node.parentNode
.removeChild(node);
});
},
failure : function(response, options) {
Ext.MessageBox.alert('提示', '请求失败！');
},
scope : this
});
}
}, this);
}
}
});
DeptFormWin.js
Ext.ns("Ext.basic");
/**
* 部门的窗体
*
* @class Ext.basic.DepartmentFormWin
* @extends Ext.Window
* @author zhangqiang
* @version 1.0 2012-5-7
*/
Ext.basic.DeptFormWin = Ext.extend(Ext.Window, {
/** 保存路径：新增(insertUrl)或修改(updateUrl) */
saveUrl : null,
loadRoleUrl : null,
loadDeptRoleUrl : null,
rootNode : null,
constructor : function(config) {
if (config == null) {
config = {};
}
Ext.apply(this, config);
this.departmentForm = new Ext.basic.DeptFormPanel({
title : '部门信息'
});
/** 角色 */
this.roleSelModel = new Ext.grid.CheckboxSelectionModel();
this.deptRoleIds = new Ext.util.MixedCollection();
this.roleStore = new Ext.data.JsonStore({
root : 'rows',
totalProperty : 'results',
autoLoad : true,
url : this.loadRoleUrl,
fields : ['roleId', 'roleName', 'roleDesc'],
listeners : {
'load' : function(store, records, options) {
// user.roleSelModel.clearSelections();
}
}
});
this.roleGrid = new Ext.grid.GridPanel({
title : '部门角色',
store : this.roleStore,
sm : this.roleSelModel,
autoScroll : 'auto',
loadMask : true,
deferRowRender : false,
stripeRows : true,
// autoExpandColumn :'roleDesc',
bodyStyle : 'padding:0px;border:0px',
columns : [this.roleSelModel, {
hidden : true,
header : '角色ID',
dataIndex : 'roleId'
}, {
header : "角色名称",
width : 200,
dataIndex : 'roleName'
}, {
header : "角色描述",
width : 300,
// id : 'roleDesc',
dataIndex : 'roleDesc'
}],
viewConfig : {
forceFit : true
},
listeners : {
activate : function() {
Share.resetGrid(this.roleGrid);
this.roleGrid.getSelectionModel();// 选择所有行
var total = this.roleStore.getCount();// 数据行数
for (var i = 0; i < total; i++) {
var row = this.roleStore.data.items[i];
if (this.deptRoleIds
.containsKey(row.data.roleId)) {
this.roleSelModel
.selectRow(i, true);
}
}
},
scope : this
}
});
this.tabPanel = new Ext.TabPanel({
activeTab : 0,
items : [this.departmentForm, this.roleGrid]
});
Ext.basic.DeptFormWin.superclass.constructor.call(this, {
title : '部门信息',
width : 400,
height : 300,
layout : 'fit',
style : 'margin:5px;',
closeAction : 'hide',
items : [this.tabPanel],
listeners : {
'show' : function() {
this.tabPanel.setActiveTab(0);
},
scope:this
},
buttons : [{
text : '取消',
scope : this,
handler : function() {
this.hide();
}
}, {
text : '保存',
scope : this,
handler : this.saveDepartment
}]
});
this.roleStore.load({
params : {
start : 0
}
});
},
/** 提交表单数据 */
saveDepartment : function() {
// 保存角色
var selections = this.roleGrid.getSelectionModel()
.getSelections();
var ids = [];
for (var i = 0; i < selections.length; i++) {
ids.push(selections[i].data.roleId);
}
this.departmentForm.getForm().submit({
url : this.saveUrl,
method : 'post',
params : {
roleIds : ids
},
success : function(form, action) {
Ext.MessageBox.alert('提示', action.result.msg);
if (this.rootNode) {
this.rootNode.reload();
}
this.hide();
},
failure : function(form, action) {
Ext.MessageBox.alert('提示', action.result.msg);
},
scope : this
});
},
/** 加载表单数据 */
loadRecord : function(record) {
this.departmentForm.getForm().loadRecord(record);
if (record.data.parent != undefined) {
this.departmentForm.find('name', 'parent.deptId')[0]
.setValue({
id:record.data.parent.deptId,
text:record.data.parent.deptName
});
}
Ext.Ajax.request({
url : this.loadDeptRoleUrl + '/'
+ record.data.deptId,
method : 'post',
success : function(response, options) {
var text = Ext.decode(response.responseText);
var json = text.msg;
this.deptRoleIds.clear();
Ext.each(json, function(role) {
this.deptRoleIds.add(role.roleId,
role.deptId);
}, this);
},
failure : function(response, options) {
Ext.MessageBox.alert('提示', '请求失败！');
},
scope : this
});
},
/** 重置表单数据 */
reset : function() {
// Share.resetGrid(this.roleGrid);
// this.roleSelModel(true);
this.departmentForm.getForm().reset();
}
});
DeptFormPanel.js
Ext.ns("Ext.basic");
/**
* 部门的表单信息
*
* @class Ext.basic.DepartmentFormPanel
* @extends Ext.form.FormPanel
*/
Ext.basic.DeptFormPanel = Ext.extend(Ext.form.FormPanel, {
constructor : function(config) {
if (config == null) {
config = {};
}
Ext.apply(this, config);
/** 部门列表 */
this.deptTree = new Ext.ux.DeptTreePanel({});
Ext.basic.DeptFormPanel.superclass.constructor.call(this, {
layout : 'form',
width : 280,
frame : true,
defaults : {
xtype : 'textfield',
anchor : '98%'
},
bodyStyle : 'padding:5px',
items : [{
xtype : 'textfield',
fieldLabel : '部门编码',
name : 'deptId'
}, {
fieldLabel : '部门名称',
name : 'deptName',
allowBlank : false,
blankText : '部门名称不能为空'
}, {
xtype : 'combotree',
fieldLabel : '上级部门',
name : 'parent.deptId',
tree : new Ext.tree.TreePanel({
root : {
expanded : true,
id : 'root'
},
loader : new Ext.tree.TreeLoader({
dataUrl : 'dept/getDeptList'
}),
animate : true,
enableDD : true,
autoScroll : true,
rootVisible : true
})
}, {
xtype : 'numberfield',
allowBlank : false,
blankText : '显示顺序不能为空!',
fieldLabel : '显示顺序',
name : 'displayIndex'
}, {
xtype : 'combo',
fieldLabel : '部门类型',
hiddenName : 'deptType',
mode : 'local',
triggerAction : 'all',
store :[['1','普通部门'],['2','系部'],['3','班级']],
displayField : 't',
valueField : 'v'
}, {
fieldLabel : '部门简介',
name : 'deptComment'
}]
});
}
});
controller
@RequestMapping(value = "/queryListForTree", method = RequestMethod.POST) @ResponseBody public List<Dept> queryListForTree(@RequestParam(required = false) String deptName) { Criteria criteria = new Criteria(); if (StringUtils.isNotBlank(deptName)) { criteria.put("deptName", deptName); } return departmentService.queryListForTree(criteria); }
service:
@Override public List<Dept> queryListForTree(Criteria criteria) { List<Dept> resultTree = new ArrayList<Dept>(); List<Dept> deptList = mapper.getDeptList(criteria); Dept dept = null; for (Iterator<Dept> it = deptList.iterator(); it.hasNext();) { dept = it.next(); if (dept.getParent() == null || "0".equals(dept.getParent().getDeptId())) { dept.setChildren(getSubDepts(dept, deptList)); if (dept.getChildren().size() == 0) { dept.setLeaf(1); } else { dept.setLeaf(0); } resultTree.add(dept); } } return resultTree; } private List<Dept> getSubDepts(Dept d, List<Dept> deptList) { List<Dept> subDeptList = new ArrayList<Dept>(); Dept tmp = null; for (Iterator<Dept> it = deptList.iterator(); it.hasNext();) { tmp = it.next(); if (tmp.getParent() != null && tmp.getParent().getDeptId().equals(d.getDeptId())) { tmp.setChildren(getSubDepts(tmp, deptList)); if (tmp.getChildren().size() == 0) { tmp.setLeaf(1); } else { tmp.setLeaf(0); } subDeptList.add(tmp); } } return subDeptList; }
dao
List<Dept> getDeptList(Criteria criteria);
mybatis.xml
<select id="getDeptList" parameterType="Criteria" resultMap="departmentMap"> select d.dept_id as deptId, d.dept_pid as deptpId, d.dept_name as deptName, d.dept_comment as deptComment, d.display_index as displayIndex, d.dept_type as deptType, d.leaf as leaf from base_dept d <where> <!-- 教职工Tree --> <if test="condition.userType==1">and (DEPT_TYPE=1 or DEPT_TYPE=2)</if> <!-- 学生Tree --> <if test="condition.userType==2">and (DEPT_TYPE=2 or DEPT_TYPE=3)</if> <!-- 新生Tree --> <if test="condition.userType==3">and DEPT_TYPE=2</if> <if test="condition.deptId != null ">and (DEPT_ID='root' OR DEPT_ID=#{condition.deptId})</if> </where> order by d.display_index asc </select>
pojo实体类：
package cn.edu.hbcf.privilege.pojo; import java.io.Serializable; import java.util.List; /** * 部门 * @author 张周海 */ public class Dept implements Serializable{ /** 部门Id */ private String deptId; /** 父部门 */ private Dept parent; /** 部门名称 */ private String deptName; /** 部门简介 */ private String deptComment; /** 是否为根节点 0无1有*/ private int leaf; /** * 显示顺序 */ private Integer displayIndex; /** * 是否为系所号 */ private Integer deptType; private List<Dept> children; public String getDeptId() { return deptId; } public void setDeptId(String deptId) { this.deptId = deptId; } public String getDeptName() { return deptName; } public void setDeptName(String deptName) { this.deptName = deptName; } public String getDeptComment() { return deptComment; } public void setDeptComment(String deptComment) { this.deptComment = deptComment; } public int getLeaf() { return leaf; } public void setLeaf(int leaf) { this.leaf = leaf; } public void setParent(Dept parent) { this.parent = parent; } public Dept getParent() { return parent; } /** * @return the children */ public List<Dept> getChildren() { return children; } /** * @param children the children to set */ public void setChildren(List<Dept> children) { this.children = children; } /** * @return the displayIndex */ public Integer getDisplayIndex() { return displayIndex; } /** * @param displayIndex the displayIndex to set */ public void setDisplayIndex(Integer displayIndex) { this.displayIndex = displayIndex; } /** * @return the deptType */ public Integer getDeptType() { return deptType; } /** * @param deptType the deptType to set */ public void setDeptType(Integer deptType) { this.deptType = deptType; } }
children重要
