Extjs，实现树形结构的总结
2024-08-24 13:49:04
工作总结，用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);
最新文章
- java反射复制属性值
- Async IO
- IOS开发基础知识--碎片19
- CSS3详解：background
- NOIP 2015 信息传递
- 实现多项式的JAVA类
- javascript取得机器名，用户名，读写注册表，启动应用程序
- FreeMarker笔记 第二章 数值和类型
- 单片微机原理P2：80C51外部中断与定时器系统
- Spring Cloud 之 Ribbon
- ML.NET 发布0.11版本：.NET中的机器学习，为TensorFlow和ONNX添加了新功能
- react安装
- layer弹窗和日期
- python 反射的用法
- SQL优化之踩过的坑【一】
- 『Python』PIL图像处理_形变操作
- 解决ubuntu 16.04+ Qt 5.7.1无法输入中文的问题
- Windows 7 x64 安装 Oracle 11g Express
- GCD介绍：Dispatch_source
- C++基础知识-派生类、调用顺序、访问等级、函数遮蔽