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