ExtJS4用法之TREE

一》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;

首先構建一個根節點，然後加上孩子節點列表，然後再加上孩子的孩子節點列表。我這裏只有兩層結構，如果很多層的時候，最好使用迭代構建。