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;
首先构建一个根节点,然后加上孩子节点列表,然后再加上孩子的孩子节点列表。我这里只有两层结构,如果很多层的时候,最好使用迭代构建。





相关文章推荐

Extjs-树 Ext.tree.TreePanel

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

ExtJS4.0.7 树组建treePanel简单介绍

ExtJS4 树组件 Tree Ext.tree.Panel      Ext.data.TreeExt.data.NodeInterfaceExt.data.TreeStoreExt.t...

Extjs4之TreePanel、TreeGrid

Tree介绍 树形结构,是程序开发,不可缺少的组件之一。ExtJs中的树,功能强大美观实用。功能齐全,拖拉,排序,异步加载等等。 在ExtJs4中Tree和Grid具有相同的父类,因此Grid具有...

Extjs树的各种玩法案例

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

Extjs tree树的方法和配置项

Extjstree的相关方法及配置项 Ext.tree.TreePanel      主要配置项:          root:树的根节点。          rootVisible:是否显示...

Ext.Tree 各种属性

1、Ext.tree.TreePanel 主要配置项: root:树的根节点。 rootVisible:是否显示根节点,默认为true。 useArrows:是否在树中使用Vista样式箭...

ExtJS的使用方法汇总(3)——树形结构

在应用程序中,我们经常需要显示或处理树状结构的对象信息,比如部门信息和地区信息,树是一种非常典型的数据结构,这些信息都可以用树来表示。对于传统的HTML页面来说,完全依靠手动编码来实现树是比较困难的,...

Extjs中的tree节点的操作

ext 树节点操作   tree :树    node:节点 1、全部展开 tree.expandAll(); 2、全部收缩 tree.collapseAll(); ...

extjs中treepanel属性和方法

1、Ext.tree.TreePanel 主要配置项: root:树的根节点。 rootVisible:是否显示根节点,默认为true。 useArrows:是否在树中使用Vist...

ExtJs4 Checkbox tree

  • 2013年02月28日 08:40
  • 2KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ExtJS4用法之TREE
举报原因:
原因补充:

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