原文地址

文章日期：2006/9/26

新版的GIRD可以支持遠(yuǎn)程數(shù)據(jù)了。分頁(yè)和遠(yuǎn)程排序的設(shè)置是通俗易懂的，另外一些常用的自定義的參數(shù)我會(huì)在這篇貼子中說(shuō)明一下。新論壇的界面（在建設(shè)中）就是一個(gè)分頁(yè)和遠(yuǎn)程排序的好例子，而本文的代碼均來(lái)自那個(gè)例子。

新方法和屬性

利用LoadableDatatModel對(duì)象（XMLDataModel和JSONDataModel的父類(lèi)）實(shí)現(xiàn)分頁(yè)和遠(yuǎn)程排序，有若干種的新方法和屬性。
下列變量“dm”指的是DataModel的實(shí)例。

方法

• initPaging(url, pageSize, baseParams) 現(xiàn)實(shí)分頁(yè)的最重要方法。用該方法，你可以一次過(guò)地初始化分頁(yè)。有關(guān)參數(shù)的資料，請(qǐng)參閱下列相關(guān)的屬性。例子fourm.js的用法：

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

• loadPage(pageNum, callback, keepExisting)加載新的一頁(yè)。你的回調(diào)（callback）將會(huì)在數(shù)據(jù)加載完畢后調(diào)用?！眐eepExisting“決定是否覆蓋當(dāng)前的數(shù)據(jù)，或者在已有的數(shù)據(jù)上添加新數(shù)據(jù)。例子fourm.js的用法：

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

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

  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; //或者是你要的數(shù)量 }		

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

• pageSize - 每頁(yè)的記錄數(shù)?？稍趇nitPaging參數(shù)中設(shè)置或直接設(shè)置。
• pageUrl - 調(diào)用的URL,返回?cái)?shù)據(jù)?？稍趇nitPaging參數(shù)中設(shè)置或直接設(shè)置。

// 調(diào)用“/data.php”產(chǎn)生所有分頁(yè)、排序dm.pageUrl = '/data.php';//這種方式也不錯(cuò)dm.initPaging('/foo.php', 50);

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

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

• paramMap -類(lèi)型 Object。 model添加分頁(yè)、排序的請(qǐng)求，默認(rèn)的通過(guò)下列參數(shù) ：page, pageSize, sortColumn 和 sortDir。如果你不想使用這些參數(shù)名字的話可通過(guò)map的參數(shù)改名。例如：

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

把所有功能組合在一起

這是一個(gè)創(chuàng)建Gird的過(guò)程，和分頁(yè)代碼：

// 限制選區(qū)只是一行sm = new YAHOO.ext.grid.SingleSelectionModel();// 監(jiān)聽(tīng)選區(qū)改變sm.addListener('selectionchange', onSelection);// 創(chuàng)建我們的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}]);//這個(gè)屬性設(shè)置默認(rèn)的排序，免得在每個(gè)column上設(shè)置。cm.defaultSortable = true;// 創(chuàng)建數(shù)據(jù)模型data model。注意"totalTag"條目。它告訴model去尋找該節(jié)點(diǎn)下全部的紀(jì)錄。dm = new YAHOO.ext.grid.XMLDataModel({  tagName: 'Topic',  totalTag: 'TotalCount',  id: 'id',  fields: ['title', 'author', 'totalPosts', 'lastPost', 'lastPoster']});// 初始化分頁(yè)dm.initPaging('topics.php', 20);//設(shè)置我們想轉(zhuǎn)入的附加參數(shù)（可作為第三個(gè)參數(shù)傳入到inirPaing）dm.baseParams = {'forumId': 4};dm.setDefaultSort(cm, 3, 'DESC');//當(dāng)每次新數(shù)據(jù)加載后，選擇GIRD的第一行dm.addListener('load', sm.selectFirstRow, sm, true);// 創(chuàng)建grid對(duì)象grid = new YAHOO.ext.grid.Grid('topics-grid', dm, cm, sm);grid.render();//分頁(yè)工具條，下面將會(huì)分析var toolbar = grid.getView().getPageToolbar();toolbar.addSeparator();toolbar.addButton({  className: 'new-topic-button',  text: "New Topic",  click: createTopic});// 當(dāng)gird準(zhǔn)備好，加載話題的第一項(xiàng)dm.loadPage(1);

分頁(yè)工具條 Paging Toolbar

由于分頁(yè)的按鈕較為常用，我決定寫(xiě)一個(gè)簡(jiǎn)易的工具條組件來(lái)實(shí)現(xiàn)分頁(yè)。今次發(fā)布的YAHOO.ext.Toolbar十分簡(jiǎn)單，提供了一些方法，用來(lái)實(shí)現(xiàn)工具條的分頁(yè)。 按鈕的設(shè)置靠CSS完成。圖標(biāo)ICON應(yīng)該是16X16標(biāo)準(zhǔn)圖片。如果不是，圖片會(huì)被切割。 添加按鈕的例子：

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;}

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

下一步做的是。。

下一篇帖子我將會(huì)說(shuō)說(shuō)grid的拖放，以及兩個(gè)gird之間的拖放。

Jack

JavaScript技術(shù)：對(duì)YUI擴(kuò)展的Gird組件 Part-1，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。