Extjs，实现树形结构的总结

工作总结，用extjs、mybatis、springMVC实现树形显示班级

前台extjs实现树形代码如下：

　　　　　　　

xtype : 'combotree',
fieldLabel : '部门名称',
name : 'deptId',
hiddenName : 'deptId',
allowBlank : false,
width:235,
tree : new Ext.tree.TreePanel({
root : {
expanded : true,
id : 'root'
},
loader : new Ext.tree.TreeLoader({
dataUrl : 'dept/getDeptList'
}),
animate : true,
enableDD : true,
autoScroll : true,
height:400,
rootVisible : true
}),
listeners : {
select : function(combotree){
}
},
scope : this
}

后台，controller代码

/**
* 查找带check的部门树
*
* @return
*/
@RequestMapping(value="/getDeptList",method = RequestMethod.POST)
@ResponseBody
public List<Tree> getDeptList() {
Criteria criteria = new Criteria();
return gradeCourseService.getDeptList(criteria);
}

dao层代码：

/**
*
* 方法描述 : 查询部门
* @param criteria
* @return list<Dept>集合
*/
List<Dept>  getDeptList(Criteria criteria);

dao对应的mapper查询代码：

<!-- 查询学生部门 -->
<select id="getDeptList" parameterType="Criteria" resultMap="depetMap">
select
a.dept_id deptId,
a.dept_Name deptName,
a.leaf leaf,
b.dept_id deptPartpId,
b.dept_name deptPartName
from spauth.base_dept a,spauth.base_dept b
where
a.dept_type = '2'
and

a.dept_id = b.dept_pid
order
by a.dept_id asc,
b.dept_Id asc
</select>
<!-- 树叶模型 -->
<resultMap type="cn.edu.hbcf.privilege.pojo.Dept" id="depetMap">
<id property="deptId" column="deptId"/>
<result property="deptName" column="deptName"/>
<result property="leaf" column="leaf"/>
<collection property="children" ofType="cn.edu.hbcf.privilege.pojo.Dept">
<id property="deptId" column="deptPartpId"/>
<result property="deptName" column="deptPartName"/>
</collection>
</resultMap>

service层代码：

/**
* 获取部门下拉框列表
* @return
*/
List<Tree> getDeptList(Criteria criteria);

service层实现类代码：

public List<Tree> getDeptList(Criteria criteria) {
List<Tree> resultTree = new ArrayList<Tree>();
Tree treeNode = null;
List<Dept> deptList = gradeCourseMapper.getDeptList(criteria);
Dept dept = null;
for(Iterator<Dept> it = deptList.iterator(); it.hasNext();){
treeNode = new Tree();
List<Tree> childTree =new ArrayList<Tree>();
Tree childNode = null;
Dept chilDept = null;
dept = it.next();
if(dept.getDeptName().equals("河北金融学院")){
continue ;
}
treeNode.setText(dept.getDeptName());
treeNode.setId(dept.getDeptId());
for(Iterator<Dept> iter = dept.getChildren().iterator(); iter.hasNext();){
childNode = new Tree();
chilDept = iter.next();
childNode.setText(chilDept.getDeptName());
childNode.setId(chilDept.getDeptId());
childNode.setLeaf(true);
childTree.add(childNode);
treeNode.setChildren(childTree);
}
//            if(treeNode.getChildren().size()==0){//这是判断系节点是不是没有子节点。如果没有，就让系变为叶子节点。
//                treeNode.setLeaf(true);//变为叶子节点。
//            }
resultTree.add(treeNode);
}
return resultTree;
}

tree实体类代码：

package cn.edu.hbcf.common.vo;

import java.util.List;

/**
* ext树菜单
*
* @author
* @date 2012-02-24 19:06:00
*
*/
public class Tree {

private String id;
private String name;
private String text;
private String iconCls;
private boolean expanded;
private boolean leaf;
private String url;
private List<Tree> children;

public String getId() {
return id;
}

public void setId(String id) {
this.id = id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getText() {
return text;
}

public void setText(String text) {
this.text = text;
}

public String getIconCls() {
return iconCls;
}

public void setIconCls(String iconCls) {
this.iconCls = iconCls;
}

public boolean getExpanded() {
return expanded;
}

public void setExpanded(boolean expanded) {
this.expanded = expanded;
}

public boolean getLeaf() {
return leaf;
}

public void setLeaf(boolean leaf) {
this.leaf = leaf;
}

public String getUrl() {
return url;
}

public void setUrl(String url) {
this.url = url;
}

public List<Tree> getChildren() {
return children;
}

public void setChildren(List<Tree> children) {
this.children = children;
}

}

dept实体类代码：

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;
}

}

其中：combotree.js:

