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);
}
});
}
