# 树形篇

# 树形组件的组成

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

1.树形显示组件：Edo.lists.Tree

2.树形数据组件：Edo.data.Tree

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);

效果图如下：

# 树形数据结构

如上面的树形组件示例，我们通过"children”属性来体现树形数据结构层次，如下：

    [
        {
            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的树形组件可以轻易实现：

1.节点选择：效果图

2.节点拖拽：效果图

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