原文地址

文章日期：2006/9/26

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

新方法和屬性

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

方法

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

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

• loadPage(pageNum, callback, keepExisting)加載新的一頁。你的回調(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()返回分頁是否被激活；
• getTotalRowCount()返回可用的總記錄數(shù)（the total number of record）XMLDataModel有新的屬性“totalTag”，用來獲取總行數(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ì)算出可用頁數(shù)。

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

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

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

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

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

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

把所有功能組合在一起

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

// 限制選區(qū)只是一行
sm = new YAHOO.ext.grid.SingleSelectionModel();
// 監(jiān)聽選區(qū)改變
sm.addListener('selectionchange', onSelection);

// 創(chuàng)建我們的column model
cm = 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']
});
// 初始化分頁
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();

//分頁工具條，下面將會(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);

分頁工具條 Paging Toolbar

由于分頁的按鈕較為常用，我決定寫一個(gè)簡易的工具條組件來實(shí)現(xiàn)分頁。今次發(fā)布的YAHOO.ext.Toolbar十分簡單，提供了一些方法，用來實(shí)現(xiàn)工具條的分頁。 按鈕的設(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的分頁圖標(biāo)可能就會(huì)采用CSS Sprite這種方式。

下一步做的是。。

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

Jack

最新評(píng)論