dojo中 的 grid 的改进:增加分页导航条

1. dojo.provide("navigationGrid");
3. dojo.require("dojox.grid.DataGrid");
4. dojo.require('dijit.Toolbar');
5. dojo.require("dijit.form.Button");
6. dojo.require("dijit.ToolbarSeparator");
7. dojo.declare("navigationGrid",dojox.grid.DataGrid,{
8. //当前页码号
9. currentPage:1,
10. totalPage:1,
11. maxPageNum:5,0); background-color:inherit">//页码按钮
12. _pageBtns:null,
13. //导航条对象
14. _naviBar: _firstBtn: _prviousBtn: _nextBtn: _lastBtn: _pageLoaded:false,108); list-style:decimal-leading-zero outside; color:inherit; line-height:24px; margin:0px!important; padding:0px 3px 0px 10px!important">
15. postCreate:function(){
16. this.inherited(arguments);
17. this._pageBtns=[];
18. this._naviBar=newdijit.Toolbar(
19. {
20. style:"width:100%;text-align:right"
21. });
22. this._firstBtn=newdijit.form.Button({
23. label:"首页"
24. ,disabled:true
25. ,iconClass:"navi-first",108); list-style:decimal-leading-zero outside; color:inherit; line-height:24px; margin:0px!important; padding:0px 3px 0px 10px!important"> onClick:dojo.hitch(this,"_locate",'first')
26. this._prviousBtn= label:"上一页"
27. "navi-previous",'pre')
28. this._nextBtn= label:"下一页"
29. "rtl"
30. "navi-next",248)"> onClick:dojo.hitch('next')
31. });
32. this._lastBtn=newdijit.form.Button({
33. label:"末页"
34. true
35. "rtl"
36. "navi-last",'last')
37. this._naviBar.addChild(this._firstBtn);
38. newdijit.ToolbarSeparator());
39. this._prviousBtn);
40. this._nextBtn);
41. this._lastBtn);
42. this._naviBar.placeAt(this.domNode,"after");
43. //this._naviBar.startup();
44. },248)"> _locate:function(s){
45. switch(s){
46. case'first':
47. this._navigate(1);
48. break;
49. case'pre':
50. this._navigate(this.currentPage-1);
51. break;
52. case'next':
53. this.currentPage+1);
54. case'last':
55. this.totalPage);
56. default:
57. }
58. },248)"> _updateBtnStatus:function(pageNo){
59. /*
60. *更新按钮的状态和样式
61. */
62. if(pageNo>1){
63. this._firstBtn.set('disabled',false);
64. this._prviousBtn.set('disabled',153); font-weight:bold; background-color:inherit">false);
65. }else{
66. true);
67. true);
68. if(pageNo<this.totalPage){
69. this._nextBtn.set('disabled',153); font-weight:bold; background-color:inherit">this._lastBtn.set('disabled',248)"> }else{
70. }
71. //清除当前页的样式
72. /*varcurrentPageIdx=(this.maxPageNum?this.currentPage%this.maxPageNum:this.maxPageNum)-1;
73. varpageNoIdx=(this.maxPageNum?pageNo%this.maxPageNum:this.maxPageNum)-1;
74. pageNoIdx=pageNoIdx<0?this.maxPageNum-1:pageNoIdx;
75. if(this._pageBtns[currentPageIdx]){
76. this._pageBtns[currentPageIdx].set('class','');
77. }
78. if(this._pageBtns[pageNoIdx]){
79. this._pageBtns[pageNoIdx].set('class','navi-currentPage');
80. }*/
81. /**
82. *重新载入当前页面
83. */
84. reload:function(){
85. varrow=this._pageToRow(this._fetch(row,0); background-color:inherit">*指向导航页面
86. _navigate:if(this.currentPage==pageNo){return}
87. if(pageNo<1||pageNo>this.totalPage){return}
88. this._updateBtnStatus(pageNo);
89. this._pageToRow(pageNo-1);
90. this.currentPage=pageNo;
91. //this._clearData();
92. _onFetchComplete:function(items,req){
93. if(!this.scroller){return;}
94. if(items&&items.length>0){
95. //console.log(items);
96. /*for(vari=0;i<this.rowsPerPage;i++){
97. if(items.length>i){
98. this._addItem(items[i],i,true);
99. }else{
100. this._addItem({},0); background-color:inherit">}
101. }*/
102. dojo.forEach(items,function(item,idx){
103. this._addItem(item,idx,153); font-weight:bold; background-color:inherit">this);
104. this._autoHeight){
105. this._skipRowRenormalize=true;
106. this.updateRowCount(items.length);
107. this.updateRows(0,items.length);
108. this._autoHeight){
109. false;
110. if(req.isRender){
111. this.setScrollTop(0);
112. this.postrender();
113. elsethis._lastScrollTop){
114. this.setScrollTop(this._lastScrollTop);
115. deletethis._lastScrollTop;
116. this._isLoaded){
117. this._isLoading=false;
118. this._isLoaded=true;
119. this._pending_requests[req.start]=//重写父类的方法，初始化导航数字按钮
120. _onFetchBegin:function(size,req){
121. this._updateButtons(size);
122. if(!size){
123. this.views.render();
124. this._resize();
125. this.showMessage(this.noDataMessage);
126. this.focus.initFocusView();
127. return;
128. this.showMessage();
129. this.rowCount!=this.rowsPerPage){
130. this.scroller.init(this.rowsPerPage,153); font-weight:bold; background-color:inherit">this.rowsPerPage);
131. this.rowCount=this.rowsPerPage;
132. this._setAutoHeightAttr(this.autoHeight,153); font-weight:bold; background-color:inherit">this.prerender();
133. this.updateRowCount(this.rowsPerPage);
134. _clearData:this.inherited(arguments);
135. this.currentPage=1;
136. this.totalPage=1;
137. dojo.forEach(this._pageBtns,153); font-weight:bold; background-color:inherit">function(btn){
138. btn.destroy();
139. })
140. this._firstBtn){
141. this._prviousBtn){
142. this._nextBtn){
143. this._lastBtn){
144. this._pageLoaded= _updateButtons:function(size){
145. //TODO先销毁按钮组
146. this._pageBtns){
147. dojo.forEach(function(element){
148. element.destroy();
149. })
150. this._pageBtns=[];
151. //初始化数字按钮条
152. vartotalPage=(this.rowsPerPage?Math.ceil(size/this.rowsPerPage):size);
153. varisShow=varisFirstRightDot=varisFirstLefttDot=varbeginIndex=4;
154. for(vari=1;i<=totalPage;i++){
155. if(i==1||i==2||i==totalPage||i==totalPage-1
156. ||i==this.currentPage-1||i==this.currentPage-2
157. ||i==this.currentPage+1||i==this.currentPage+2){
158. isShow=this.currentPage==i){
159. varnumBtn= label:i,248)"> baseClass:"",108); list-style:decimal-leading-zero outside; color:inherit; line-height:24px; margin:0px!important; padding:0px 3px 0px 10px!important"> tooltip:"第"+i+"页",248)"> style:{border:"1pxsolid#A8AAE2",margin:"1px"},108); list-style:decimal-leading-zero outside; color:inherit; line-height:24px; margin:0px!important; padding:0px 3px 0px 10px!important"> cssStateNodes:{"titleNode":"navi"},"_navigate",i)
160. this._pageBtns.push(numBtn);
161. numBtn.set('disabled',248)"> dojo.addClass(numBtn.domNode,'navi-selected');
162. this._naviBar.addChild(numBtn,beginIndex);
163. beginIndex++;
164. if(isShow==true){
165. label:i,108); list-style:decimal-leading-zero outside; color:inherit; line-height:24px; margin:0px!important; padding:0px 3px 0px 10px!important"> baseClass:"",248)"> tooltip:"第"+i+"页",108); list-style:decimal-leading-zero outside; color:inherit; line-height:24px; margin:0px!important; padding:0px 3px 0px 10px!important"> style:{border:"1pxsolid#A8AAE2",248)"> cssStateNodes:{"titleNode":"navi"},i)
166. this._pageBtns.push(numBtn);
167. beginIndex++;
168. if(isFirstLefttDot==false&&i==this.currentPage-3){
169. label:'...',108); list-style:decimal-leading-zero outside; color:inherit; line-height:24px; margin:0px!important; padding:0px 3px 0px 10px!important"> disabled: isFirstLefttDot=if(isFirstRightDot==false&&i>this.currentPage){
170. label:'...',248)"> disabled: isFirstRightDot=/*varnumBtn=newdijit.form.Button({
171. label:i+1,0); background-color:inherit">baseClass:"",0); background-color:inherit">tooltip:"第"+(i+1)+"页",0); background-color:inherit">style:{border:"1pxsolid#A8AAE2",margin:"1px"},0); background-color:inherit">cssStateNodes:{"titleNode":"navi"},0); background-color:inherit">onClick:dojo.hitch(this,"_navigate",i+1)
172. });
173. this._pageBtns.push(numBtn);
174. this._naviBar.addChild(numBtn,i+4);
175. this._naviBar.addChild(newdijit.form.Button({label:"...",baseClass:"",disabled:true}),btnsNum+3);
176. varlasBtn=newdijit.form.Button({
177. label:totalPage,0); background-color:inherit">tooltip:"第"+(totalPage)+"页",totalPage)
178. })
179. this._pageBtns.push(lasBtn);
180. this._naviBar.addChild(lasBtn,btnsNum+4);
182. this.totalPage=totalPage;
183. //设置按钮的状态
184. this._updateBtnStatus(this.currentPage);
185. //this._pageLoaded=true;
186. });

（编辑：李大同）

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