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();" >
-
-
-
- From |
- Destination |
- Road Distance (km) |
- By Air (hrs) |
- By Rail (hrs) |
-
-
- Sydney |
- Adelaide |
- 1412 |
- 1.4 |
- 25.3 |
-
-
- Sydney |
- Brisbane |
- 982 |
- 1.5 |
- 16 |
-
-
- Sydney |
- Canberra |
- 286 |
- .6 |
- 4.3 |
-
-
- Sydney |
- Melbourne |
- 872 |
- 1.1 |
- 10.5 |
-
-
- Adelaide |
- Perth |
- 2781 |
- 3.1 |
- 38 |
-
-
- Adelaide |
- Alice Springs |
- 1533 |
- 2 |
- 20.25 |
-
-
- Adelaide |
- Brisbane |
- 2045 |
- 2.15 |
- 40 |
-
-
-
+
+
+
+
+ From |
+ Destination |
+ Road Distance (km) |
+ By Air (hrs) |
+ By Rail (hrs) |
+
+
+ Sydney |
+ Adelaide |
+ 1412 |
+ 1.4 |
+ 25.3 |
+
+
+ Sydney |
+ Brisbane |
+ 982 |
+ 1.5 |
+ 16 |
+
+
+ Sydney |
+ Canberra |
+ 286 |
+ .6 |
+ 4.3 |
+
+
+ Sydney |
+ Melbourne |
+ 872 |
+ 1.1 |
+ 10.5 |
+
+
+ Adelaide |
+ Perth |
+ 2781 |
+ 3.1 |
+ 38 |
+
+
+ Adelaide |
+ Alice Springs |
+ 1533 |
+ 2 |
+ 20.25 |
+
+
+ Adelaide |
+ Brisbane |
+ 2045 |
+ 2.15 |
+ 40 |
+
+
+
+