ExtJS4用法之TREE

原创 2012年07月02日 13:28:39

一》extjs的tree还是很强大的 可以支持拖放,全选,表格树等等。先看下效果图


对于tree来说,它的model是可以省略的,但是如果省略的话,就会引用一个隐式的model类型Ext.data.NodeInterface。一般情况下我们都使用默认的model类型。下面我们先声明一个treestore。

var store = new Ext.data.TreeStore({
            proxy: {
                type: 'ajax',
                url: 'tree.shtml?id='+id
            },
            root: {
                text: '根节点',
                id: id,
                expanded: true
            }
        });
然后我们再声明一个tree视图

 var tree = new Ext.tree.TreePanel({
            animate: true,
            border: false,
            rootVisible: false,
            useArrows: true,
            store: store,
            height: 500,
            width: 300,
            listeners:{
                "checkchange": function(node, state) {
                    node.checked = state;
                    if(!node.isLeaf()){
                        node.eachChild(function(childnode){
                            childnode.set('checked', state);
                        })
                    }
                }
            },
            columns: [{
                xtype: 'treecolumn',
                text: '集电线/风机ID',
                flex: 2,
                sortable: true,
                dataIndex: 'id'
            },{
                text: '集电线/风机名称',
                flex: 2,
                sortable: true,
                dataIndex: 'text'
            }]
        });
这样我们就有了一个tree视图。

有了这些,我们再来看看怎么与后台交互数据,我使用的是spring3MVC,下面看我的controller的方法

    //获取所有集电线信息列表树
    @RequestMapping(value = "/tree", method = RequestMethod.GET)
    @ResponseBody
    public TreeNodeJson getClinesTree(int id) {
        List<CollLine> clines = homeService.getCollLinesByFid(id);
        if (clines != null && !clines.isEmpty()) {
            TreeNodeJson root = new TreeNodeJson(farmid, null, false, false);
            List<TreeNodeJson> ctreeChildren = new ArrayList<TreeNodeJson>();
            for (CollLine cline : clines) {
                TreeNodeJson cTreeNode = new TreeNodeJson(cline.getId(), cline.getName(), false, false);
                List<WtInfo> wts = homeService.getWtInfosByClid(cline.getId());
                if (wts != null && !wts.isEmpty()) {
                    List<TreeNodeJson> wtreeChildren = new ArrayList<TreeNodeJson>();
                    for (WtInfo wt : wts) {
                        TreeNodeJson wTreeNode = new TreeNodeJson(wt.getWtid(), wt.getWtname(), true, false);
                        wtreeChildren.add(wTreeNode);
                    }
                    cTreeNode.setChildren(wtreeChildren);
                }
                ctreeChildren.add(cTreeNode);
            }
            root.setChildren(ctreeChildren);
            return root;
        } else {
            return null;
        }
    }
对于TreeNodeJson 类,是我自己封装的一个树节点类型。这个类的结构有几个关键属性【children,leaf,checked,text】,有这几个属性后,当数据传到前台后,他就会匹配Ext.data.NodeInterface的属性,来构建树结构。当然你还可以根据Ext.data.NodeInterface的属性,完全构建一样的类结构,你还可以增加其他属性,但是几个关键属性石必须一致的。增加其他的属性石可以在表格的列属性里面引用的。

public class TreeNodeJson {

    private int id;
    private String text;
    private String cls;
    private List<TreeNodeJson> children;
    private boolean leaf;
    private boolean checked;
    private String desp1;
    private String desp2;
最后来说一下几个注意的地方:

1)节点全选的功能实现:

            listeners:{
                "checkchange": function(node, state) {
                    node.checked = state;
                    if(!node.isLeaf()){
                        node.eachChild(function(childnode){
                            childnode.set('checked', state);
                        })
                    }
                }
            },
这里面用到一个eachChild的遍历方法,然后使用set方法来设置是否全选,state是父节点的状态(是否被选),如果父节点被选择,那子节点全部被选,反之都不选。但是我这里只有一层,所以就没有迭代,如果是多层的树结构,是需要迭代的。