ComboTree = Ext.extend(Ext.form.TriggerField, {
triggerClass : 'x-form-arrow-trigger',
shadow : 'sides',
lazyInit : true,
currNode:null,        //当前选中的节点

/**
* 覆盖initComponent
*/
initComponent : function() {
ComboTree.superclass.initComponent.call(this);
this.addEvents(
'expand',
'collapse',
'beforeselect',
'select'
);
},

/**
* 覆盖onRender
* @param {} ct
* @param {} position
*/
onRender : function(ct, position) {
Ext.form.ComboBox.superclass.onRender.call(this, ct, position);
var hiddenName = this.name;

this.hiddenField = this.el.insertSibling({
tag : 'input',
type : 'hidden',
name : hiddenName
}, 'before', true);

this.hiddenField.value = this.value !== undefined
? this.value
: 0;

this.el.dom.removeAttribute('name');
this.id = this.name;

if (!this.lazyInit) {
this.initList();
} else {
this.on('focus', this.initList, this, {
single : true
});
}
},

/**
* 私有：初始化下拉列表
*/
initList : function() {
//构建容纳TreePanel的层
if (this.list) {
return;
}
this.list = new Ext.Layer({
cls : 'x-combo-list',
constrain : false
});
this.list.setWidth(Math.max(this.wrap.getWidth(), 70));
this.mon(this.list,'mouseover',this.onViewOver,this);

//构建TreePanel，并渲染到list中
if(!this.tree){
this.root = this.root?this.root:new Ext.tree.AsyncTreeNode({
expanded : true
});
this.tree = new Ext.tree.TreePanel({
autoScroll : true,
height : 200,
border : false,
root : this.root,
loader : this.loader
});
delete this.loader;
}
this.tree.on({
click:this.onTreeClick,
scope:this
});
this.tree.render(this.list);

this.el.dom.setAttribute('readOnly', true);
this.el.addClass('x-combo-noedit');
},

expandNode : function(n, v) {
var cs = n.childNodes;
for (var i = 0, len = cs.length; i < len; i++) {
if (cs[i].id == v) {
return true;
}
if (expandNode(cs[i], v)) {
cs[i].expand();
return true;
}
}
return false;
},

validateValue : function(value) {
return true;
},

/**
* 覆盖onDestory
*/
onDestroy : function() {
if (this.wrap) {
this.wrap.remove();
}
if(this.tree){
this.tree.destroy();
}
if (this.list) {
this.list.destroy();
}
ComboTree.superclass.onDestroy.call(this);
},

isExpanded : function() {
return this.list && this.list.isVisible();
},

collapse : function() {
if (this.isExpanded()) {
this.list.hide();
}
this.fireEvent('collapse', this);
},

expand : function(){
this.list.alignTo(this.wrap, 'tl-bl?');
this.list.show();
this.mon(Ext.getDoc(), {
scope: this,
mousewheel: this.collapseIf,
mousedown: this.collapseIf
});
this.fireEvent('expand', this);
},

collapseIf : function(e){
console.log(e.within);
if(!this.isDestroyed && !e.within(this.wrap) && !e.within(this.list)){
this.collapse();
}
},

onSelect : function(node){
if(this.fireEvent('beforeselect', this, node) !== false){
this.setValue(node);
this.collapse();
this.fireEvent('select', this, node);
}
},

onTreeClick : function(node) {
if(node){
this.onSelect(node);
}else{
this.collapse();
}
},

assertValue:function(){
if(this.currNode){
this.setValue(this.currNode);
}
},

// private
beforeBlur:function(){
this.assertValue();
},

postBlur  : function(){
ComboTree.superclass.postBlur.call(this);
this.collapse();
},

mimicBlur : function(e){
if(!this.isDestroyed && !this.wrap.contains(e.target) && this.validateBlur(e)){
this.triggerBlur();
}
},

validateBlur : function(e){
return !this.list || !this.list.isVisible();
},

onViewOver:function(e,t){
t=Ext.get(t);
if(t.hasClass("x-tree-node-el")){
var id=t.getAttribute("ext:tree-node-id");
if(id){
this.currNode=this.tree.getNodeById(id);
}
}
},

setValue : function(v) {
this.currNode=v;
var val = v;
if (typeof v === 'object') {
this.hiddenField.value = ((this.root && v.id == this.root.id)
? 0
: v.id);
val = v.text;
}
ComboTree.superclass.setValue.call(this, val);
},

getValue:function(){
return this.currNode?this.currNode.id:"";
},

getSelected:function(){
return this.currNode;
},

initEvents : function() {
ComboTree.superclass.initEvents.call(this);
this.el.on('mousedown', this.onTriggerClick, this);
},

onTriggerClick : function() {
if (this.disabled) {
return;
}
if(this.isExpanded()) {
this.collapse();
this.el.focus();
} else {
this.onFocus({});
this.expand();
this.el.focus();
}
}
});
Ext.reg('combotree', ComboTree);