原文地址 文章日期：2006/09/04

新組件Gird包含了許多的類和繼承方法。如果讀者不是太熟悉的面向?qū)ο箝_(kāi)發(fā)的話，可能會(huì)對(duì)一個(gè)變量如何從某個(gè)類得到繼承的方法感到困惑，用起GIRD來(lái)感到困難。在YAHOO.ext.gird包中，大多數(shù)類是設(shè)計(jì)成為“即插即用plug and play”的,可擴(kuò)展的extended和可自定義的customized,能以最小量的代碼插入輕松到web程序中。

要測(cè)試和創(chuàng)建一個(gè)實(shí)現(xiàn)gird的范例，我決定做一個(gè)簡(jiǎn)單的，只有一頁(yè)的RSS種子采集器RSS Feed Viewer。整個(gè)程序?qū)懥?00行代碼而其中有20行是關(guān)于gird的。這個(gè)范例說(shuō)明了gird的一些典型功能，如Ajax loading,預(yù)處理（preprocessing）和自定義渲染（custom rendering）

這里嵌入了個(gè)迷你型程序（用iframe）

我一步一步手把手帶你進(jìn)入GIRD,還會(huì)支持哪些是關(guān)鍵的地方，哪些不是。

Step 1 創(chuàng)建柱模型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從柱模型中取得某一列的信息。在這個(gè)例子我們調(diào)用一個(gè)默認(rèn)的柱模型（稱DefaultColumnModel）,一個(gè)包含所有相關(guān)的信息的對(duì)象。對(duì)象的屬性如下：

• header: - 表頭
• width: - 寬度
• sortable: - true=可排序
• renderer: - 指定渲染方式。調(diào)用函數(shù)參數(shù)為 (value, rowIndex, columnIndex)，并由函數(shù)返回（return）值來(lái)顯示到單元格cell中。
• sortType: - 指定排序方式。參見(jiàn)文檔資料，有5到6種的轉(zhuǎn)換方式。

除header和width其它為可選的

創(chuàng)建DataModel數(shù)據(jù)模型

var schema = {   tagName: 'item',   id: 'use-index',   fields: ['title', 'pubDate']};this.dataModel = new YAHOO.ext.grid.XMLDataModel(schema);this.dataModel.addPreprocessor(1, parseDate); //列1是日期，先預(yù)處理一下this.dataModel.onLoad.subscribe(this.onLoad, this, true);this.dataModel.onLoadException.subscribe(this.showError, this, true);this.dataModel.setDefaultSort(colModel, 1, 'ASC');

DataModel是GIRD的數(shù)據(jù)來(lái)源。所有在 YAHOO.ext.grid包中的DataModels，都有一系統(tǒng)通知UI改變內(nèi)容的事件。也就是說(shuō)你可以改變model內(nèi)的數(shù)據(jù)，而同時(shí)對(duì)UI自動(dòng)映射。

這個(gè)范例中我們使用XMLDataModel。XMLDataModel提供一個(gè)簡(jiǎn)易的方式來(lái)映射XML文檔與gird之間的結(jié)構(gòu)。你所要做的是寫個(gè)簡(jiǎn)單的schema,讓model知道有哪些column給gird。Schema有下列屬性：

• tagName: - Model會(huì)讀取這一節(jié)點(diǎn)下（tagName）的所有子節(jié)點(diǎn)（items的上一層節(jié)點(diǎn)名稱）；
• 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.

接著我們加入一個(gè)自定義的預(yù)處理器函數(shù)（ a custom preprocessor）。如果只是對(duì)日期排序，不用這個(gè)函數(shù)，也是沒(méi)問(wèn)題的(默認(rèn)它自己也會(huì)排序)。用的好處是效率更高。要注意的是，必須在 數(shù)據(jù)成為model數(shù)據(jù)一部分之前使用這個(gè)函數(shù)。所有RSS FEED和XML實(shí)質(zhì)都是字串符Strings,如果要讓JAVASCRIPT分析，應(yīng)該先要類型轉(zhuǎn)換，我們加入一個(gè)預(yù)處理器來(lái)轉(zhuǎn)換到JAVASCRIPR類型，然后放到DataModel中。

下面說(shuō)說(shuō)DataModel事件和默認(rèn)排序（譯注：好像沒(méi)有排序），較易理解的內(nèi)容。

Step 3: 創(chuàng)建Grid

this.selModel = new YAHOO.ext.grid.SingleSelectionModel();this.selModel.onRowSelect.subscribe(this.showPost, this, true); this.grid = new YAHOO.ext.grid.Grid('feed-grid', this.dataModel, colModel, this.selModel); this.grid.render(); 

