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