EXT(YUI-EXT) Paging Grid 詳細解說 （一）

UI 1.0 alpha2 已經可以搶先與預覽了。

而令企業應用中 較為關注的Paging Grid 有了較大的改變。

在 0.33 中。已經出現了Paging Grid , Jack 沒把 Paging Grid 加入到他的Example中，而是在Blog裡稍微展示了一下，可見其早有打算，，而一直沒發行的0.40也把JSON 和 XML 合并了成了XHR.... 看來Jack早有打算。

先看下早期的 0.33 實作吧。先拿一個我實作過的例子

示例如下：

var CutTarget = { loadData : function(){ var schema = {root: 'cutTargets', id: 'nothing', fields: ['USER_NAME', 'ACCESS_NUMBER','PROD_SPEC','DESC','DEMO']}; var dataModel = new YAHOO.ext.grid.JSONDataModel(schema); dataModel.getTotalRowCount = function(){ return 500; // or whatever your count is } dataModel.initPaging('../cutTask.do?method=findCutObject', 20); dataModel.pageUrl ='../cutTask.do?method=findCutObject'; dataModel.baseParams['cutTypeId'] = 1; // the DefaultColumnModel expects this blob to define columns. It can be extended to provide // custom or reusable ColumnModels var colModel = new YAHOO.ext.grid.DefaultColumnModel([ {header: "使用者名稱", width: 200, sortable: true, sortType: sort.asUCString}, {header: "号碼", width: 75, sortable: true, sortType: sort.asUCString}, {header: "産品規格", width: 75, sortable: true, sortType: sort.asUCString}, {header: "使用者詳情", width: 75, sortable: true, sortType: sort.asUCString}, {header: "描述", width: 85, sortable: true,renderer: italic} ]); // sortTypes provide support for custom sorting comparison functions // not needed for this table but here for demonstration var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes; // create the Grid var grid = new YAHOO.ext.grid.Grid('cutTarget-grid', dataModel, colModel); grid.render(); var url ="../cutTask.do?method=findCutObject"; dataModel.loadPage(1); } };

這裡實作較為煩瑣。

大緻步驟是：

格式設定

var schema = {root:xxx,id:xxxx,fields:[xxxxx]}

加入帶schema 的格式。 并使用dataModel 作為資料模型的主要類。 設定總資料量，初始參數，初始頁面大小等等

var dataModel = new YAHOO.ext.grid.JSONDataModel(schema);

建立colModel 單元格模型

var colModel = new YAHOO.ext.grid.DefaultColumnModel([xxxx]);

排序

var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

DataGrid

var grid = new YAHOO.ext.grid.Grid('cutTarget-grid', dataModel, colModel);

将資料加載到 cutTarget-grid html上的元素中去。

最後由dataModel,完成loadpage ，這樣，在事件的觸發下，遠端的分頁資料就到到你的頁面上了。