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

jQuery MiniUI 开发教程 TreeGrid 创建TreeGrid（一）相关推荐

Jquery miniUI开发教程（1）：概述
jQuery MiniUI - 快速开发WebUI. 它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验. 使用MiniUI,开发者可以快速创建Aj ...
Jquery miniUI 开发教程（2）搭建Jquery miniUI 开发环境
Jquery miniUI 下载地址:http://www.miniui.com/download Note:请根据不同的服务端后台,选择下载不同后台版本的MiniUI. 下载后,解压缩后,如图所示: ...
jQuery MiniUI 开发教程 TreeGrid 节点拖拽（四）
[b]TreeGrid:节点拖拽[/b] [img]http://www.miniui.com/docs/api/images/dragdropnode.png[/img] 参考示例: [url=ht ...
jQuery MiniUI 开发教程树形控件树操作：自定义节点（九）
[b]自定义节点[/b] [img]http://www.miniui.com/docs/api/images/drawnode.gif[/img] 参考示例:[url=http://www.mini ...
jQuery MiniUI 开发教程表单控件 Button：按钮（六）
[b]Button:按钮[/b] [img]http://www.miniui.com/docs/api/images/buttons.gif[/img] 参考示例: [url=http://www. ...
jQuery MiniUI 开发教程导航控件 Menu:菜单（二）
[b]菜单[/b] [img]http://www.miniui.com/docs/api/images/menu-h.gif[/img] 参考示例:[url=http://www.miniui.co ...
jQuery MiniUI 开发教程导航控件 ContextMenu：右键菜单（四）
[b]ContextMenu:右键菜单[/b] [img]http://www.miniui.com/docs/api/images/contextmenu.gif[/img] 参考示例:[url=h ...
jQuery MiniUI 开发教程表格控件表格：分组（十六）
[b]表格:分组[/b] [img]http://www.miniui.com/docs/api/images/grouping.png[/img] 参考示例:[url=http://www.mini ...
jQuery MiniUI 开发教程表单控件数据绑定（一）
[b]DataBinding:数据绑定[/b] 参考示例:[url=http://www.miniui.com/demo/databinding/databinding.html]DataBindin ...

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

jQuery MiniUI 开发教程 TreeGrid 创建TreeGrid（一）相关推荐

最新文章

热门文章