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

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

猜你在找的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橱窗无缝滚动轮播色块碰撞组件销毁文档操作