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

接著我們加入一個自定義的預處理器函數（ a custom preprocessor）。如果只是對日期排序，不用這個函數，也是沒問題的(默認它自己也會排序)。用的好處是效率更高。要注意的是，必須在 數據成為model數據一部分之前使用這個函數。所有RSS FEED和XML實質都是字串符Strings,如果要讓JavaSCRIPT分析，應該先要類型轉換，我們加入一個預處理器來轉換到JavaSCRIPR類型，然后放到DataModel中。

下面說說DataModel事件和默認排序（譯注：好像沒有排序），較易理解的內容。

Step 3: 創建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(); 

首先我們創建一個SingleSelectionModel。原因是我們想在同一時間內，限制只有一個選區是被選中的。如果你不想要這種限制，忽略相關代碼便可，不指定的情況下gird會自動創建DefaultSelectionModel。

SelectionModel暴露了兩個事件：onRowSelect 和 onSelectionChange。onRowSelect當某一行選中或反選時觸發，還有一個參數允許你傳入，以便得知哪一個行被選中或反選。onSelectionChange當Gird的選區發生改變時觸發。兩者最主要的區別，當超過一行被選中（同一時間內），選區的每一行會觸發各自的事件，而onSelectionChange只會在多選區完成選擇后，觸發一次事件。更多關于這兩個事件的細節，請參閱文檔。

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

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

Step 4 - 加載一些數據

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

創建好XMLDataModel之后，這個方法方可調用。我的建議是在所有東西創建好之后調用該方法，這樣的話，用戶看到GIRD 的UI之前，數據已經加載好。

load()帶有三個方法。URL(必選),參數（可選），回調（可選）。參數亦可以經過編碼的encoded字串符 (param1=one¶m2=two) ，或是一個object(例子便是)。如果是對象，發送之前會將其鍵和值編碼成URI。

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

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

創建一個GRID和AJAX加載的代碼行數不超過20行，而且是直來直去不繞彎的。雖然這還未能足以發揮GIRD全部威力，但希望這小小的例子能幫助你開始入門。不要被這些類難到你。大多數這些類是在內部使用的，或者你要自定義GIRD或擴展GIRD,都無需修過核心。

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

JavaScript技術：Gird組件 Part-3:范例RSSFeed Viewer，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。