mini.TreeGrid

树形表格。

Extend

mini.Tree

Usage

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

Screenshots

Examples

TreeGrid

Properties

NameTypeDescriptionDefault Set? Get? Tag?
treeColumn String 节点列
columns Array 列集合对象

Methods

NameParameterDescriptionReturn

Events

NameEventObjectDescription
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

表格列配置集合:columns,是一个数组,如:[column, column, ...]。其中一个column的配置参数如下表:

NameTypeDescriptionDefault
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