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,totalPage : 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.totalPage);
				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.totalPage) {
			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.totalPage) {
			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.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 = [];
	}
	/**
	 * 初始化数字按钮条，经过特殊处理，限制了一页显示10，所以除以10， 不满足10的时候说明到了最后一页要补齐
	 */ 
	var totalPage = Math.round(this.totalPage/(size<10?'10':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,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.totalPage = totalPage;
	// 设置按钮的状态
	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 total = eval(response["total"]);
		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,// 总记录数
		    totalPage:total,// 一页最大显示数据量
		    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);
		}
	});
}


    
        
 

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!