树形表格。
<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>
| Name | Type | Description | Default | Set? | Get? | Tag? |
|---|---|---|---|---|---|---|
| treeColumn | String | 节点列 | √ | √ | √ | |
| columns | Array | 列集合对象 | √ | √ | √ | |
| allowMoveColumn | Boolean | 允许移动列 | true | √ | √ | √ |
| allowResizeColumn | Boolean | 允许拖拽调节列宽度 | true | √ | √ | √ |
| allowResize | Boolean | 允许拖拽调节表格尺寸 | false | √ | √ | √ |
| Name | Parameter | Description | Return |
|---|
| Name | EventObject | Description |
|---|---|---|
| drawcell |
{
sender: Object,
node: Object,
column: Object,
field: String,
value: String,
cellHtml: "",
rowCls: "",
cellCls: "",
rowStyle: "",
cellStyle: "",
isLeaf: Boolean,
showCheckBox: Boolean,
showTreeIcon: Boolean
iconCls: String
}
|
绘制单元格时发生 |
表格列配置集合：columns，是一个数组，如：[column, column, ...]。其中一个column的配置参数如下表：
| 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 |