ExtJs+tree结构显示,包括前后台代码

定义的TreeNode实体


import java.io.Serializable;
import java.util.List;
public class TreeNode implements Serializable{

private static final long serialVersionUID = -5425154196782433003L;
private String id;
private String text;
private String fatherId;
private Boolean leaf = false; //是否子叶子节点,默认是
private String cls; //图标
private String iconCls;
private String action; //请求路径
private String model;
private Boolean expanded=false; //展开
private List<TreeNode> children =null;

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

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

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 String getFatherId() {
return fatherId;
}

public void setFatherId(String fatherId) {
this.fatherId = fatherId;
}

public Boolean getLeaf() {
return leaf;
}

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

public String getCls() {
return cls;
}

public void setCls(String cls) {
this.cls = cls;
}

public String getIconCls() {
return iconCls;
}

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

public String getAction() {
return action;
}

public void setAction(String action) {
this.action = action;
}

public String getModel() {
return model;
}

public void setModel(String model) {
this.model = model;
}

public Boolean getExpanded() {
return expanded;
}

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

public TreeNode() {

}

public TreeNode(String id, String text, String fatherId, Boolean leaf,
String cls, String iconCls, String action, String model,
Boolean expanded, List<TreeNode> children) {
this.id = id;
this.text = text;
this.fatherId = fatherId;
this.leaf = leaf;
this.cls = cls;
this.iconCls = iconCls;
this.action = action;
this.model = model;
this.expanded = expanded;
this.children = children;
}


}

controller代码

@Controller
@RequestMapping("dataDic")  
public class DataDicController extends MultiActionController{
    
     @Autowired
     private TreeNodeService treeNodeService;
    
     @RequestMapping(
        value = "/DataDicTree.action"
      )
    @ResponseBody
    public  JSONArray dataDicTree(HttpServletRequest request) {
             String rootId = request.getParameter("id");
             TreeNode treenode = new TreeNode();
              System.out.println(rootId);
             treenode = insertSonToFather(rootId);
              JSONArray jsonArray = JSONArray.fromObject(treenode);
            return jsonArray;
    }

/*
      * 根据输入节点的id,返回该节点及其所有子节点(包括二级子节点、三级子节点等)
      */
    public TreeNode insertSonToFather(String id){
        //根据输入的节点的id得到该节点(得到的节点中子节点children此时为null)
        TreeNode fatherTreeNode = treeNodeService.getTreeNode(id);
        //根据该节点的id查询出其一级子节点(getTreeNodeByFatherId得到的结果为List<TreeNode>)
        List<TreeNode>  fatherChildrenList = treeNodeService.getTreeNodeByFatherId(id);
        //若该List的size不为为0,则代表其有一级子节点
        if(fatherChildrenList.size()!=0){
            //将其拥有的子节点一个个遍历
            for(int i=0; i<fatherChildrenList.size();i++){
                //遍历时,将该节点拥有的每一个子节点都调用该方法本身,这样就可得到所有一级节点的子节点(即二级节点),并将返回的一级节点插入到初始节点的children各个位置
                //(由于insertSonToFather方法返回的是一个TreeNode对象,所以递归调用时,返回的还是各个一级节点,因此要将其插入到初始节点的原对应位置)
                fatherChildrenList.set(i, insertSonToFather(fatherChildrenList.get(i).getId()));
            }
            fatherTreeNode.setChildren(fatherChildrenList);
            return fatherTreeNode;
        //若该List的size为0,则代表其没有一级子节点,为末节点,直接返回出来即可
        }else{
            return fatherTreeNode;
        }
    }    
}

Service代码


import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;



@Service
public class TreeNodeService {
    @Autowired
    private TreeNodeMapper treeNodeMapper;
    
    /**
     * 删除
     * @param id
     */
    public void deleteTreeNode(int id) {
        treeNodeMapper.deleteTreeNode(id);
    }
    /**
     * get 某一个对象
     * @param id
     * @return
     */
    public TreeNode getTreeNode(String id) {
        return treeNodeMapper.selectTreeNode(id);
    }
    /**
     * 查找出所有
     * @return
     */
    public List<TreeNode> getAll() {
        return treeNodeMapper.selectAll();
    }
    /**
     * 添加
     * @param treeNode
     */
//    @Transactional
    public void insertTreeNode(TreeNode treeNode) {
        treeNodeMapper.insertTreeNode(treeNode);
    }
    /**
     * 更新
     * @param treeNode
     */
    public void updateTreeNode(TreeNode treeNode) {
        treeNodeMapper.updateTreeNode(treeNode);
    }
    /**
     * 根据条件查询可以是分页查询可以是模糊查询
     * @param criteria 查询的条件 包括了 分页 模糊 查询条件
     * @return
     */
    public List<TreeNode> getTreeNodeByCriteria(Criteria criteria){
        return treeNodeMapper.selectTreeNodeByCriteria(criteria);
    }
    
    /**
     * 根据fatherId查询其子TreeNode
     * @param id
     * @return
     */
    public List<TreeNode> getTreeNodeByFatherId(String id){
        return treeNodeMapper.getTreeNodeByFatherId(id);
    }
    
}

前台页面


var treeStore = Ext.create("Ext.data.TreeStore",{  
    proxy : {  
        type : "ajax",  
        url : "dataDic/DataDicTree.action"  
    },
     nodeParam : "id"    //设置传递给后台的参数名,值是树节点的id属性  
});

Ext.define('DataDicView', {
    extend : 'Ext.panel.Panel',
    alias : 'widget.dataDicView',
    itemId : 'dataDicView',
    title : '数据字典',
    closable : true,
    layout:'border',
    items : [{
            region:'west',
            title : '数据字典类别结构',
            name:'westTreePanel',
            width: 300,
            height: 200,
            rootVisible: false,
            xtype:'treepanel',
            rootVisible : false, //显示根节点  
            root: {  
                id: '0',  
                text: '数据字典',  
                expanded: false,  
                leaf: false  
            },  
            viewConfig : {  
                loadingText : "加载数据..."  
            },  
            store : treeStore
        },{
            region:'center',
            xtype: 'dataDicGridPanel',
    }],
    dockedItems : [{
                xtype : 'pagingtoolbar',
                dock : 'bottom',
                displayInfo : true,
                displayMsg : '显示第{0}条到{1}条记录,一共{2}条',
                emptyMsg : '没有记录',
                store : store,
                pageSize : 5
            }],
    initComponent : function() {
        this.callParent(arguments);
    }
});



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值