dojo的grid插件以及对其增加的分页功能

大佬教程收集整理的这篇文章主要介绍了dojo的grid插件以及对其增加的分页功能，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

dojo.provide("navigationGrid");
dojo.require("dojox.grid.DataGrid");
dojo.require('dijit.Toolbar');
dojo.require("dijit.form.button");
dojo.require("dijit.ToolbarSeparator");
/**
 * 拓展grid插件，使其增加分页功能
 * 
 * @author limingxin
 */
dojo.declare("navigationGrid",dojox.grid.DataGrid,{
	// 当前页码号
	currentPage : 1,@R_267_10586@lPage : 1,maxPageNum : 5,// 页码按钮
	_pageBtns : null,// 导航条对象
	_naviBar : null,_firstBtn : null,_prvIoUsBtn : null,_nextBtn : null,_lastBtn : null,_pageLoaded : false,postCreate : function() {
		try {
			this.inherited(arguments);
			this._pageBtns = [];
			if (dijit.byId("myToolbar")) {
				dijit.byId("myToolbar").destroy();
			}
			this._naviBar = new dijit.Toolbar( {
				id : "myToolbar",style : "height:20px;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 : "上一页",iconClass : "navi-prevIoUs",'pre')
			});
			this._nextBtn = new dijit.form.button( {
				label : "下一页",dir : "rtl",iconClass : "navi-next",'next')
			});
			this._lastBtn = new dijit.form.button( {
				label : "末页",iconClass : "navi-last",'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);
		} catch (E) {
			console.info(e + "")
		}
	},_locate : function(s) {
		try {
			switch (s) {
			case 'first':
				this._navigate(1);
				break;
			case 'pre':
				this._navigate(parseInt(this.currentPagE) - 1);
				break;
			case 'next':
				this._navigate(parseInt(this.currentPagE) + 1);
				break;
			case 'last':
				this._navigate(this.@R_267_10586@lPagE);
				break;
			default:
				break;
			}
		} catch (E) {
			console.info(e + "")
		}
	},_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.@R_267_10586@lPagE) {
			this._nextBtn.set('disabled',falsE);
			this._lastBtn.set('disabled',falsE);
		} else {
			this._nextBtn.set('disabled',truE);
			this._lastBtn.set('disabled',truE);
		}
	},/**
	 * 重新载入当前页面
	 */
	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.@R_267_10586@lPagE) {
			return
		}
		this._updateBtnStatus(pageNo);
		//触发分页查询
		query(pageNo,"","1");
	},_onFetchComplete : function(items,req) {
		if (!this.scroller) {
			return;
		}
		if (items && items.length > 0) {
			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.@R_267_10586@lPage = 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 = [];
	}
	/**
	 * 初始化数字按钮条，经过特殊处理，限制了一页显示10，所以除以10， 不满足10的时候说明到了最后一页要补齐
	 */ 
	var @R_267_10586@lPage = Math.round(this.@R_267_10586@lPage/(size<10?'10':sizE));
	var isShow = false;
	var isFirstrightDot = false;
	var isFirstLefttDot = false;
	var beginIndex = 4;
	for ( var i = 1; i <= @R_267_10586@lPage; i++) {
		if (i == 1 || i == 2 || i == @R_267_10586@lPage || i == @R_267_10586@lPage - 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,style : {
						border : "1px solid #A8AAE2",margin : "1px"
					},cssStateNodes : {
						"titleNode" : "navi"
					},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 : '...',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 : '...',beginIndeX);
					beginIndex++;
					isFirstrightDot = true;
				}
			}
		}
		isShow = false;
	}
	this.@R_267_10586@lPage = @R_267_10586@lPage;
	// 设置按钮的状态
	this._updateBtnStatus(this.currentPagE);
}
});

function query(curPage,key,init){
	var userListuRL = "getAccountList.json";
	var param = {'curPage':curPage,'pageSize':10,'searchStr':key,'first':init};
	myAjax('userList',userListuRL,param,function(responsE){
		var json=eval(response["items"]);
		var @R_267_10586@l = eval(response["@R_267_10586@l"]);
		if(dijit.byId("gridopenfile")){
	        dijit.byId("gridopenfile").destroy();    
		}	
		var store = new dojo.data.ItemFileWriteStore({'data':{
		    identifier: "id",items: []
		}});
		for(var i = 0; i < json.length; i++){
		    obj = dojo.mixin({ id: i+1 },json[i]);
		    store.newItem(obj);
		}
		var column = [[
		    {'name': 'ID','field': 'id','width': '220px'},{'name': '姓名','field': 'name','width': '80px'},{'name': '密码','field': 'passwd',{'name': '可用资金','field': 'available','width': '100px'},{'name': '卖冻结','field': 'frozenSell',{'name': '买冻结','field': 'frozenbuy','width': '100px'}
		]];
		var grid = new navigationGrid({
		    id: 'gridopenfile',store: store,structure: column,width: '680px',height: '300px',// 当前页码号  
		    currentPage:curPage,// 总记录数
		    @R_267_10586@lPage:@R_267_10586@l,// 一页最大显示数据量
		    maxPageNum:8,rowSELEctor: '20px'}
		);
		grid.placeAt("userList");
		grid._naviBar.placeAt("userList");//把分页条初始化到表格下方
		grid.startup();
		dojo.style("userList",{width: '750px',height: '300px'});
		grid.resize({w:'750px',h:'300px'})
		grid.update();
		// 绑定单击选择事件
		grid.onSELEcted = function(indeX){
			showMsg(grid.getRowNode(indeX).innerHTML,'',truE);
		}
	});
}


    
        
 

大佬总结

以上是大佬教程为你收集整理的dojo的grid插件以及对其增加的分页功能全部内容，希望文章能够帮你解决dojo的grid插件以及对其增加的分页功能所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。