当前位置 : 主页 > 网页制作 > Dojo >

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

来源：互联网 收集：自由互联 发布时间：2021-06-15
dojo.provide( "navigationGrid" ); dojo.require( "dojox.grid.DataGrid" ); dojo.require( 'dijit.Toolbar' ); dojo.require( "dijit.form.Button" ); dojo.require( "dijit.ToolbarSeparator" ); dojo.declare( "navigationGrid" ,dojox.grid.DataGrid,{ /
  1. dojo.provide("navigationGrid");    
  2.     
  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,    
  12.     // 页码按钮    
  13.     _pageBtns:null,    
  14.     // 导航条对象    
  15.     _naviBar:null,    
  16.     _firstBtn:null,    
  17.     _prviousBtn:null,    
  18.     _nextBtn:null,    
  19.     _lastBtn:null,    
  20.     _pageLoaded:false,    
  21.         
  22.     postCreate: function(){    
  23.         this.inherited(arguments);    
  24.         this._pageBtns = [];    
  25.         this._naviBar = new dijit.Toolbar(    
  26.         {    
  27.             style:"width:100%;text-align:right"    
  28.         });    
  29.         this._firstBtn = new dijit.form.Button({    
  30.             label:"首页"    
  31.             ,disabled:true    
  32.             ,iconClass:"navi-first",    
  33.             onClick:dojo.hitch(this,"_locate",'first')    
  34.         });    
  35.         this._prviousBtn = new dijit.form.Button({    
  36.             label:"上一页"    
  37.             ,disabled:true    
  38.             ,iconClass:"navi-previous",    
  39.             onClick:dojo.hitch(this,"_locate",'pre')    
  40.         });    
  41.         this._nextBtn = new dijit.form.Button({    
  42.             label:"下一页"    
  43.             ,disabled:true    
  44.             ,dir:"rtl"    
  45.             ,iconClass:"navi-next",    
  46.             onClick:dojo.hitch(this,"_locate",'next')    
  47.             });    
  48.         this._lastBtn = new dijit.form.Button({    
  49.             label:"末页"    
  50.             ,disabled:true    
  51.             ,dir:"rtl"    
  52.             ,iconClass:"navi-last",    
  53.             onClick:dojo.hitch(this,"_locate",'last')    
  54.         });    
  55.         this._naviBar.addChild(this._firstBtn);    
  56.         this._naviBar.addChild(new dijit.ToolbarSeparator());    
  57.         this._naviBar.addChild(this._prviousBtn);    
  58.         this._naviBar.addChild(new dijit.ToolbarSeparator());    
  59.         this._naviBar.addChild(this._nextBtn);    
  60.         this._naviBar.addChild(new dijit.ToolbarSeparator());    
  61.         this._naviBar.addChild(this._lastBtn);    
  62.         this._naviBar.placeAt(this.domNode,"after");    
  63.         // this._naviBar.startup();    
  64.     },    
  65.         
  66.     _locate:function(s){    
  67.         switch(s){    
  68.             case 'first':    
  69.                 this._navigate(1);    
  70.                 break;    
  71.             case 'pre':    
  72.                 this._navigate(this.currentPage - 1);    
  73.                 break;    
  74.             case 'next':    
  75.                 this._navigate(this.currentPage + 1);    
  76.                 break;    
  77.             case 'last':    
  78.                 this._navigate(this.totalPage);    
  79.                 break;    
  80.             default:    
  81.                 break;    
  82.         }    
  83.     },    
  84.     _updateBtnStatus:function(pageNo){    
  85.         /*  
  86.          * 更新按钮的状态和样式  
  87.          */    
  88.         if(pageNo > 1){    
  89.             this._firstBtn.set('disabled',false);    
  90.             this._prviousBtn.set('disabled',false);    
  91.         }else{    
  92.             this._firstBtn.set('disabled',true);    
  93.             this._prviousBtn.set('disabled',true);    
  94.         }    
  95.         if(pageNo < this.totalPage){    
  96.             this._nextBtn.set('disabled',false);    
  97.             this._lastBtn.set('disabled',false);    
  98.         }else{    
  99.             this._nextBtn.set('disabled',true);    
  100.             this._lastBtn.set('disabled',true);    
  101.         }    
  102.             
  103.         // 清除当前页的样式    
  104.         /*var currentPageIdx = (this.maxPageNum?this.currentPage%this.maxPageNum:this.maxPageNum) - 1;  
  105.         var pageNoIdx = (this.maxPageNum?pageNo%this.maxPageNum:this.maxPageNum) -1;  
  106.         pageNoIdx = pageNoIdx < 0?this.maxPageNum -1 :pageNoIdx;  
  107.         if(this._pageBtns[currentPageIdx]){  
  108.             this._pageBtns[currentPageIdx].set('class','');  
  109.         }  
  110.         if(this._pageBtns[pageNoIdx]){  
  111.             this._pageBtns[pageNoIdx].set('class','navi-currentPage');  
  112.         }*/    
  113.     },    
  114.     /**  
  115.      * 重新载入当前页面  
  116.     */    
  117.     reload:function(){    
  118.         var row = this._pageToRow(this.currentPage - 1);    
  119.         this._fetch(row,true);    
  120.     },    
  121.     /*  
  122.      * 指向导航页面  
  123.      */    
  124.     _navigate:function(pageNo){    
  125.         if(this.currentPage==pageNo){return}    
  126.         if(pageNo < 1 || pageNo > this.totalPage){return}    
  127.         this._updateBtnStatus(pageNo);    
  128.         var row = this._pageToRow(pageNo - 1);    
  129.         this.currentPage = pageNo;    
  130.         //this._clearData();    
  131.         this._fetch(row,true);    
  132.     },    
  133.     _onFetchComplete:function(items, req){    
  134.         if(!this.scroller){ return; }    
  135.         if(items && items.length > 0){    
  136.             // console.log(items);    
  137.             /*for(var i=0;i<this.rowsPerPage;i++){  
  138.                 if(items.length > i){  
  139.                     this._addItem(items[i],i,true);  
  140.                 }else{  
  141.                     this._addItem({},i,true);  
  142.                 }  
  143.             }*/    
  144.             dojo.forEach(items, function(item, idx){    
  145.                 this._addItem(item, idx, true);    
  146.             }, this);    
  147.                 
  148.             if(this._autoHeight){    
  149.                 this._skipRowRenormalize = true;    
  150.             }    
  151.             this.updateRowCount(items.length);    
  152.             this.updateRows(0, items.length);    
  153.             if(this._autoHeight){    
  154.                 this._skipRowRenormalize = false;    
  155.             }               
  156.             if(req.isRender){    
  157.                 this.setScrollTop(0);    
  158.                 this.postrender();    
  159.             }else if(this._lastScrollTop){    
  160.                 this.setScrollTop(this._lastScrollTop);    
  161.             }    
  162.         }    
  163.         delete this._lastScrollTop;    
  164.         if(!this._isLoaded){    
  165.             this._isLoading = false;    
  166.             this._isLoaded = true;    
  167.         }    
  168.         this._pending_requests[req.start] = false;    
  169.     },    
  170.         
  171.     // 重写父类的方法，初始化导航数字按钮    
  172.     _onFetchBegin:function(size, req){    
  173.         this._updateButtons(size);    
  174.         if(!size){    
  175.             this.views.render();    
  176.             this._resize();    
  177.             this.showMessage(this.noDataMessage);    
  178.             this.focus.initFocusView();    
  179.             return;    
  180.         }else{    
  181.             this.showMessage();    
  182.         }    
  183.             
  184.         if(!this.scroller){ return; }    
  185.         if(this.rowCount != this.rowsPerPage){    
  186.             if(req.isRender){    
  187.                 this.scroller.init(this.rowsPerPage, this.rowsPerPage, this.rowsPerPage);    
  188.                 this.rowCount = this.rowsPerPage;    
  189.                 this._setAutoHeightAttr(this.autoHeight, true);    
  190.                 this._skipRowRenormalize = true;    
  191.                 this.prerender();    
  192.                 this._skipRowRenormalize = false;    
  193.             }else{    
  194.                 this.updateRowCount(this.rowsPerPage);    
  195.             }    
  196.         }    
  197.     },    
  198.         
  199.     _clearData: function(){    
  200.         this.inherited(arguments);    
  201.         this.currentPage=1;    
  202.         this.totalPage=1;    
  203.         dojo.forEach(this._pageBtns,function(btn){    
  204.             btn.destroy();    
  205.         })    
  206.         this._pageBtns=[];    
  207.         if(this._firstBtn){    
  208.             this._firstBtn.set('disabled',false);    
  209.         }    
  210.         if(this._prviousBtn){    
  211.             this._prviousBtn.set('disabled',false);    
  212.         }    
  213.         if(this._nextBtn){    
  214.             this._nextBtn.set('disabled',false);    
  215.         }    
  216.         if(this._lastBtn){    
  217.             this._lastBtn.set('disabled',false);    
  218.         }    
  219.         this._pageLoaded=false;    
  220.     },    
  221.     _updateButtons:function(size){    
  222.         //TODO 先销毁按钮组    
  223.         if(this._pageBtns){    
  224.             dojo.forEach(this._pageBtns,function(element){    
  225.                 element.destroy();    
  226.             })    
  227.             this._pageBtns = [];    
  228.         }    
  229.         // 初始化数字按钮条    
  230.         var totalPage = (this.rowsPerPage ? Math.ceil(size / this.rowsPerPage) : size);    
  231.         var isShow = false;    
  232.         var isFirstRightDot = false;    
  233.         var isFirstLefttDot = false;    
  234.         var beginIndex = 4;    
  235.         for (var i = 1; i <= totalPage; i++){    
  236.             if (i == 1 || i == 2 || i == totalPage || i == totalPage - 1    
  237.                     || i == this.currentPage - 1 || i == this.currentPage - 2    
  238.                     || i == this.currentPage + 1 || i == this.currentPage + 2) {    
  239.                 isShow = true;    
  240.             }    
  241.             if (this.currentPage == i) {    
  242.                 var numBtn = new dijit.form.Button({    
  243.                     label:i,    
  244.                     baseClass:"",    
  245.                     tooltip:"第"+i+"页",    
  246.                     style:{border:"1px solid #A8AAE2",margin:"1px"},    
  247.                     cssStateNodes: {"titleNode":"navi"},    
  248.                     onClick:dojo.hitch(this,"_navigate",i)    
  249.                 });    
  250.                 this._pageBtns.push(numBtn);    
  251.                 numBtn.set('disabled',true);    
  252.                 dojo.addClass(numBtn.domNode,'navi-selected');    
  253.                 this._naviBar.addChild(numBtn,beginIndex);    
  254.                 beginIndex++;    
  255.             } else {    
  256.                 if (isShow == true) {    
  257.                     var numBtn = new dijit.form.Button({    
  258.                         label:i,    
  259.                         baseClass:"",    
  260.                         tooltip:"第"+i+"页",    
  261.                         style:{border:"1px solid #A8AAE2",margin:"1px"},    
  262.                         cssStateNodes: {"titleNode":"navi"},    
  263.                         onClick:dojo.hitch(this,"_navigate",i)    
  264.                     });    
  265.                     this._pageBtns.push(numBtn);    
  266.                     this._naviBar.addChild(numBtn,beginIndex);    
  267.                     beginIndex++;    
  268.                 } else {    
  269.                     if (isFirstLefttDot == false && i == this.currentPage - 3) {    
  270.                         var numBtn = new dijit.form.Button({    
  271.                             label:'...',    
  272.                             baseClass:"",    
  273.                             disabled:true    
  274.                         });    
  275.                         this._pageBtns.push(numBtn);    
  276.                         this._naviBar.addChild(numBtn,beginIndex);    
  277.                         beginIndex++;    
  278.                         isFirstLefttDot = true;    
  279.                     }    
  280.                     if (isFirstRightDot == false && i > this.currentPage) {    
  281.                         var numBtn = new dijit.form.Button({    
  282.                             label:'...',    
  283.                             baseClass:"",    
  284.                             disabled:true    
  285.                         });    
  286.                         this._pageBtns.push(numBtn);    
  287.                         this._naviBar.addChild(numBtn,beginIndex);    
  288.                         beginIndex++;    
  289.                         isFirstRightDot = true;    
  290.                     }    
  291.                 }    
  292.             }    
  293.             isShow = false;    
  294.         }    
  295.                 /*var numBtn = new dijit.form.Button({  
  296.                     label:i+1,  
  297.                     baseClass:"",  
  298.                     tooltip:"第"+(i+1)+"页",  
  299.                     style:{border:"1px solid #A8AAE2",margin:"1px"},  
  300.                     cssStateNodes: {"titleNode":"navi"},  
  301.                     onClick:dojo.hitch(this,"_navigate",i+1)  
  302.                 });  
  303.                 this._pageBtns.push(numBtn);  
  304.                 this._naviBar.addChild(numBtn,i+4);  
  305.             }  
  306.             this._naviBar.addChild(new dijit.form.Button({label:"...",baseClass:"",disabled:true}),btnsNum+3);  
  307.             var lasBtn = new dijit.form.Button({  
  308.                 label:totalPage,  
  309.                 baseClass:"",  
  310.                 tooltip:"第"+(totalPage)+"页",  
  311.                 style:{border:"1px solid #A8AAE2",margin:"1px"},  
  312.                 cssStateNodes: {"titleNode":"navi"},  
  313.                 onClick:dojo.hitch(this,"_navigate",totalPage)  
  314.             })  
  315.             this._pageBtns.push(lasBtn);  
  316.             this._naviBar.addChild(lasBtn,btnsNum+4);  
  317.               
  318.             */    
  319.         this.totalPage = totalPage;    
  320.         // 设置按钮的状态    
  321.         this._updateBtnStatus(this.currentPage);    
  322.         //this._pageLoaded = true;    
  323.     }    
  324. });    
上一篇：dojox.grid.DataGrid 编程篇(一)- 方法与事件
下一篇：Dojo框架：误解与现实
网友评论
相关栏目
最近更新
热门文章