原文地址 文章日期:2006/09/04
新组件Gird包含了许多的类和继承方法。如果读者不是太熟悉的面向对象开发的话,可能会对一个变量如何从某个类得到继承的方法感到困惑,用起GIRD来感到困难。在YAHOO.ext.gird包中,大多数类是设计成为“即插即用plug and play”的,可扩展的extended和可自定义的customized,能以最小量的代码插入轻松到web程序中。
要测试和创建一个实现gird的范例,我决定做一个简单的,只有一页的RSS种子采集器RSS Feed Viewer。整个程序写了100行代码而其中有20行是关于gird的。这个范例说明了gird的一些典型功能,如Ajax loading,预处理(preprocessing)和自定义渲染(custom rendering)
这里嵌入了个迷你型程序(用iframe)
我一步一步手把手带你进入GIRD,还会支持哪些是关键的地方,哪些不是。
Step 1 创建柱模型ColumnModel
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)var myColumns = [ {header: "Title", width: 350, sortable: true}, {header: "Date", width: 125, sortable: true, renderer: formatDate}];var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);
GRID从柱模型中取得某一列的信息。在这个例子我们调用一个默认的柱模型(称DefaultColumnModel),一个包含所有相关的信息的对象。对象的属性如下:
header: - 表头 width: - 宽度 sortable: - true=可排序 renderer: - 指定渲染方式。调用函数参数为 (value, rowIndex, columnIndex),并由函数返回(return)值来显示到单元格cell中。 sortType: - 指定排序方式。参见文档资料,有5到6种的转换方式。除header和width其它为可选的
创建DataModel数据模型
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)var schema = { tagName: 'item', id: 'use-index', fields: ['title', 'pubDate']};this.dataModel = new YAHOO.ext.grid.XMLDataModel(schema);this.dataModel.addPreprocessor(1, parseDate); //列1是日期,先预处理一下this.dataModel.onLoad.subscribe(this.onLoad, this, true);this.dataModel.onLoadException.subscribe(this.showError, this, true);this.dataModel.setDefaultSort(colModel, 1, 'ASC');
DataModel是GIRD的数据