2)表格树结构:对于表格树结构很简单,直接加上columns就OK了,如果加上“treecolumn”,此列就会显示成树结构。

            columns: [{
                xtype: 'treecolumn',
                text: '集电线/风机ID',
                flex: 2,
                sortable: true,
                dataIndex: 'id'
            },{
                text: '集电线/风机名称',
                flex: 2,
                sortable: true,
                dataIndex: 'text'
            }]
3)后台树结构的构建:

TreeNodeJson root = new TreeNodeJson(farmid, null, false, false);
            List<TreeNodeJson> ctreeChildren = new ArrayList<TreeNodeJson>();
            for (CollLine cline : clines) {
                TreeNodeJson cTreeNode = new TreeNodeJson(cline.getId(), cline.getName(), false, false);
                List<WtInfo> wts = homeService.getWtInfosByClid(cline.getId());
                if (wts != null && !wts.isEmpty()) {
                    List<TreeNodeJson> wtreeChildren = new ArrayList<TreeNodeJson>();
                    for (WtInfo wt : wts) {
                        TreeNodeJson wTreeNode = new TreeNodeJson(wt.getWtid(), wt.getWtname(), true, false);
                        wtreeChildren.add(wTreeNode);
                    }
                    cTreeNode.setChildren(wtreeChildren);
                }
                ctreeChildren.add(cTreeNode);
            }
            root.setChildren(ctreeChildren);
            return root;
首先构建一个根节点,然后加上孩子节点列表,然后再加上孩子的孩子节点列表。我这里只有两层结构,如果很多层的时候,最好使用迭代构建。





extjs4 tree总结

一.Ext.tree.panel 继承了 Ext.panel.Table 事件为:itemclick 1.1 tree node 的单击事件,看到 Ext.data.Model record 在...
  • wwwyuanliang10000
  • wwwyuanliang10000
  • 2012年02月28日 11:56
  • 9438

Extjs-树 Ext.tree.TreePanel

1.简单的树 效果图 代码 Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/...
  • itlwc
  • itlwc
  • 2012年08月16日 16:20
  • 49304

Extjs tree树的方法和配置项

Extjstree的相关方法及配置项 Ext.tree.TreePanel      主要配置项:          root:树的根节点。          rootVisible:是否显示...
  • yuan1013922969
  • yuan1013922969
  • 2016年06月23日 10:29
  • 2170

Extjs树的各种玩法案例

本案例中记载了Extjs中一棵树的形成以及各种案例集成,并详解介绍了TreePanel、TreeNode和AsyncTreeNode这三个主要对象。纯属个人业余时间玩玩的,整理出来,方便以后查看。 J...
  • cl05300629
  • cl05300629
  • 2014年03月04日 16:01
  • 5746

Ext.Tree 各种属性

1、Ext.tree.TreePanel 主要配置项: root:树的根节点。 rootVisible:是否显示根节点,默认为true。 useArrows:是否在树中使用Vista样式箭...
  • chenlaoyang
  • chenlaoyang
  • 2012年12月22日 11:23
  • 3435

Ext树形结构——TreePanel

创建一个树 树控件由Ext.tree.TreePanel类定义,控件名称为treepanel,继承自Panel面板。 要实现一棵树也很简单: 1.    创建一个TreePanel 2.   ...
  • qincidong
  • qincidong
  • 2012年12月26日 19:46
  • 5485

EXTJS treePanel treecolumn 单选

EXTJS treePanel treecolumn 实现单选
  • github_34955380
  • github_34955380
  • 2016年05月11日 11:20
  • 735

extjs tree 树

extjs 从数据库获取数据,生成一颗树
  • qq_34117825
  • qq_34117825
  • 2016年11月25日 15:00
  • 390

extjs中treepanel属性和方法

1、Ext.tree.TreePanel 主要配置项: root:树的根节点。 rootVisible:是否显示根节点,默认为true。 useArrows:是否在树中使用Vist...
  • luckypeng
  • luckypeng
  • 2015年05月27日 12:49
  • 4734

extjs中treepanel(含栗子)

TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、che...
  • ghjzzhg
  • ghjzzhg
  • 2017年04月28日 15:29
  • 272
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ExtJS4用法之TREE
举报原因:
原因补充:

(最多只允许输入30个字)