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

TreeGrid

参考示例：TreeGrid

创建TreeGrid

<divid="treegrid1"class="mini-treegrid"style="width:600px;height:280px;"

url="../data/tasks.txt"showTreeIcon="true"

treeColumn="taskname"idField="UID"parentField="ParentTaskUID"resultAsTree="false">

<divproperty="columns">

<divtype="indexcolumn"></div>

<divname="taskname"field="Name"width="200">任务名称</div>

<divfield="Duration"width="100">工期</div>

<divfield="Start"width="100"dateFormat="yyyy-MM-dd">开始日期</div>

<divfield="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类似。参考如下：

NameTypeDescriptionDefault

headerString表头列文本

fieldString单元格值字段

nameString列标识名称

widthNumber列宽度

headerAlignString表头列文本位置。left/center/right。left

alignString单元格文本位置。left/center/right。left

headerClsString表头列样式类。

cellClsString单元格样式类

headerStyleString表头列样式

cellStyleString单元格样式

editorObject单元格编辑器。

rendererFunction单元格绘制处理函数，同drawcell事件。

allowMoveBoolean是否可移动表头列。true

allowResizeBoolean是否拖拽调节表头列宽度。true