jQuery MiniUI 开发教程 TreeGrid 创建TreeGrid（一）

[b]TreeGrid[/b]
[img]http://www.miniui.com/docs/api/images/treegrid.gif[/img]

参考示例： [url=http://www.miniui.com/demo/treegrid/treegrid.html]TreeGrid[/url]

[b]创建TreeGrid[/b]
<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属性。

[b]数据结构：列表[/b]
通过url返回的数据结构如下：
[
{id: "base", text: "Base", expanded: false},
{id: "ajax", text: "Ajax", pid: "base"},
{id: "json", text: "JSON", pid: "base"},
......
]
其中，id和pid对应父子关系。

[b]Columns列配置[/b]
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