TreeGrid教程.docx

TreeGrid介绍 TreeGrid的组成 data数据源 columns列配置 表头 单元格 单元格渲染器 单元格编辑器 节点列 大数据量TreeGrid的组成TreeGrid由两个主要部分构成：1. 界面显示组件：Edo.lists.TreeGrid2. 数据源组件：Edo.data.DataTreeTreeGrid是可视的组件，它用于界面显示、编辑操作、用户交互等功能。DataTree是不可见的数据组件，负责DataTree的数据视图和数据操作。在DataTree上的所有数据操作，比如增、删、改、过滤、排序等，都会被TreeGrid监听并更新界面。TreeGrid具有两个非常重要的属性：1. data：数据源对象。Edo.data.DataTree类型。负责数据视图和数据操作。2. 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, data, t) /value: 单元格值。对应recordcolumn.dataIndex /record: 行对象。是data对象的一个元素 /column: 列对象。就是具有header、dataIndex.的列配置列对象本身。 /rowIndex: 行索引号 /data: 数据对象 /t: 列表组件对象 return ; /返回此单元格显示的HTML内容(一般根据value和row的内容进行组织) , /汇总函数 summary: function(column, data, t) return 总数:+data.getCount(); , editor: /单元格编辑器 type: date , filter: /过滤器 type: combo, . TreeGrid的列配置对象非常强大，常用的是header、dataIndex、renderer、editor等。列配置对象一般是一个数组，其中的每个元素是一个列配置参数对象，描述了每个列的显示内容和一些行为。如下： header: column1, dataIndex: id, ., .当你需要多表头的效果时，你可以将列配置对象组织成为一个树形结构的数据对象，如下： header: columns0, columns: header: column1, dataIndex: id, ., , .表头列配置对象的header和headerAlign描述了表头的文本和对齐方式，如果你需要丰富的表头内容，可以给header设置一个html字符串，例如： header: 名称, dataIndex: name, id: name,这里演示加了个超链接，您也可以加入一个图片或更丰富的HTML内容。单元格列配置对象的dataIndex和align描述了单元格映射到行对象上的数据字段以及对齐方式，例如： header: 名称, dataIndex: name, id: name, header: 开始日期, dataIndex: start, header: 完成日期, dataIndex: finish三个列，分别映射到行对象的name、start和finish数据字段上。TreeGrid显示的时候，每个单元格的内容将由dataIndex决定，如下图：dataIndex显示能力是有限的，更复杂的单元格内容显示，可以使用renderer单元格渲染器函数。renderer单元格渲染器一个单元格的显示内容，取决于两点：1. dataIndex：如果配置了dataIndex，那么单元格默认显示行对象的dataIndex属性。2. renderer：如果有单元格渲染器，那么单元格会忽略掉dataIndex的显示功能，而只显示从renderer函数返回的HTML字符串。我们来修改下上面的列配置，将有子任务的节点加粗显示，并增加一个列，里面放三个增、删、改的按钮，用于快速操作：var treegrid = new Edo.lists.TreeGrid().set( render: document.body, /加入到一个DOM元素中 width: 500, height: 180, autoColumns: true, rowHeight: 25, treeColumn: name, columns: header: 名称, dataIndex: name, id: name, renderer: function(value, record, column, rowIndex, data, treegrid) if(record.children) return ++; return ; , header: 开始日期, dataIndex: start, header: 完成日期, dataIndex: finish, width: 130, renderer: function(value, record) return ; );效果图如下：editor单元格编辑器我们可以通过单击或双击单元格，快速对这个单元格dataIndex映射的行对象属性值进行编辑。列配置对象的editor属性，对应此单元格使用什么编辑器。下面我们给名称列加上文本编辑器，两个日期列加上日期编辑器。 var treegrid = new Edo.lists.TreeGrid().set( render: document.body, /加入到一个DOM元素中 width: 400, height: 150, autoColumns: true, treeColumn: name, columns: header: 名称, dataIndex: name, id: name, editor: type: text , header: 开始日期, dataIndex: start, editor: type: date, valueFormat: true , header: 完成日期, dataIndex: finish, editor: type: date, valueFormat: true );效果图如下：节点列节点列是体现树形层次、具有可折叠图片的列。如果没有声明节点列，即时提供了树形结构的数据，TreeGrid显示出来的效果将是一个表格。节点列的声明如下： 1. 给列对象一个id，比如id为name”。2. 在TreeGrid对象上设置treeColumn为name。上面的示例是设置treeColumn的，这里去除掉treeColumn： var treegrid = new Edo.lists.TreeGrid().set( render: document.body, /加入到一个DOM元素中 width: 400, height: 150, autoColumns: true, /treeColumn: name, /去除掉节点列 columns: header: 名称, dataIndex: name, id: name, header: 开始日期, dataIndex: start, header: 完成日期, dataIndex: finish );效果图如下：大数据量如果您没有使用过Edo TreeGrid，那么您会对一个能承载“10列500行”数据的表格，感到满意。现在，Edo TreeGrid所为您所演示的数据量，是“100列5000行”！请看下面的测试代码： /生成100个列var columns = ;for(var i=0; i100; i+) columns.add( header: 列+i, dataIndex: i % 10 );/生成5000行数据var data = ;for(var i=0; i5000; i+) var o = ; for(va