From d064bd35040c525f4d25709a55de4a3231d1e5cf Mon Sep 17 00:00:00 2001 From: Max Guglielmi Date: Sun, 11 Jan 2015 21:22:52 +1100 Subject: [PATCH] Continued paging module --- dist/filtergrid.css | 2 +- src-es6/modules/gridLayout.js | 104 +-- src-es6/modules/paging.js | 532 +++++++++-- src/array.js.map | 2 +- src/cookie.js.map | 2 +- src/core.js | 1299 +++++++++++++------------- src/date.js.map | 2 +- src/dom.js.map | 2 +- src/end.frag | 4 + src/event.js.map | 2 +- src/helpers.js.map | 2 +- src/index.html | 4 +- src/modules/alternateRows.js | 138 +-- src/modules/alternateRows.js.map | 2 +- src/modules/colOps.js | 394 ++++---- src/modules/colOps.js.map | 2 +- src/modules/gridLayout.js | 600 ++++++------ src/modules/gridLayout.js.map | 2 +- src/modules/highlightKeywords.js | 142 +-- src/modules/highlightKeywords.js.map | 2 +- src/modules/loader.js | 72 +- src/modules/loader.js.map | 2 +- src/modules/paging.js | 705 +++++++++++--- src/modules/paging.js.map | 2 +- src/modules/rowsCounter.js | 188 ++-- src/modules/rowsCounter.js.map | 2 +- src/modules/store.js | 104 ++- src/modules/store.js.map | 2 +- src/start.frag | 10 + src/string.js.map | 2 +- src/types.js.map | 2 +- 31 files changed, 2557 insertions(+), 1773 deletions(-) create mode 100644 src/end.frag create mode 100644 src/start.frag diff --git a/dist/filtergrid.css b/dist/filtergrid.css index 56703c87..e8347f31 100644 --- a/dist/filtergrid.css +++ b/dist/filtergrid.css @@ -1,6 +1,6 @@ /*------------------------------------------------------------------------ - TableFilter stylesheet by Max Guglielmi - - (build date: Tue Dec 16 2014 03:26:44) + - (build date: Sun Jan 11 2015 20:01:16) - Edit below for your projects' needs ------------------------------------------------------------------------*/ diff --git a/src-es6/modules/gridLayout.js b/src-es6/modules/gridLayout.js index c841f052..ae17aaef 100644 --- a/src-es6/modules/gridLayout.js +++ b/src-es6/modules/gridLayout.js @@ -191,9 +191,6 @@ export class GridLayout{ this.headTblCont.style.width = this.tblCont.clientWidth+'px'; tbl.style.width = ''; - // if(Helpers.isIE()){ - // this.headTbl.style.width = ''; - // } //scroll synchronisation var o = this; @@ -258,81 +255,30 @@ export class GridLayout{ //Cols generation for all browsers excepted IE<=7 o.tblHasColTag = Dom.tag(tbl, 'col').length > 0 ? true : false; - // if(!Helpers.isIE()){ - //Col elements are enough to keep column widths after sorting and - //filtering - var createColTags = function(o){ - if(!o){ - return; - } - for(var k=(tf.nbCells-1); k>=0; k--){ - var col = Dom.create('col', ['id', tf.id+'_col_'+k]); - tbl.firstChild.parentNode.insertBefore(col, tbl.firstChild); - col.style.width = tf.colWidth[k]; - o.gridColElms[k] = col; - } - o.tblHasColTag = true; - }; - if(!o.tblHasColTag){ - createColTags(o); - } else { - var cols = Dom.tag(tbl, 'col'); - for(var ii=0; ii0 ){ - // r = tbody[0].insertRow(0); - // } else{ - // r = tbl.insertRow(0); - // } - // r.style.height = '0px'; - // for(var x=0; x0){ - // tbody[0].moveRow(o.leadColWidthsRow.rowIndex, 0); - // } else { - // tbl.moveRow(o.leadColWidthsRow.rowIndex, 0); - // } - // } - // if(afterSortFn){ - // afterSortFn.call(null, o, colIndex); - // } - // }; - // } + for(var k=(tf.nbCells-1); k>=0; k--){ + var col = Dom.create('col', ['id', tf.id+'_col_'+k]); + tbl.firstChild.parentNode.insertBefore(col, tbl.firstChild); + col.style.width = tf.colWidth[k]; + o.gridColElms[k] = col; + } + o.tblHasColTag = true; + }; + if(!o.tblHasColTag){ + createColTags(o); + } else { + var cols = Dom.tag(tbl, 'col'); + for(var ii=0; ii0 ? - o.Evt._Paging.slcIndex()-1 : o.Evt._Paging.nbOpts(); - o.ChangePage(prevIndex); + var prevIndex = evt._Paging.slcIndex()>0 ? + evt._Paging.slcIndex()-1 : evt._Paging.nbOpts(); + o.changePage(prevIndex); }, last: function(){ - if(o.Evt._Paging.lastEvt){ - o.Evt._Paging.lastEvt(); + if(evt._Paging.lastEvt){ + evt._Paging.lastEvt(); } - o.ChangePage(o.Evt._Paging.nbOpts()); + o.changePage(evt._Paging.nbOpts()); }, first: function(){ - if(o.Evt._Paging.firstEvt){ - o.Evt._Paging.firstEvt(); + if(evt._Paging.firstEvt){ + evt._Paging.firstEvt(); } - o.ChangePage(0); + o.changePage(0); }, _detectKey: function(e){ var evt = e || global.event; if(evt){ - var key = o.Evt.getKeyCode(e); + var key = evt.getKeyCode(e); if(key===13){ - if(o.sorted){ - o.Filter(); - o.ChangePage(o.Evt._Paging.slcIndex()); + if(tf.sorted){ + tf.Filter(); + o.changePage(evt._Paging.slcIndex()); } else{ - o.ChangePage(); + o.changePage(); } this.blur(); } @@ -148,28 +150,29 @@ export class Paging{ lastEvt: null, firstEvt: null }; - } - + } + this.tf = tf; } - - buildUI(){ - + + init(){ var slcPages; var tf = this.tf; var evt = tf.Evt; // Paging drop-down list selector if(this.pageSelectorType === tf.fltTypeSlc){ - slcPages = dom.create( + slcPages = Dom.create( tf.fltTypeSlc, ['id', tf.prfxSlcPages+tf.id]); slcPages.className = this.pgSlcCssClass; + console.log(evt); slcPages.onchange = evt._OnSlcPagesChange; + //slcPages.onchange = function(){ alert('hello'); } } // Paging input selector if(this.pageSelectorType === tf.fltTypeInp){ - slcPages = dom.create( + slcPages = Dom.create( tf.fltTypeInp, ['id', tf.prfxSlcPages+tf.id], ['value', tf.currentPageNb] @@ -179,23 +182,24 @@ export class Paging{ } // btns containers - var btnNextSpan = dom.create( - 'span',['id',this.prfxBtnNextSpan+tf.id]); - var btnPrevSpan = dom.create( - 'span',['id',this.prfxBtnPrevSpan+tf.id]); - var btnLastSpan = dom.create( - 'span',['id',this.prfxBtnLastSpan+tf.id]); - var btnFirstSpan = dom.create( - 'span',['id',this.prfxBtnFirstSpan+tf.id]); + var btnNextSpan = Dom.create( + 'span',['id', tf.prfxBtnNextSpan+tf.id]); + var btnPrevSpan = Dom.create( + 'span',['id', tf.prfxBtnPrevSpan+tf.id]); + var btnLastSpan = Dom.create( + 'span',['id', tf.prfxBtnLastSpan+tf.id]); + var btnFirstSpan = Dom.create( + 'span',['id', tf.prfxBtnFirstSpan+tf.id]); if(this.hasPagingBtns){ // Next button if(!this.btnNextPageHtml){ - var btn_next = dom.create( - tf.fltTypeInp,['id',tf.prfxBtnNext+tf.id], - ['type','button'], - ['value',this.btnNextPageText], - ['title','Next'] + var btn_next = Dom.create( + tf.fltTypeInp, + ['id', tf.prfxBtnNext+tf.id], + ['type', 'button'], + ['value', this.btnNextPageText], + ['title', 'Next'] ); btn_next.className = this.btnPageCssClass; btn_next.onclick = evt._Paging.next; @@ -206,7 +210,7 @@ export class Paging{ } // Previous button if(!this.btnPrevPageHtml){ - var btn_prev = dom.create( + var btn_prev = Dom.create( tf.fltTypeInp, ['id',tf.prfxBtnPrev+tf.id], ['type','button'], @@ -222,7 +226,7 @@ export class Paging{ } // Last button if(!this.btnLastPageHtml){ - var btn_last = dom.create( + var btn_last = Dom.create( tf.fltTypeInp, ['id',tf.prfxBtnLast+tf.id], ['type','button'], @@ -238,7 +242,7 @@ export class Paging{ } // First button if(!this.btnFirstPageHtml){ - var btn_first = dom.create( + var btn_first = Dom.create( tf.fltTypeInp, ['id',tf.prfxBtnFirst+tf.id], ['type','button'], @@ -258,7 +262,7 @@ export class Paging{ if(!this.pagingTgtId){ tf.SetTopDiv(); } - var targetEl = !this.pagingTgtId ? tf.mDiv : dom.id(this.pagingTgtId); + var targetEl = !this.pagingTgtId ? tf.mDiv : Dom.id(this.pagingTgtId); /*** if paging previously removed this prevents IE memory leak with @@ -273,34 +277,212 @@ export class Paging{ targetEl.appendChild(btnFirstSpan); targetEl.appendChild(btnPrevSpan); - var pgBeforeSpan = dom.create( + var pgBeforeSpan = Dom.create( 'span',['id', tf.prfxPgBeforeSpan+tf.id] ); - pgBeforeSpan.appendChild( dom.text(this.pageText) ); + pgBeforeSpan.appendChild( Dom.text(this.pageText) ); pgBeforeSpan.className = this.nbPgSpanCssClass; targetEl.appendChild(pgBeforeSpan); targetEl.appendChild(slcPages); - var pgAfterSpan = dom.create( + var pgAfterSpan = Dom.create( 'span',['id', tf.prfxPgAfterSpan+tf.id]); - pgAfterSpan.appendChild( dom.text(this.ofText) ); + pgAfterSpan.appendChild( Dom.text(this.ofText) ); pgAfterSpan.className = this.nbPgSpanCssClass; targetEl.appendChild(pgAfterSpan); - var pgspan = dom.create( 'span',['id', tf.prfxPgSpan+tf.id] ); + var pgspan = Dom.create( 'span',['id', tf.prfxPgSpan+tf.id] ); pgspan.className = this.nbPgSpanCssClass; - pgspan.appendChild( dom.text(' '+this.nbPages+' ') ); + pgspan.appendChild( Dom.text(' '+this.nbPages+' ') ); targetEl.appendChild(pgspan); targetEl.appendChild(btnNextSpan); targetEl.appendChild(btnLastSpan); - this.pagingSlc = dom.id(tf.prfxSlcPages+tf.id); - + this.pagingSlc = Dom.id(tf.prfxSlcPages+tf.id); + /*==================================================== - onchange event for paging select =====================================================*/ - if(!evt._OnSlcPagesChange){ - evt._OnSlcPagesChange = function(){ - if(evt._Paging._OnSlcPagesChangeEvt){ - evt._Paging._OnSlcPagesChangeEvt(); + var o = this; + evt._OnSlcPagesChange = function(){ + if(evt._Paging._OnSlcPagesChangeEvt){ + evt._Paging._OnSlcPagesChangeEvt(); + } + o.changePage(); + this.blur(); + //ie only: blur is not enough... + if(this.parentNode && Helpers.isIE()){ + this.parentNode.focus(); + } + }; + + // if this.rememberGridValues==true this.SetPagingInfo() is called + // in ResetGridValues() method + if(!tf.rememberGridValues || tf.isPagingRemoved){ + this.setPagingInfo(); + } + if(!tf.fltGrid){ + tf.ValidateAllRows(); + this.setPagingInfo(tf.validRowsIndex); + } + + this.pagingBtnEvents = evt._Paging; + tf.isPagingRemoved = false; + } + + addPaging(filterTable){ + var tf = this.tf; + if(!tf.hasGrid || tf.paging){ + return; + } + tf.paging = true; + tf.isPagingRemoved = true; + this.init(); + tf.ResetValues(); + if(filterTable){ + tf.Filter(); + } + } + + setPagingInfo(validRows){ + var tf = this.tf; + var rows = tf.tbl.rows; + var mdiv = !this.pagingTgtId ? tf.mDiv : Dom.id(this.pagingTgtId); + var pgspan = Dom.id(tf.prfxPgSpan+tf.id); + //stores valid rows indexes + if(validRows && validRows.length>0){ + tf.validRowsIndex = validRows; + } else { + //re-sets valid rows indexes array + tf.validRowsIndex = []; + + //counts rows to be grouped + for(var j=tf.refRow; j0){ + mdiv.style.visibility = 'visible'; + if(this.pageSelectorType === tf.fltTypeSlc){ + for(var z=0; z