原文地址

文章日期：2006/9/26

新版的GIRD可以支持遠程數據了。分頁和遠程排序的設置是通俗易懂的，另外一些常用的自定義的參數我會在這篇貼子中說明一下。新論壇的界面（在建設中）就是一個分頁和遠程排序的好例子，而本文的代碼均來自那個例子。

新方法和屬性

利用LoadableDatatModel對象（XMLDataModel和JSONDataModel的父類）實現分頁和遠程排序，有若干種的新方法和屬性。
下列變量“dm”指的是DataModel的實例。

方法

• initPaging(url, pageSize, baseParams) 現實分頁的最重要方法。用該方法，你可以一次過地初始化分頁。有關參數的資料，請參閱下列相關的屬性。例子fourm.js的用法：

  dm.initPaging('topics.php', 20);

• loadPage(pageNum, callback, keepExisting)加載新的一頁。你的回調（callback）將會在數據加載完畢后調用。”keepExisting“決定是否覆蓋當前的數據，或者在已有的數據上添加新數據。例子fourm.js的用法：

  // the grid is ready, load page 1 of topics dm.loadPage(1);

• isPaged()返回分頁是否被激活；
• getTotalRowCount()返回可用的總記錄數（the total number of record）XMLDataModel有新的屬性“totalTag”，用來獲取總行數。總行數由服務器返回生成XML文檔中的“totalTag”那個節點取值，這是一個讓DataModel知道有多少記錄好的方法。如果你想特定某個總數，可以在Gird初始化的時候用getTotalRowCount覆蓋（override）總數 forum.js采用默認的方式:

  dm = new YAHOO.ext.grid.XMLDataModel({     tagName: 'Topic',     totalTag: 'TotalCount',     id: 'id',     fields: ['title', 'author', 'totalPosts', 'lastPost', 'lastPoster'] });

  另外一種辦法：

  dm = new YAHOO.ext.grid.XMLDataModel({     tagName: 'Topic',   	id: 'id',   	fields: ['title', 'author', 'totalPosts', 'lastPost', 'lastPoster']  }); dm.getTotalRowCount = function(){ return 500; //或者是你要的數量 }		

• getPageSize()返回已配置的page size
• getTotalPages() 用page size和total rows計算出可用頁數。

• pageSize - 每頁的記錄數。可在initPaging參數中設置或直接設置。
• pageUrl - 調用的URL,返回數據。可在initPaging參數中設置或直接設置。

// 調用“/data.php”產生所有分頁、排序dm.pageUrl = '/data.php';//這種方式也不錯dm.initPaging('/foo.php', 50);

• remoteSort - 類型：Boolean True值激活遠程排序。如果你使用initPaging()上面的方法，這個會自動被設置成TRUE,否則默認是false。
• baseParams - 類型：Object。 由”鍵、鍵值name/value “組成的對象，會被包含到每個分頁、排序請求。在論壇中我使用了這個傳遞選擇好的forumId到我的數據腳本中：

// 傳入已選擇好forumId的值，產生所有分頁、排序dm.baseParams['forumId'] = forumId;

• paramMap -類型 Object。 model添加分頁、排序的請求，默認的通過下列參數 ：page, pageSize, sortColumn 和 sortDir。如果你不想使用這些參數名字的話可通過map的參數改名。例如：

//"page"改名為"pageNum"myDataModel.paramMap['page'] = 'pageNum';

把所有功能組合在一起

這是一個創建Gird的過程，和分頁代碼：

// 限制選區只是一行sm = new YAHOO.ext.grid.SingleSelectionModel();// 監聽選區改變sm.addListener('selectionchange', onSelection);// 創建我們的column modelcm = new YAHOO.ext.grid.DefaultColumnModel([ {header: "Topic", width: 330},  {header: "Author", width: 100},  {header: "Posts", width: 40},  {header: "Last Post", width: 150},  {header: "Last User", width: 120}]);//這個屬性設置默認的排序，免得在每個column上設置。cm.defaultSortable = true;// 創建數據模型data model。注意"totalTag"條目。它告訴model去尋找該節點下全部的紀錄。dm = new YAHOO.ext.grid.XMLDataModel({  tagName: 'Topic',  totalTag: 'TotalCount',  id: 'id',  fields: ['title', 'author', 'totalPosts', 'lastPost', 'lastPoster']});// 初始化分頁dm.initPaging('topics.php', 20);//設置我們想轉入的附加參數（可作為第三個參數傳入到inirPaing）dm.baseParams = {'forumId': 4};dm.setDefaultSort(cm, 3, 'DESC');//當每次新數據加載后，選擇GIRD的第一行dm.addListener('load', sm.selectFirstRow, sm, true);// 創建grid對象grid = new YAHOO.ext.grid.Grid('topics-grid', dm, cm, sm);grid.render();//分頁工具條，下面將會分析var toolbar = grid.getView().getPageToolbar();toolbar.addSeparator();toolbar.addButton({  className: 'new-topic-button',  text: "New Topic",  click: createTopic});// 當gird準備好，加載話題的第一項dm.loadPage(1);

分頁工具條 Paging Toolbar

由于分頁的按鈕較為常用，我決定寫一個簡易的工具條組件來實現分頁。今次發布的YAHOO.ext.Toolbar十分簡單，提供了一些方法，用來實現工具條的分頁。 按鈕的設置靠CSS完成。圖標ICON應該是16X16標準圖片。如果不是，圖片會被切割。 添加按鈕的例子：

toolbar.addButton({  className: 'my-button',  tooltip: "New Foo",  click: createFoo});

.my-button{ background-image: url(../images/foo.gif);}.ytb-button-disabled .my-button{ background-image: url(../images/foo-disabled.gif);}

toolbar.addButton({  className: 'my-button',  text: "New Foo",  click: createFoo});

.ytoolbar .my-button{ background-image: url('images/foo.gif'); background-position: 0px 0px; background-repeat: no-repeat; padding-left:18px; padding-top:1px; width:auto; display:block;}

要自定義一大堆圖標的工具條，最好就是css sprite。新版GIRD的分頁圖標可能就會采用CSS Sprite這種方式。

下一步做的是。。

下一篇帖子我將會說說grid的拖放，以及兩個gird之間的拖放。

Jack

JavaScript技術：對YUI擴展的Gird組件 Part-1，轉載需保留來源！

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