TreeGrid

参考示例： TreeGrid   

创建TreeGrid

<div id="treegrid1" class="mini-treegrid" style="width:600px;height:280px;"     
    url="../data/tasks.txt" showTreeIcon="true" 
    treeColumn="taskname" idField="UID" parentField="ParentTaskUID" resultAsTree="false"
>
    <div property="columns">
        <div type="indexcolumn"></div>
        <div name="taskname" field="Name" width="200">任务名称</div>
        <div field="Duration" width="100">工期</div>
        <div field="Start" width="100" dateFormat="yyyy-MM-dd">开始日期</div>
        <div field="Finish" width="100" dateFormat="yyyy-MM-dd">完成日期</div>
    </div>
</div>

注意：idField、parentField、resultAsTree属性。

数据结构：列表

通过url返回的数据结构如下：

[
    {id: "base", text: "Base", expanded: false},    
    {id: "ajax", text: "Ajax", pid: "base"},
    {id: "json", text: "JSON", pid: "base"},
    ......
]

其中，id和pid对应父子关系。

Columns列配置

TreeGrid的列配置，跟DataGrid类似。参考如下：

Name	Type	Description	Default
header	String	表头列文本
field	String	单元格值字段
name	String	列标识名称
width	Number	列宽度
headerAlign	String	表头列文本位置。left/center/right。	left
align	String	单元格文本位置。left/center/right。	left
headerCls	String	表头列样式类。
cellCls	String	单元格样式类
headerStyle	String	表头列样式
cellStyle	String	单元格样式
editor	Object	单元格编辑器。
renderer	Function	单元格绘制处理函数，同drawcell事件。
allowMove	Boolean	是否可移动表头列。	true
allowResize	Boolean	是否拖拽调节表头列宽度。	true