树形组件的组成

EdoJS的树形组件由两部分组成：

Edo.lists.Tree是可视的树形组件，也是一般意义上的树形。负责界面显示和操作。它是从Edo.lists.Table继承的。

Edo.data.Tree是不可见的数据组件，是一个树状结构的数据组件。它是从Edo.data.Table继承的。

与表格组件一样，树形组件也有两大重要属性：columns和date。

与表格Edo.lists.Table的关系

EdoJS的树形组件是从表格组件继承而来的，因此，天然具备表格组件的所有特性。

包括：列配置对象、单元格渲染器、单元格编辑器、恐怖的数据量支持能力和高性能，等等。

EdoJS的树形组件，天然就是TreeGrid组件。

下面我们来演示一个树形的示例，可以看到，与表格示例相比，只是在数据对象的数据结构有所不同，其他方面几乎都是一样的：

var tree = [     
{
    name: 'Edo.util.Observable', desc: '事件基类', icon: 'e-tree-folder',
    children: [
        {
            name: 'Edo.core.Component', desc: '组件基类', icon: 'e-tree-folder',
            children: [
                {
                    name: 'Edo.core.UIComponent', desc: '显示组件基类',
                    icon: 'e-tree-folder',
                    children: [
                        {
                            name: 'Edo.controls.Control', desc: '控件基类',
                            icon: 'e-tree-folder',
                            children: [
                                {
                                    name: 'Edo.lists.Table', desc: '表格组件',
                                    icon: 'e-tree-folder',
                                    children: [
                                        {
                                            name: 'Edo.lists.Tree', desc: '树形组件'
                                        }
                                    ]
                                },
                                {name: 'Edo.containers.Container', desc: '容器基类'}
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}
];

Edo.build({
    id: 'tr', type: 'tree', width: 300, autoColumns: true, height: 150,
    columns: [
        { header: '节点名称', dataIndex: 'name', width: 150},     
        { header: '节点描述', dataIndex: 'desc', width: 100}
    ],
    render: document.body
});

var dataTree = new Edo.data.DataTree(tree);
tr.set('data', dataTree);   

效果图如下：

[
    {
        name: 'Node1',
        children: [
            {
                name: 'Node2'
            }
        ]
    },
    {
        name: 'Node3'
    }        
]

data属性

Edo.lists.Tree的data属性，是Edo.data.Tree对象。

而Edo.data.Tree是从Edo.data.Table继承的，因此，您可以一样使用表格数据对象的各种数据操作方法，如新增、删除、更改等。

Edo.data.Tree在Edo.data.Table的基础上，增加了一些树形数据结构特有的操作方法，这里不一一赘述，您可以查看Api文档的Edo.data.Tree类。

columns列配置

要了解树形组件的列配置内容，您可以查看表格的columns列配置。

renderer单元格渲染器

要了解树形组件的渲染器内容，您可以查看表格的renderer单元格渲染器。

editor单元格编辑器

要了解树形组件的编辑器内容，您可以查看表格的editor单元格编辑器。

节点列

节点列是体验树形层次、具有可折叠图片的列。

如果未指定节点列，默认是第一列。

我们也可以通过以下方式，显示声明节点列：

1.给列对象一个id，比如id为"desc”。

2.在Edo.lists.Tree的配置对象上，设置treeColumn为"desc"。

如下代码所示：

Edo.build({
    id: 'tr', type: 'tree', width: 300, autoColumns: true, height: 150,
    treeColumn: 'desc',
    columns: [
        { header: '节点名称', dataIndex: 'name', width: 100},     
        { header: '节点描述', dataIndex: 'desc', width: 200, id: 'desc'}
    ],
    render: document.body
});

效果图如下：

一般意义的树形组件外观

如果客户不需要一个TreeGrid，而想显示一个只有一个节点列的树，该怎么做呢？

我们需要做下面这些事：

1.隐藏表头

2.只有一个列

3.将节点列自适应撑满树形组件的宽度

4.隐藏单元格之间的线条

如下代码所示：

Edo.build({
    id: 'tr', type: 'tree', width: 300, height: 150,
    headerVisible: false,   //隐藏表头
    autoColumns: true,      //将列宽度撑满组件    
    horizontalLine: false,  //隐藏横线
    columns: [
        { dataIndex: 'name'}    //只保留一个列配置对象
    ],
    render: document.body
});

效果图如下：

树形的节点拖拽和选择

EdoJS的树形组件可以轻易实现：

这里不一一给出实现代码，具体可以查看更多树形组件的示例。