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 : "上一页",
				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);
		} 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,
					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;
	}
	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', 'width': '80px'},
		    {'name': '可用资金', 'field': 'available', 'width': '100px'},
		    {'name': '卖冻结', 'field': 'frozenSell', 'width': '100px'},
		    {'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);
		}
	});
}