From 2ae6d7f2c38d0fec94b4edef606a05ee1417ae92 Mon Sep 17 00:00:00 2001 From: Max Guglielmi Date: Sat, 14 Feb 2015 19:59:12 +1100 Subject: [PATCH] Started drop-down filter module --- README.md | 7 +- dist/filtergrid.css | 2 +- src-es6/modules/colOps.js | 16 +- src-es6/modules/dropdown.js | 324 ++++++++++++++++++++++++++++++++++++ src/core.js | 44 ++--- src/index.html | 123 +++++++------- src/modules/colOps.js | 16 +- src/modules/colOps.js.map | 2 +- src/modules/dropdown.js | 274 ++++++++++++++++++++++++++++++ src/modules/dropdown.js.map | 1 + 10 files changed, 715 insertions(+), 94 deletions(-) create mode 100644 src-es6/modules/dropdown.js create mode 100644 src/modules/dropdown.js create mode 100644 src/modules/dropdown.js.map diff --git a/README.md b/README.md index 771af66e..47f59a44 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,9 @@ TableFilter =========== -Filter HTML tables content easily +Filter HTML tables data easily + +This script adds to any html table a "filter by column" feature that enables +users to filter and limit the data displayed within a long table. It even works +on tables with uneven rows. The script automatically adds a filter grid bar at +the top of the desired table. diff --git a/dist/filtergrid.css b/dist/filtergrid.css index 87fdc556..fc0798f6 100644 --- a/dist/filtergrid.css +++ b/dist/filtergrid.css @@ -1,6 +1,6 @@ /*------------------------------------------------------------------------ - TableFilter stylesheet by Max Guglielmi - - (build date: Sun Feb 01 2015 19:22:55) + - (build date: Sat Feb 14 2015 19:57:20) - Edit below for your projects' needs ------------------------------------------------------------------------*/ diff --git a/src-es6/modules/colOps.js b/src-es6/modules/colOps.js index 451c4c4b..5c4a48ab 100644 --- a/src-es6/modules/colOps.js +++ b/src-es6/modules/colOps.js @@ -1,5 +1,6 @@ import {Dom} from '../dom'; import {Str} from '../string'; +import {Types} from '../types'; export class ColOps{ @@ -11,6 +12,13 @@ export class ColOps{ var f = tf.fObj; this.colOperation = f.col_operation; + //calls function before col operation + this.onBeforeOperation = Types.isFn(f.on_before_operation) ? + f.on_before_operation : null; + //calls function after col operation + this.onAfterOperation = Types.isFn(f.on_after_operation) ? + f.on_after_operation : null; + this.tf = tf; } @@ -35,8 +43,8 @@ export class ColOps{ return; } - if(this.tf.onBeforeOperation){ - this.tf.onBeforeOperation.call(null, this.tf); + if(this.onBeforeOperation){ + this.onBeforeOperation.call(null, this.tf); } var colOperation = this.colOperation, @@ -293,8 +301,8 @@ export class ColOps{ }//for ucol }//if typeof - if(this.tf.onAfterOperation){ - this.tf.onAfterOperation.call(null, this.tf); + if(this.onAfterOperation){ + this.onAfterOperation.call(null, this.tf); } } diff --git a/src-es6/modules/dropdown.js b/src-es6/modules/dropdown.js new file mode 100644 index 00000000..8c87ce86 --- /dev/null +++ b/src-es6/modules/dropdown.js @@ -0,0 +1,324 @@ +import {Dom} from '../dom'; +import {Arr as array} from '../array'; +import {Str} from '../string'; +import {Sort} from '../sort'; +import {Event} from '../event'; + +export class Dropdown{ + + /** + * Dropdown UI component + * @param {Object} tf TableFilter instance + */ + constructor(tf){ + // Configuration object + var f = tf.fObj; + + this.enableSlcResetFilter = !f.enable_slc_reset_filter ? false : true; + //defines empty option text + this.nonEmptyText = f.non_empty_text || '(Non empty)'; + //enables/disables onChange event on combo-box + this.onSlcChange = f.on_change===false ? false : true; + //sets select filling method: 'innerHTML' or 'createElement' + this.slcFillingMethod = f.slc_filling_method || 'createElement'; + //IE only, tooltip text appearing on select before it is populated + this.activateSlcTooltip = f.activate_slc_tooltip || + 'Click to activate'; + //tooltip text appearing on multiple select + this.multipleSlcTooltip = f.multiple_slc_tooltip || + 'Use Ctrl key for multiple selections'; + this.hasCustomSlcOptions = types.isObj(f.custom_slc_options) ? + true : false; + this.customSlcOptions = types.isArray(f.custom_slc_options) ? + f.custom_slc_options : null; + + this.isCustom = null; + this.opts = []; + this.optsTxt = []; + this.slcInnerHtml = ''; + + this.tf = tf; + } + + /** + * Build checklist UI + * @param {Number} colIndex Column index + * @param {Boolean} isRefreshed Enable linked refresh behaviour + * @param {Boolean} isExternal Render in external container + * @param {String} extFltId External container id + */ + _build(colIndex, isRefreshed=false, isExternal=false, extFltId=null){ + var tf = this.tf; + colIndex = parseInt(colIndex, 10); + + var slcId = tf.fltIds[colIndex]; + if((!Dom.id(slcId) && !isExternal) || + (!Dom.id(extSlcId) && isExternal)){ + return; + } + var slc = !isExternal ? Dom.id(slcId) : Dom.id(extSlcId), + rows = tf.tbl.rows, + matchCase = tf.matchCase, + fillMethod = Str.lower(this.slcFillingMethod); + + //custom select test + this.isCustom = (this.hasCustomSlcOptions && + array.has(this.customSlcOptions.cols, colIndex)); + + //custom selects text + var activeFlt; + if(isRefreshed && tf.activeFilterId){ + activeFlt = tf.activeFilterId.split('_')[0]; + activeFlt = activeFlt.split(tf.prfxFlt)[1]; + } + + /*** remember grid values ***/ + var flts_values = [], fltArr = []; + if(tf.rememberGridValues){ + flts_values = tf.Cpt.store.getFilterValues(tf.fltsValuesCookie); + if(flts_values && !Str.isEmpty(flts_values.toString())){ + if(this.isCustom){ + fltArr.push(flts_values[colIndex]); + } else { + fltArr = flts_values[colIndex].split(' '+tf.orOperator+' '); + } + } + } + + var excludedOpts = null, + filteredDataCol = null; + if(isRefreshed && tf.disableExcludedOptions){ + excludedOpts = []; + filteredDataCol = []; + } + + for(var k=tf.refRow; k' + + lbl+''; + } else { + var opt; + //fill select on demand + if(tf.fillSlcOnDemand && slcValue===this.opts[y] && + tf['col'+colIndex]===tf.fltTypeSlc){ + opt = Dom.createOpt(lbl, val, true); + } else { + if(tf['col'+colIndex]!==tf.fltTypeMulti){ + opt = Dom.createOpt( + lbl, + val, + (flts_values[colIndex]!==' ' && + val===flts_values[colIndex]) ? true : false + ); + } else { + opt = Dom.createOpt( + lbl, + val, + (array.has(fltArr, + Str.matchCase(this.opts[y], tf.matchCase), + tf.matchCase) || + fltArr.toString().indexOf(val)!== -1) ? + true : false + ); + } + } + if(isDisabled){ + opt.disabled = true; + } + slc.appendChild(opt); + } + }// for y + + if(fillMethod === 'innerhtml'){ + slc.innerHTML += this.slcInnerHtml; + } + slc.setAttribute('filled', '1'); + } + + /** + * Add drop-down header option + * @param {Object} slc Select DOM element + */ + addFirstOption(slc){ + var tf = this.tf, + fillMethod = Str.lower(this.slcFillingMethod); + + if(fillMethod === 'innerhtml'){ + this.slcInnerHtml += ''; + } + else { + var opt0 = Dom.createOpt( + (!this.enableSlcResetFilter ? '' : tf.displayAllText),''); + if(!this.enableSlcResetFilter){ + opt0.style.display = 'none'; + } + slc.appendChild(opt0); + if(tf.enableEmptyOption){ + var opt1 = Dom.createOpt(tf.emptyText, tf.emOperator); + slc.appendChild(opt1); + } + if(tf.enableNonEmptyOption){ + var opt2 = Dom.createOpt(tf.nonEmptyText, tf.nmOperator); + slc.appendChild(opt2); + } + } + return slc; + } + +} diff --git a/src/core.js b/src/core.js index aa4e3c52..cb587acb 100644 --- a/src/core.js +++ b/src/core.js @@ -281,8 +281,8 @@ function TableFilter(id) { /*** select filter's customisation and behaviours ***/ //defines 1st option text this.displayAllText = f.display_all_text || ''; - this.enableSlcResetFilter = f.enable_slc_reset_filter===false ? - false : true; + // this.enableSlcResetFilter = f.enable_slc_reset_filter===false ? + // false : true; //enables/disables empty option in combo-box filters this.enableEmptyOption = f.enable_empty_option===true ? true : false; //defines empty option text @@ -292,8 +292,8 @@ function TableFilter(id) { true : false; //defines empty option text this.nonEmptyText = f.non_empty_text || '(Non empty)'; - //enables/disables onChange event on combo-box - this.onSlcChange = f.on_change===false ? false : true; + // //enables/disables onChange event on combo-box + // this.onSlcChange = f.on_change===false ? false : true; //enables/disables select options sorting this.sortSlc = f.sort_select===false ? false : true; //enables/disables ascending numeric options sorting @@ -302,26 +302,26 @@ function TableFilter(id) { //enables/disables descending numeric options sorting this.isSortNumDesc = f.sort_num_desc===true ? true : false; this.sortNumDesc = this.isSortNumDesc ? f.sort_num_desc : null; - //sets select filling method: 'innerHTML' or 'createElement' - this.slcFillingMethod = f.slc_filling_method || 'createElement'; + // //sets select filling method: 'innerHTML' or 'createElement' + // this.slcFillingMethod = f.slc_filling_method || 'createElement'; //enabled selects are populated on demand this.fillSlcOnDemand = f.fill_slc_on_demand===true ? true : false; - //IE only, tooltip text appearing on select before it is populated - this.activateSlcTooltip = f.activate_slc_tooltip || - 'Click to activate'; - //tooltip text appearing on multiple select - this.multipleSlcTooltip = f.multiple_slc_tooltip || - 'Use Ctrl key for multiple selections'; - this.hasCustomSlcOptions = types.isObj(f.custom_slc_options) ? - true : false; - this.customSlcOptions = types.isArray(f.custom_slc_options) ? - f.custom_slc_options : null; - //calls function before col operation - this.onBeforeOperation = types.isFn(f.on_before_operation) ? - f.on_before_operation : null; - //calls function after col operation - this.onAfterOperation = types.isFn(f.on_after_operation) ? - f.on_after_operation : null; + // //IE only, tooltip text appearing on select before it is populated + // this.activateSlcTooltip = f.activate_slc_tooltip || + // 'Click to activate'; + // //tooltip text appearing on multiple select + // this.multipleSlcTooltip = f.multiple_slc_tooltip || + // 'Use Ctrl key for multiple selections'; + // this.hasCustomSlcOptions = types.isObj(f.custom_slc_options) ? + // true : false; + // this.customSlcOptions = types.isArray(f.custom_slc_options) ? + // f.custom_slc_options : null; + // //calls function before col operation + // this.onBeforeOperation = types.isFn(f.on_before_operation) ? + // f.on_before_operation : null; + // //calls function after col operation + // this.onAfterOperation = types.isFn(f.on_after_operation) ? + // f.on_after_operation : null; /*** Filter operators ***/ this.rgxOperator = f.regexp_operator || 'rgx:'; diff --git a/src/index.html b/src/index.html index fef2f0d4..06e1638c 100644 --- a/src/index.html +++ b/src/index.html @@ -21,72 +21,75 @@ tf.Cpt.paging.destroy(); tf.Filter();" >

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FromDestinationRoad Distance (km)By Air (hrs)By Rail (hrs)
SydneyAdelaide14121.425.3
SydneyBrisbane9821.516
SydneyCanberra286.64.3
SydneyMelbourne8721.110.5
AdelaidePerth27813.138
AdelaideAlice Springs1533220.25
AdelaideBrisbane20452.1540
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FromDestinationRoad Distance (km)By Air (hrs)By Rail (hrs)
SydneyAdelaide14121.425.3
SydneyBrisbane9821.516
SydneyCanberra286.64.3
SydneyMelbourne8721.110.5
AdelaidePerth27813.138
AdelaideAlice Springs1533220.25
AdelaideBrisbane20452.1540
+