在dojo中有個強大而實用的元件Grid，但是在實際使用的時候，它有以下一些小問題。
沒有相應的pagenavigation元件，它的分頁機制是在滑鼠向下滾動時自動請求後端擷取資料的，這樣做，在資料量比較大(上萬條)的時候，用戶端儲存了大量的資料，容易造成用戶端卡死現象。
對于這兩個問題，針對dojo的grid做了以下擴充：
dojo.provide("navigationGrid");
dojo.require("dojox.grid.DataGrid");
dojo.require('dijit.Toolbar');
dojo.require("dijit.form.Button");
dojo.require("dijit.ToolbarSeparator");
dojo.declare("navigationGrid", dojox.grid.DataGrid, {
// 目前頁碼号
currentPage:1,
totalPage:1,
maxPageNum:5,
// 頁碼按鈕
_pageBtns:null,
// 導覽列對象
_naviBar:null,
_firstBtn:null,
_prviousBtn:null,
_nextBtn:null,
_lastBtn:null,
_pageLoaded:false,
postCreate: function(){
this.inherited(arguments);
this._pageBtns = [];
this._naviBar = new dijit.Toolbar(
{
style:"width:100%;text-align:right"
});
this._firstBtn = new dijit.form.Button({
label:"首頁"
,disabled:true
,iconClass:"navi-first",
onClick:dojo.hitch(this,"_locate",'first')
});
this._prviousBtn = new dijit.form.Button({
label:"上一頁"
,disabled:true
,iconClass:"navi-previous",
onClick:dojo.hitch(this,"_locate",'pre')
});
this._nextBtn = new dijit.form.Button({
label:"下一頁"
,disabled:true
,dir:"rtl"
,iconClass:"navi-next",
onClick:dojo.hitch(this,"_locate",'next')
});
this._lastBtn = new dijit.form.Button({
label:"末頁"
,disabled:true
,dir:"rtl"
,iconClass:"navi-last",
onClick:dojo.hitch(this,"_locate",'last')
});
this._naviBar.addChild(this._firstBtn);
this._naviBar.addChild(new dijit.ToolbarSeparator());
this._naviBar.addChild(this._prviousBtn);
this._naviBar.addChild(new dijit.ToolbarSeparator());
this._naviBar.addChild(this._nextBtn);
this._naviBar.addChild(new dijit.ToolbarSeparator());
this._naviBar.addChild(this._lastBtn);
this._naviBar.placeAt(this.domNode,"after");
// this._naviBar.startup();
},
_locate:function(s){
switch(s){
case 'first':
this._navigate(1);
break;
case 'pre':
this._navigate(this.currentPage - 1);
break;
case 'next':
this._navigate(this.currentPage + 1);
break;
case 'last':
this._navigate(this.totalPage);
break;
default:
break;
}
},
_updateBtnStatus:function(pageNo){
/*
* 更新按鈕的狀态和樣式
*/
if(pageNo > 1){
this._firstBtn.set('disabled',false);
this._prviousBtn.set('disabled',false);
}else{
this._firstBtn.set('disabled',true);
this._prviousBtn.set('disabled',true);
}
if(pageNo < this.totalPage){
this._nextBtn.set('disabled',false);
this._lastBtn.set('disabled',false);
}else{
this._nextBtn.set('disabled',true);
this._lastBtn.set('disabled',true);
}
// 清除目前頁的樣式
/*var currentPageIdx = (this.maxPageNum?this.currentPage%this.maxPageNum:this.maxPageNum) - 1;
var pageNoIdx = (this.maxPageNum?pageNo%this.maxPageNum:this.maxPageNum) -1;
pageNoIdx = pageNoIdx < 0?this.maxPageNum -1 :pageNoIdx;
if(this._pageBtns[currentPageIdx]){
this._pageBtns[currentPageIdx].set('class','');
}
if(this._pageBtns[pageNoIdx]){
this._pageBtns[pageNoIdx].set('class','navi-currentPage');
}*/
},
/**
* 重新載入目前頁面
*/
reload:function(){
var row = this._pageToRow(this.currentPage - 1);
this._fetch(row,true);
},
/*
* 指向導航頁面
*/
_navigate:function(pageNo){
if(this.currentPage==pageNo){return}
if(pageNo < 1 || pageNo > this.totalPage){return}
this._updateBtnStatus(pageNo);
var row = this._pageToRow(pageNo - 1);
this.currentPage = pageNo;
//this._clearData();
this._fetch(row,true);
},
_onFetchComplete:function(items, req){
if(!this.scroller){ return; }
if(items && items.length > 0){
// console.log(items);
/*for(var i=0;i<this.rowsPerPage;i++){
if(items.length > i){
this._addItem(items[i],i,true);
}else{
this._addItem({},i,true);
}
}*/
dojo.forEach(items, function(item, idx){
this._addItem(item, idx, true);
}, this);
if(this._autoHeight){
this._skipRowRenormalize = true;
}
this.updateRowCount(items.length);
this.updateRows(0, items.length);
if(this._autoHeight){
this._skipRowRenormalize = false;
}
if(req.isRender){
this.setScrollTop(0);
this.postrender();
}else if(this._lastScrollTop){
this.setScrollTop(this._lastScrollTop);
}
}
delete this._lastScrollTop;
if(!this._isLoaded){
this._isLoading = false;
this._isLoaded = true;
}
this._pending_requests[req.start] = false;
},
// 重寫父類的方法，初始化導航數字按鈕
_onFetchBegin:function(size, req){
this._updateButtons(size);
if(!size){
this.views.render();
this._resize();
this.showMessage(this.noDataMessage);
this.focus.initFocusView();
return;
}else{
this.showMessage();
}
if(!this.scroller){ return; }
if(this.rowCount != this.rowsPerPage){
if(req.isRender){
this.scroller.init(this.rowsPerPage, this.rowsPerPage, this.rowsPerPage);
this.rowCount = this.rowsPerPage;
this._setAutoHeightAttr(this.autoHeight, true);
this._skipRowRenormalize = true;
this.prerender();
this._skipRowRenormalize = false;
}else{
this.updateRowCount(this.rowsPerPage);
}
}
},
_clearData: function(){
this.inherited(arguments);
this.currentPage=1;
this.totalPage=1;
dojo.forEach(this._pageBtns,function(btn){
btn.destroy();
})
this._pageBtns=[];
if(this._firstBtn){
this._firstBtn.set('disabled',false);
}
if(this._prviousBtn){
this._prviousBtn.set('disabled',false);
}
if(this._nextBtn){
this._nextBtn.set('disabled',false);
}
if(this._lastBtn){
this._lastBtn.set('disabled',false);
}
this._pageLoaded=false;
},
_updateButtons:function(size){
//TODO 先銷毀按鈕組
if(this._pageBtns){
dojo.forEach(this._pageBtns,function(element){
element.destroy();
})
this._pageBtns = [];
}
// 初始化數字按鈕條
var totalPage = (this.rowsPerPage ? Math.ceil(size / this.rowsPerPage) : size);
var isShow = false;
var isFirstRightDot = false;
var isFirstLefttDot = false;
var beginIndex = 4;
for (var i = 1; i <= totalPage; i++){
if (i == 1 || i == 2 || i == totalPage || i == totalPage - 1
|| i == this.currentPage - 1 || i == this.currentPage - 2
|| i == this.currentPage + 1 || i == this.currentPage + 2) {
isShow = true;
}
if (this.currentPage == i) {
var numBtn = new dijit.form.Button({
label:i,
baseClass:"",
tooltip:"第"+i+"頁",
style:{border:"1px solid #A8AAE2",margin:"1px"},
cssStateNodes: {"titleNode":"navi"},
onClick:dojo.hitch(this,"_navigate",i)
});
this._pageBtns.push(numBtn);
numBtn.set('disabled',true);
dojo.addClass(numBtn.domNode,'navi-selected');
this._naviBar.addChild(numBtn,beginIndex);
beginIndex++;
} else {
if (isShow == true) {
var numBtn = new dijit.form.Button({
label:i,
baseClass:"",
tooltip:"第"+i+"頁",
style:{border:"1px solid #A8AAE2",margin:"1px"},
cssStateNodes: {"titleNode":"navi"},
onClick:dojo.hitch(this,"_navigate",i)
});
this._pageBtns.push(numBtn);
this._naviBar.addChild(numBtn,beginIndex);
beginIndex++;
} else {
if (isFirstLefttDot == false && i == this.currentPage - 3) {
var numBtn = new dijit.form.Button({
label:'...',
baseClass:"",
disabled:true
});
this._pageBtns.push(numBtn);
this._naviBar.addChild(numBtn,beginIndex);
beginIndex++;
isFirstLefttDot = true;
}
if (isFirstRightDot == false && i > this.currentPage) {
var numBtn = new dijit.form.Button({
label:'...',
baseClass:"",
disabled:true
});
this._pageBtns.push(numBtn);
this._naviBar.addChild(numBtn,beginIndex);
beginIndex++;
isFirstRightDot = true;
}
}
}
isShow = false;
}
/*var numBtn = new dijit.form.Button({
label:i+1,
baseClass:"",
tooltip:"第"+(i+1)+"頁",
style:{border:"1px solid #A8AAE2",margin:"1px"},
cssStateNodes: {"titleNode":"navi"},
onClick:dojo.hitch(this,"_navigate",i+1)
});
this._pageBtns.push(numBtn);
this._naviBar.addChild(numBtn,i+4);
}
this._naviBar.addChild(new dijit.form.Button({label:"...",baseClass:"",disabled:true}),btnsNum+3);
var lasBtn = new dijit.form.Button({
label:totalPage,
baseClass:"",
tooltip:"第"+(totalPage)+"頁",
style:{border:"1px solid #A8AAE2",margin:"1px"},
cssStateNodes: {"titleNode":"navi"},
onClick:dojo.hitch(this,"_navigate",totalPage)
})
this._pageBtns.push(lasBtn);
this._naviBar.addChild(lasBtn,btnsNum+4);
*/
this.totalPage = totalPage;
// 設定按鈕的狀态
this._updateBtnStatus(this.currentPage);
//this._pageLoaded = true;
}
}); 重寫了它的_onFetchComplete和_onFetchBegin方法。使之在分頁開始和結束時，重置下角的分頁按鈕。
![React中setState的怪異行為 ——setState沒有即時生效[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)