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

Dojo 前端之家
前端之家收集整理的这篇文章主要介绍了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. });

猜你在找的Dojo相关文章

dojo/Deferred类和dojo/promise类的使用
参考博客：https://blog.csdn.net/blog_szhao/article/details/50220181 　　　       ...
设置查询以搜索dojo数据网格的所有字段
我有一个包含多个字段的Dojo DataGrid.我目前正在设置查询一次搜索一个字段,如下所示： gr...
dojo – 为JsonRestStore设置HTTP Accept标头
我正在使用JsonRestStore,但想为它添加一个自定义Accept标头.最好的方法是什么？ 这与diji...
dojo.query不适用于包含波形符(〜)字符的属性选择器
我需要选择一个给定其URL的链接节点.使用属性选择器的效果非常好,除了少数几个url有tilda的...
带有JSONREST问题的Dojo增强型网格
我正在尝试使用Dojo JSONREST的增强网格,我遇到了一些问题. 我一直在寻找一些例子,但无法弄...
什么时候会发布Dojo 2.0？
我使用过Dojo 1.0,但我有一些与版本相关的问题： >什么时候会发布Dojo 2.0？ >也是最...
dojo中的setSelected()DataGrid使前一个选择活动,即使对于带有selectionMode =“single”的网格也是如此
我有一个dojox.grid.DataGrid,我想以编程方式选择一行.我正在使用setSelected()这样做,它第...
dojo – 如何从dijit.form.Select中获取选项文本？
我的页面上有一个dijit.form.Select： <c:set var="qualId" value="${prev...
如何检查dojo.datagrid加载完成？
参见英文答案 > How to determine if a dojo grid has finished loading?       ...
dojo – 扩展dijit.Tree中的所有节点
有没有一种很好的方法来扩展/关闭dijit.Tree中的所有可扩展节点？ 对于那些寻找答案的人,请...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作