TreeGrid教程.docx

TreeGrid介绍TreeGrid的组成data数据源columns列配置表头单元格单元格渲染器单元格编辑器节点列大数据量TreeGrid的组成TreeGrid由两个主要部分构成：界面显示组件：Edo.lists.TreeGrid数据源组件：Edo.data.DataTreeTreeGrid是可视的组件，它用于界面显示、编辑操作、用户交互等功能。DataTree是不可见的数据组件，负责DataTree的数据视图和数据操作。在DataTree上的所有数据操作，比如增、删、改、过滤、排序等，都会被TreeGrid监听并更新界面。TreeGrid具有两个非常重要的属性：data：数据源对象。Edo.data.DataTree类型。负责数据视图和数据操作。columns：列配置对象。Javascript数组。负责表头、列、单元格等配置。datadata属性就是一个Edo.data.DataTree对象。它负责表格数据操作，例如增加行、删除行、修改单元格、移动、排序、过滤等操作。TreeGrid通过监听DataTree的datachanged数据改变事件，更新自己的界面视图。 下面用一个简单的示例来说明TreeGrid和DataTree如何配合使用：//树形结构数据对象, children属性体现树形结构//这里是静态数据，您也可以用Ajax从服务端获取var data = [ {name: 项目范围规划, start: 2007-01-01, finish: 2007-01-02, children: [ {name: 项目范围规划, start: 2007-01-01, finish: 2007-01-01}, {name: 项目范围规划, start: 2007-01-01, finish: 2007-01-02} ] }, {name: 分析/软件需求, start: 2007-01-04, finish: 2007-01-16, children: [ {name: 行为需求分析, start: 2007-01-04, finish: 2007-01-11}, {name: 起草初步的软件规范, start: 2007-01-11, finish: 2007-01-16} ] }];//创建TreeGridvar treegrid = new Edo.lists.TreeGrid().set({ render: document.body, //加入到一个DOM元素中 width: 300, height: 180, autoColumns: true,treeColumn: name, columns: [ {header: 名称, dataIndex: name, id: name}, {header: 开始日期, dataIndex: start}, {header: 完成日期, dataIndex: finish} ]});//创建DataTreevar dataTree = new Edo.data.DataTree(data);//将DataTree作为TreeGrid的数据源对象treegrid.set(data, dataTree);效果图如下：columnsTreeGrid有多少列、列宽、列的数据内容、单元格编辑器、表头文本等，都是由columns列配置对象来决定的。列配置对象参数如下：{header: 姓名, //表头列显示的文本内容dataIndex: name, //单元格映射的行对象属性 headerAlign: center, //表头列内容定位:left/center/right align: center, //单元格内容定位:left/center/right width: 100, //列的宽度 minWidth: 50, //列的最小宽度 enableSort: false, //是否允许此列排序 enableMove: true, //是否允许此列拖拽移位 enableResize: true, //是否允许此列拖拽调节宽度 //单元格渲染器renderer: function(value, record, column, rowIndex, da