dojo中的grid的改进

在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方法。使之在分页开始和结束时，重置下角的分页按钮。

?

?

1 楼 ls_autoction 2012-09-12 你写非常独到的地方,是我查过百度,Google中最难懂的地方,很多论坛贴子类似如官方技术开发向导,更有人是抄来抄去,我是一只菜鸟