对YUI扩展的Gird组件 Part-1

原文地址

文章日期：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}）;

在CSS中ENABLE/DISABLED图标：

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

创建带文字的ICON（JS写法如上例）：

toolbar.addButton（{className: "my-button",text: "New Foo",click: createFoo}）;

但CSS写法就有点复杂：

.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