Gird组件 Part-3:范例RSSFeed Viewer

2024-09-06 12:42:59

字体：大中小

来源：转载

供稿：网友

原文地址文章日期：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

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数据模型

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的数据来源。所有在 YAHOO.ext.grid包中的DataModels，都有一系统通知UI改变内容的事件。也就是说你可以改变model内的数据，而同时对UI自动映射。

这个范例中我们使用XMLDataModel。XMLDataModel提供一个简易的方式来映射XML文档与gird之间的结构。你所要做的是写个简单的schema,让model知道有哪些column给gird。Schema有下列属性：

tagName: - Model会读取这一节点下（tagName）的所有子节点（items的上一层节点名称）； id: - The attribute or child element to match to get the id of the row. If an attribute or child element is not found with the supplied "id" name, the index of the record is used. So if you don't have a specific id attribute, just use something like 'use-index' which won't be matched and the index will be used. fields: - An array of attribute names or child node tag names to match for the column values. If you have 4 columns in your ColumnModel, you should have 4 items in your fields array. If a name specified in the array isn't found, an empty string is used.

上一篇：用ajax实现的自动投票的代码

下一篇：一个效果写的HashTable代码