首先我們創(chuàng)建一個(gè)SingleSelectionModel。原因是我們想在同一時(shí)間內(nèi)，限制只有一個(gè)選區(qū)是被選中的。如果你不想要這種限制，忽略相關(guān)代碼便可，不指定的情況下gird會(huì)自動(dòng)創(chuàng)建DefaultSelectionModel。

SelectionModel暴露了兩個(gè)事件：onRowSelect 和 onSelectionChange。onRowSelect當(dāng)某一行選中或反選時(shí)觸發(fā)，還有一個(gè)參數(shù)允許你傳入，以便得知哪一個(gè)行被選中或反選。onSelectionChange當(dāng)Gird的選區(qū)發(fā)生改變時(shí)觸發(fā)。兩者最主要的區(qū)別，當(dāng)超過(guò)一行被選中（同一時(shí)間內(nèi)），選區(qū)的每一行會(huì)觸發(fā)各自的事件，而onSelectionChange只會(huì)在多選區(qū)完成選擇后，觸發(fā)一次事件。更多關(guān)于這兩個(gè)事件的細(xì)節(jié)，請(qǐng)參閱文檔。

現(xiàn)在創(chuàng)建我們的Gird對(duì)象。第一個(gè)參數(shù)傳入Grid構(gòu)建函數(shù)的是被渲染的container(又作holder:架子、載體、Grid的承受者,在MVC中大量使用)。Container必須指定高度和寬度，如果沒(méi)有設(shè)置絕對(duì)/相對(duì)的定位,GIRD會(huì)設(shè)置"相對(duì)"。接下的第二和第三的參數(shù)是Step 1、 Step2 的對(duì)象。

然后我們開(kāi)始渲染render()。事件上渲染grid到container。在render()調(diào)用之前，任何的效果如隔行換色、MouseOver換色等等的必須設(shè)置好。盡管數(shù)據(jù)和選區(qū)是事件驅(qū)動(dòng)的，可是一經(jīng)渲染便不能改變。所以這方法只調(diào)用一次。遺憾的是，你不能渲染多個(gè)同是一個(gè)grid的containers，即grid實(shí)例是不可再用的。

Step 4 - 加載一些數(shù)據(jù)

this.dataModel.load('feed.php', {feed: 'http://feeds.feedburner.com/ajaxian'});

創(chuàng)建好XMLDataModel之后，這個(gè)方法方可調(diào)用。我的建議是在所有東西創(chuàng)建好之后調(diào)用該方法，這樣的話，用戶看到GIRD 的UI之前，數(shù)據(jù)已經(jīng)加載好。

load()帶有三個(gè)方法。URL(必選),參數(shù)（可選），回調(diào)（可選）。參數(shù)亦可以經(jīng)過(guò)編碼的encoded字串符 (param1=one¶m2=two) ，或是一個(gè)object(例子便是)。如果是對(duì)象，發(fā)送之前會(huì)將其鍵和值編碼成URI。

然后我們開(kāi)始渲染render()。事件上渲染grid到container。在render()調(diào)用之前，任何的效果如隔行換色、MouseOver換色等等的必須設(shè)置好。盡管數(shù)據(jù)和選區(qū)是事件驅(qū)動(dòng)的，可是一經(jīng)渲染便不能改變。所以這方法只調(diào)用一次。遺憾的是，你不能渲染多個(gè)同是一個(gè)grid的containers，即grid實(shí)例是不可再用的。

如果你已經(jīng)有XML文檔的話，就可以直接加載，不用AJAX。load方法可以多次調(diào)用，替換或追加GRID數(shù)據(jù)。在view.js代碼中你可見(jiàn)到當(dāng)用戶sumbit提交feed form時(shí)的load()調(diào)用。

創(chuàng)建一個(gè)GRID和AJAX加載的代碼行數(shù)不超過(guò)20行，而且是直來(lái)直去不繞彎的。雖然這還未能足以發(fā)揮GIRD全部威力，但希望這小小的例子能幫助你開(kāi)始入門。不要被這些類難到你。大多數(shù)這些類是在內(nèi)部使用的，或者你要自定義GIRD或擴(kuò)展GIRD,都無(wú)需修過(guò)核心。

完整的 feed-viewer.js下載 here. CSS 這里欲查看HTML源，在IFRAME上右鍵，應(yīng)該會(huì)有“查看源代碼”的選項(xiàng)。