UI 1.0 alpha2 已經可以搶先與預覽了。
而令企業應用中 較爲關注的Paging Grid 有了較大的改變。
在 0.33 中。已經出現了Paging Grid , Jack 沒把 Paging Grid 加入到他的Example中,而是在Blog裏稍微展示了一下,可見其早有打算,,而一直沒發行的0.40也把JSON 和 XML 合併了成了XHR.... 看來Jack早有打算。
先看下早期的 0.33 實現吧。先拿一個我實現過的例子
示例如下:
這裏實現較爲煩瑣。
大致步驟是:
格式設定
加入帶schema 的格式。 並使用dataModel 作爲數據模型的主控類。 設定總數據量,初始參數,初始頁面大小等等
建立colModel 單元格模型
排序
DataGrid
將數據加載到 cutTarget-grid html上的元素中去。
最後由dataModel,完成loadpage ,這樣,在事件的觸發下,遠程的分頁數據就到到你的頁面上了。
而令企業應用中 較爲關注的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 ,這樣,在事件的觸發下,遠程的分頁數據就到到你的頁面上了。