deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-02 22:53:17 +02:00
Code Issues Releases Wiki Activity

Added auto filter tests

Browse source
This commit is contained in:
Max Guglielmi 2015-06-05 23:10:25 +10:00
parent 289579245d
commit 1cf087e5bc
10 changed files with 307 additions and 234 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
Gruntfile.js
View file

@ -101,6 +101,16 @@ module.exports = function (grunt) {
// }, // },
}, },
watch: {
app: {
files: ["src-es6/**/*"],
tasks: ["dev"],
options: {
spawn: false
}
}
},
babel: { babel: {
options: { options: {
sourceMap: true, sourceMap: true,
@ -122,6 +132,7 @@ module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-webpack'); grunt.loadNpmTasks('grunt-webpack');
grunt.loadNpmTasks('grunt-babel'); grunt.loadNpmTasks('grunt-babel');
@ -133,7 +144,8 @@ module.exports = function (grunt) {
grunt.registerTask('server', ['webpack-dev-server:start']); grunt.registerTask('server', ['webpack-dev-server:start']);
grunt.registerTask('dev', ['jshint', 'webpack:build', 'copy:build']); grunt.registerTask('dev',
['jshint', 'webpack:build', 'copy:build', 'watch:app']);
// Production build // Production build
grunt.registerTask('dist', grunt.registerTask('dist',

12
dist/tablefilter/tablefilter.css vendored
View file

@ -7,7 +7,8 @@
/* TABLE LAYOUT /* TABLE LAYOUT
=====================================================*/ =====================================================*/
table.TF{ table.TF{
font:normal 12px arial, tahoma, helvetica, sans-serif; /*font:normal 12px arial, tahoma, helvetica, sans-serif;*/
font:inherit;
border-top:1px solid #D0D0D0; border-left:1px solid #D0D0D0; border-top:1px solid #D0D0D0; border-left:1px solid #D0D0D0;
border-bottom:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #ccc; border-right:1px solid #ccc;
} }
@ -61,9 +62,9 @@ select.flt_multi{ /* multiple select filter */
border-top:1px solid #ccc; border-bottom:1px solid #999; border-top:1px solid #ccc; border-bottom:1px solid #999;
margin:0; width:120px; vertical-align:middle; margin:0; width:120px; vertical-align:middle;
} }
.fltWatermark{ /* watermark input */ /*.fltWatermark{ watermark input
color:#999; color:#999;
} }*/
.div_checklist{ /* div containing checklist */ .div_checklist{ /* div containing checklist */
width:100%; height:100px; width:100%; height:100px;
border:1px solid #ccc; border:1px solid #ccc;
@ -108,7 +109,10 @@ input.reset:hover{ background:#CAD1D6 url(themes/btn_clear_filters.png) center c
border:1px solid #ccc; overflow:hidden; border:1px solid #ccc; overflow:hidden;
} }
.ldiv{ /* left div */ .ldiv{ /* left div */
float:left; width:30%; position:inherit; float:left;
width:30%;
position:inherit;
text-align:left;
} }
.mdiv{ /* middle div */ .mdiv{ /* middle div */
float:left; width:38%; position:inherit; text-align:center; float:left; width:38%; position:inherit; text-align:center;

9
dist/tablefilter/tablefilter.js vendored
View file

File diff suppressed because one or more lines are too long

146
examples/dev.html
View file

@ -4,79 +4,77 @@
<title>HTML Table Filter Generator</title> <title>HTML Table Filter Generator</title>
</head> </head>
<body> <body>
<div style="width:800px;"> <table id="demo" cellpadding="0" cellspacing="0">
<table id="demo" cellpadding="0" cellspacing="0"> <thead>
<thead> <tr>
<tr> <th>From</th>
<th>From</th> <th>Destination</th>
<th>Destination</th> <th>Road Distance (km)</th>
<th>Road Distance (km)</th> <th>By Air (hrs)</th>
<th>By Air (hrs)</th> <th>By Rail (hrs)</th>
<th>By Rail (hrs)</th> </tr>
</tr> </thead>
</thead> <tfoot>
<tfoot> <tr>
<tr> <td>Tot:</td>
<td>Tot:</td> <td></td>
<td></td> <td id="sum1"></td>
<td id="sum1"></td> <td id="sum2"></td>
<td id="sum2"></td> <td></td>
<td></td> </tr>
</tr> </tfoot>
</tfoot> <tbody>
<tbody> <tr>
<tr> <td><strong>Sydney</strong></td>
<td><strong>Sydney</strong></td> <td>Adelaide</td>
<td>Adelaide</td> <td>1412</td>
<td>1412</td> <td>1.4</td>
<td>1.4</td> <td>25.3</td>
<td>25.3</td> </tr>
</tr> <tr>
<tr> <td><strong>Sydney</strong></td>
<td><strong>Sydney</strong></td> <td>Brisbane</td>
<td>Brisbane</td> <td>982</td>
<td>982</td> <td>1.5</td>
<td>1.5</td> <td>16</td>
<td>16</td> </tr>
</tr> <tr>
<tr> <td><strong>Sydney</strong></td>
<td><strong>Sydney</strong></td> <td>Canberra</td>
<td>Canberra</td> <td>286</td>
<td>286</td> <td>.6</td>
<td>.6</td> <td>4.3</td>
<td>4.3</td> </tr>
</tr> <tr>
<tr> <td><strong>Sydney</strong></td>
<td><strong>Sydney</strong></td> <td>Melbourne</td>
<td>Melbourne</td> <td>872</td>
<td>872</td> <td>1.1</td>
<td>1.1</td> <td>10.5</td>
<td>10.5</td> </tr>
</tr> <tr>
<tr> <td><strong>Adelaide</strong></td>
<td><strong>Adelaide</strong></td> <td>Perth</td>
<td>Perth</td> <td>2781</td>
<td>2781</td> <td>3.1</td>
<td>3.1</td> <td>38</td>
<td>38</td> </tr>
</tr> <tr>
<tr> <td><strong>Adelaide</strong></td>
<td><strong>Adelaide</strong></td> <td>Alice Springs</td>
<td>Alice Springs</td> <td>1533</td>
<td>1533</td> <td>2</td>
<td>2</td> <td>20.25</td>
<td>20.25</td> </tr>
</tr> <tr>
<tr> <td><strong>Adelaide</strong></td>
<td><strong>Adelaide</strong></td> <td>Brisbane</td>
<td>Brisbane</td> <td>2045</td>
<td>2045</td> <td>2.15</td>
<td>2.15</td> <td>40</td>
<td>40</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
<div> <div>
<button onclick="tf.ExtRegistry.advancedGrid.destroy();">Remove ezEditTable</button> <button onclick="tf.ExtRegistry.advancedGrid.destroy();">Remove ezEditTable</button>
@ -100,7 +98,7 @@
// fill_slc_on_demand: true, // fill_slc_on_demand: true,
rows_counter: true, rows_counter: true,
// enable_default_theme: true, // enable_default_theme: true,
// help_instructions: true, // help_instructions: false,
mark_active_columns: true, mark_active_columns: true,
// auto_filter: false, // auto_filter: false,
auto_filter_delay: 200, auto_filter_delay: 200,

1
package.json
View file

@ -10,6 +10,7 @@
"grunt-contrib-copy": "^0.8.0", "grunt-contrib-copy": "^0.8.0",
"grunt-contrib-jshint": "^0.11.2", "grunt-contrib-jshint": "^0.11.2",
"grunt-contrib-qunit": "^0.7.0", "grunt-contrib-qunit": "^0.7.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-webpack": "^1.0.8", "grunt-webpack": "^1.0.8",
"script-loader": "^0.6.1", "script-loader": "^0.6.1",
"webpack": "^1.8.10", "webpack": "^1.8.10",

235
src-es6/tablefilter.js
View file

@ -107,15 +107,6 @@ export class TableFilter{
this.fltTypeMulti = 'multiple'; this.fltTypeMulti = 'multiple';
this.fltTypeCheckList = 'checklist'; this.fltTypeCheckList = 'checklist';
this.fltTypeNone = 'none'; this.fltTypeNone = 'none';
this.fltCol = []; //filter type of each column
for(let j=0; j<this.nbCells; j++){
// let cfgCol = f['col_'+j];
// let col = !cfgCol ? this.fltTypeInp : Str.lower(cfgCol);
let col = this.getFilterType(j);
this.fltCol.push(col);
this['col'+j] = col;
}
/*** filters' grid properties ***/ /*** filters' grid properties ***/
@ -269,7 +260,8 @@ export class TableFilter{
//id of toolbar container element //id of toolbar container element
this.toolBarTgtId = f.toolbar_target_id || null; this.toolBarTgtId = f.toolbar_target_id || null;
//enables/disables help div //enables/disables help div
this.helpInstructions = !f.help_instructions ? false : true; this.helpInstructions = Types.isUndef(f.help_instructions) ?
undefined : Boolean(f.help_instructions);
//popup filters //popup filters
this.popUpFilters = Boolean(f.popup_filters); this.popUpFilters = Boolean(f.popup_filters);
//active columns color //active columns color
@ -381,12 +373,6 @@ export class TableFilter{
Types.isArray(this.sortConfig.sort_trigger_ids) ? Types.isArray(this.sortConfig.sort_trigger_ids) ?
this.sortConfig.sort_trigger_ids : []; this.sortConfig.sort_trigger_ids : [];
/*** ezEditTable extension ***/
//enables/disables table selection feature
// this.selectable = f.selectable===true ? true : false;
//enables/disables editable table feature
// this.editable = f.editable===true ? true : false;
/*** onkeyup event ***/ /*** onkeyup event ***/
//enables/disables auto filtering, table is filtered when user stops //enables/disables auto filtering, table is filtered when user stops
//typing //typing
@ -521,9 +507,7 @@ export class TableFilter{
}; };
// Extensions registry // Extensions registry
this.ExtRegistry = { this.ExtRegistry = {};
sort: null
};
/*** TF events ***/ /*** TF events ***/
// let o = this; // let o = this;
@ -713,8 +697,7 @@ export class TableFilter{
this.gridLayout)){ this.gridLayout)){
this.headersRow = 0; this.headersRow = 0;
} }
let /*f = this.cfg,*/ let n = this.singleSearchFlt ? 1 : this.nbCells,
n = this.singleSearchFlt ? 1 : this.nbCells,
inpclass; inpclass;
// if(global['tf_'+this.id] === undefined){ // if(global['tf_'+this.id] === undefined){
@ -729,37 +712,26 @@ export class TableFilter{
if(this.rememberGridValues || this.rememberPageNb || if(this.rememberGridValues || this.rememberPageNb ||
this.rememberPageLen){ this.rememberPageLen){
//let Store = require('modules/store').Store;
// import {Store} from 'modules/store';
this.Cpt.store = new Store(this); this.Cpt.store = new Store(this);
} }
if(this.gridLayout){ if(this.gridLayout){
// let GridLayout = require('modules/gridLayout').GridLayout;
// import {GridLayout} from 'modules/gridLayout';
this.Cpt.gridLayout = new GridLayout(this); this.Cpt.gridLayout = new GridLayout(this);
this.Cpt.gridLayout.init(); this.Cpt.gridLayout.init();
} }
if(this.loader){ if(this.loader){
if(!this.Cpt.loader){ if(!this.Cpt.loader){
// let Loader = require('modules/loader').Loader;
// import {Loader} from 'modules/loader';
this.Cpt.loader = new Loader(this); this.Cpt.loader = new Loader(this);
} }
} }
if(this.highlightKeywords){ if(this.highlightKeywords){
// let Highlight =
// require('modules/highlightKeywords').HighlightKeyword;
// import {HighlightKeyword} from 'modules/highlightKeywords';
this.Cpt.highlightKeyword = new HighlightKeyword(this); this.Cpt.highlightKeyword = new HighlightKeyword(this);
} }
if(this.popUpFilters){ if(this.popUpFilters){
if(!this.Cpt.popupFilter){ if(!this.Cpt.popupFilter){
// let PopupFilter = require('modules/popupFilter').PopupFilter;
// import {PopupFilter} from 'modules/popupFilter';
this.Cpt.popupFilter = new PopupFilter(this); this.Cpt.popupFilter = new PopupFilter(this);
} }
this.Cpt.popupFilter.init(); this.Cpt.popupFilter.init();
@ -813,7 +785,6 @@ export class TableFilter{
} }
let fltcell = Dom.create(this.fltCellTag), let fltcell = Dom.create(this.fltCellTag),
// col = this['col'+i],
col = this.getFilterType(i), col = this.getFilterType(i),
externalFltTgtId = externalFltTgtId =
this.isExternalFlt && this.externalFltTgtIds ? this.isExternalFlt && this.externalFltTgtIds ?
@ -828,11 +799,6 @@ export class TableFilter{
inpclass = (i==n-1 && this.displayBtn) ? inpclass = (i==n-1 && this.displayBtn) ?
this.fltSmallCssClass : this.fltCssClass; this.fltSmallCssClass : this.fltCssClass;
// if(col===undefined){
// col = f['col_'+i]===undefined ?
// this.fltTypeInp : Str.lower(f['col_'+i]);
// }
//only 1 input for single search //only 1 input for single search
if(this.singleSearchFlt){ if(this.singleSearchFlt){
col = this.fltTypeInp; col = this.fltTypeInp;
@ -889,10 +855,8 @@ export class TableFilter{
// checklist // checklist
else if(col===this.fltTypeCheckList){ else if(col===this.fltTypeCheckList){
let checkList; let checkList;
// if(!this.Cpt.checkList){ this.Cpt.checkList = new CheckList(this);
this.Cpt.checkList = new CheckList(this); checkList = this.Cpt.checkList;
checkList = this.Cpt.checkList;
// }
let divCont = Dom.create('div', let divCont = Dom.create('div',
['id', checkList.prfxCheckListDiv+i+'_'+this.id], ['id', checkList.prfxCheckListDiv+i+'_'+this.id],
@ -976,7 +940,6 @@ export class TableFilter{
fltcell.appendChild(btn); fltcell.appendChild(btn);
} }
// btn.onclick = this.Evt.onBtnClick;
Event.add(btn, 'click', this.Evt.onBtnClick.bind(this)); Event.add(btn, 'click', this.Evt.onBtnClick.bind(this));
}//if }//if
@ -990,51 +953,35 @@ export class TableFilter{
/* Filter behaviours */ /* Filter behaviours */
if(this.rowsCounter){ if(this.rowsCounter){
// let RowsCounter = require('modules/rowsCounter').RowsCounter;
// import {RowsCounter} from 'modules/rowsCounter';
this.Cpt.rowsCounter = new RowsCounter(this); this.Cpt.rowsCounter = new RowsCounter(this);
this.Cpt.rowsCounter.init(); this.Cpt.rowsCounter.init();
} }
if(this.statusBar){ if(this.statusBar){
// let StatusBar = require('modules/statusBar').StatusBar;
// import {StatusBar} from 'modules/statusBar';
this.Cpt.statusBar = new StatusBar(this); this.Cpt.statusBar = new StatusBar(this);
this.Cpt.statusBar.init(); this.Cpt.statusBar.init();
} }
if(this.paging || (this.Cpt.paging && this.Cpt.paging.isPagingRemoved)){ if(this.paging || (this.Cpt.paging && this.Cpt.paging.isPagingRemoved)){
// let Paging = require('modules/paging').Paging; this.Cpt.paging = new Paging(this);
// import {Paging} from 'modules/paging';
// if(!this.Cpt.paging){
this.Cpt.paging = new Paging(this);
// }
this.Cpt.paging.init(); this.Cpt.paging.init();
} }
if(this.btnReset){ if(this.btnReset){
// let ClearButton = require('modules/clearButton').ClearButton;
// import {ClearButton} from 'modules/clearButton';
this.Cpt.clearButton = new ClearButton(this); this.Cpt.clearButton = new ClearButton(this);
this.Cpt.clearButton.init(); this.Cpt.clearButton.init();
} }
if(this.helpInstructions){ if(this.helpInstructions){
// let Help = require('modules/help').Help; if(!this.Cpt.help){
// import {Help} from 'modules/help'; this.Cpt.help = new Help(this);
this.Cpt.help = new Help(this); }
this.Cpt.help.init(); this.Cpt.help.init();
} }
if(this.hasColWidths && !this.gridLayout){ if(this.hasColWidths && !this.gridLayout){
this.setColWidths(); this.setColWidths();
} }
if(this.alternateBgs){ if(this.alternateBgs){
//1st time only if no paging and rememberGridValues
// let AlternateRows = require('modules/alternateRows')
// .AlternateRows;
// import {AlternateRows} from 'modules/alternateRows';
this.Cpt.alternateRows = new AlternateRows(this); this.Cpt.alternateRows = new AlternateRows(this);
this.Cpt.alternateRows.init(); this.Cpt.alternateRows.init();
} }
if(this.hasColOperation){ if(this.hasColOperation){
// let ColOps = require('modules/colOps').ColOps;
// import {ColOps} from 'modules/colOps';
this.Cpt.colOps = new ColOps(this); this.Cpt.colOps = new ColOps(this);
this.Cpt.colOps.calc(); this.Cpt.colOps.calc();
} }
@ -1274,23 +1221,22 @@ export class TableFilter{
return; return;
} }
let rows = this.tbl.rows, let rows = this.tbl.rows,
Cpt = this.Cpt/*, Cpt = this.Cpt;
ExtRegistry = this.ExtRegistry*/; // if(this.paging){
if(this.paging){ // Cpt.paging.destroy();
Cpt.paging.destroy(); // }
} // if(this.statusBar){
if(this.statusBar){ // Cpt.statusBar.destroy();
Cpt.statusBar.destroy(); // }
} // if(this.rowsCounter){
if(this.rowsCounter){ // Cpt.rowsCounter.destroy();
Cpt.rowsCounter.destroy(); // }
} // if(this.btnReset){
if(this.btnReset){ // Cpt.clearButton.destroy();
Cpt.clearButton.destroy(); // }
} // if(this.helpInstructions){
if(this.helpInstructions){ // Cpt.help.destroy();
Cpt.help.destroy(); // }
}
if(this.isExternalFlt && !this.popUpFilters){ if(this.isExternalFlt && !this.popUpFilters){
this.removeExternalFlts(); this.removeExternalFlts();
} }
@ -1300,12 +1246,12 @@ export class TableFilter{
if(this.highlightKeywords){ if(this.highlightKeywords){
Cpt.highlightKeyword.unhighlightAll(); Cpt.highlightKeyword.unhighlightAll();
} }
if(this.loader){ // if(this.loader){
Cpt.loader.destroy(); // Cpt.loader.destroy();
} // }
if(this.popUpFilters){ // if(this.popUpFilters){
Cpt.popupFilter.destroy(); // Cpt.popupFilter.destroy();
} // }
if(this.markActiveColumns){ if(this.markActiveColumns){
this.clearActiveColumns(); this.clearActiveColumns();
} }
@ -1316,20 +1262,20 @@ export class TableFilter{
//this loop shows all rows and removes validRow attribute //this loop shows all rows and removes validRow attribute
for(let j=this.refRow; j<this.nbRows; j++){ for(let j=this.refRow; j<this.nbRows; j++){
rows[j].style.display = ''; rows[j].style.display = '';
try{ // try{
if(rows[j].hasAttribute('validRow')){ if(rows[j].hasAttribute('validRow')){
rows[j].removeAttribute('validRow'); rows[j].removeAttribute('validRow');
} }
} catch(e) { // } catch(e) {
//ie<=6 doesn't support hasAttribute method // //ie<=6 doesn't support hasAttribute method
let row = rows[j]; // let row = rows[j];
let attribs = row.attributes; // let attribs = row.attributes;
for(let x=0, len=attribs.length; x<len; x++){ // for(let x=0, len=attribs.length; x<len; x++){
if(Str.lower(attribs.nodeName)==='validrow'){ // if(Str.lower(attribs.nodeName)==='validrow'){
row.removeAttribute('validRow'); // row.removeAttribute('validRow');
} // }
} // }
} // }
//removes alternating colors //removes alternating colors
if(this.alternateBgs){ if(this.alternateBgs){
@ -1342,9 +1288,16 @@ export class TableFilter{
this.fltGridEl = rows[this.filtersRowIndex]; this.fltGridEl = rows[this.filtersRowIndex];
this.tbl.deleteRow(this.filtersRowIndex); this.tbl.deleteRow(this.filtersRowIndex);
} }
if(this.gridLayout){ // if(this.gridLayout){
Cpt.gridLayout.destroy(); // Cpt.gridLayout.destroy();
} // }
Object.keys(Cpt).forEach(function(key) {
var feature = Cpt[key];
if(feature && Types.isFn(feature.destroy)){
feature.destroy();
}
});
Dom.removeClass(this.tbl, this.prfxTf); Dom.removeClass(this.tbl, this.prfxTf);
this.activeFlt = null; this.activeFlt = null;
this.isStartBgAlternate = true; this.isStartBgAlternate = true;
@ -1376,7 +1329,10 @@ export class TableFilter{
} }
//default location: just above the table //default location: just above the table
else{ else{
this.tbl.parentNode.insertBefore(infdiv, this.tbl); var cont = Dom.create('caption');
cont.appendChild(infdiv);
this.tbl.insertBefore(cont, this.tbl.firstChild);
// this.tbl.parentNode.insertBefore(infdiv, this.tbl);
} }
this.infDiv = Dom.id(this.prfxInfDiv+this.id); this.infDiv = Dom.id(this.prfxInfDiv+this.id);
@ -1399,8 +1355,9 @@ export class TableFilter{
infdiv.appendChild(mdiv); infdiv.appendChild(mdiv);
this.mDiv = Dom.id(this.prfxMDiv+this.id); this.mDiv = Dom.id(this.prfxMDiv+this.id);
// Enable help instructions by default if topbar is generated // Enable help instructions by default if topbar is generated and not
if(!this.helpInstructions){ // explicitely set to false
if(Types.isUndef(this.helpInstructions)){
if(!this.Cpt.help){ if(!this.Cpt.help){
this.Cpt.help = new Help(this); this.Cpt.help = new Help(this);
} }
@ -1455,16 +1412,6 @@ export class TableFilter{
this.EvtManager(this.Evt.name.sort); this.EvtManager(this.Evt.name.sort);
} }
/*====================================================
- Sets selection or edition features by loading
ezEditTable script by Max Guglielmi
=====================================================*/
// setEditable(){
// this.loadExtension({
// name: 'advancedGrid'
// });
// }
/*==================================================== /*====================================================
- IE bug: it seems there is no way to make - IE bug: it seems there is no way to make
multiple selections programatically, only last multiple selections programatically, only last
@ -1584,10 +1531,10 @@ export class TableFilter{
continue; continue;
} }
let s, opt; let s, opt;
let fltType = this.getFilterType(i);
// if fillSlcOnDemand, drop-down needs to contain stored // if fillSlcOnDemand, drop-down needs to contain stored
// value(s) for filtering // value(s) for filtering
if(this['col'+i]===this.fltTypeSlc || if(fltType===this.fltTypeSlc || fltType===this.fltTypeMulti){
this['col'+i]===this.fltTypeMulti){
let slc = Dom.id( this.fltIds[i] ); let slc = Dom.id( this.fltIds[i] );
slc.options[0].selected = false; slc.options[0].selected = false;
@ -1616,7 +1563,7 @@ export class TableFilter{
} }
}// if multiFltsIndex }// if multiFltsIndex
} }
else if(this['col'+i]==this.fltTypeCheckList){ else if(fltType===this.fltTypeCheckList){
let checkList = this.Cpt.checkList; let checkList = this.Cpt.checkList;
let divChk = checkList.checkListDiv[i]; let divChk = checkList.checkListDiv[i];
divChk.title = divChk.innerHTML; divChk.title = divChk.innerHTML;
@ -1834,46 +1781,46 @@ export class TableFilter{
// lower equal // lower equal
if(hasLE){ if(hasLE){
occurence = num_cell_data <= removeNbFormat( occurence = num_cell_data <= removeNbFormat(
sA.replace(re_le,''), nbFormat); sA.replace(re_le, ''), nbFormat);
} }
//greater equal //greater equal
else if(hasGE){ else if(hasGE){
occurence = num_cell_data >= removeNbFormat( occurence = num_cell_data >= removeNbFormat(
sA.replace(re_ge,''), nbFormat); sA.replace(re_ge, ''), nbFormat);
} }
//lower //lower
else if(hasLO){ else if(hasLO){
occurence = num_cell_data < removeNbFormat( occurence = num_cell_data < removeNbFormat(
sA.replace(re_l,''), nbFormat); sA.replace(re_l, ''), nbFormat);
} }
//greater //greater
else if(hasGR){ else if(hasGR){
occurence = num_cell_data > removeNbFormat( occurence = num_cell_data > removeNbFormat(
sA.replace(re_g,''), nbFormat); sA.replace(re_g, ''), nbFormat);
} }
//different //different
else if(hasDF){ else if(hasDF){
occurence = this._containsStr( occurence = this._containsStr(
sA.replace(re_d,''),cell_data) ? false : true; sA.replace(re_d, ''),cell_data) ? false : true;
} }
//like //like
else if(hasLK){ else if(hasLK){
occurence = this._containsStr( occurence = this._containsStr(
sA.replace(re_lk,''), cell_data, null, false); sA.replace(re_lk, ''), cell_data, null, false);
} }
//equal //equal
else if(hasEQ){ else if(hasEQ){
occurence = this._containsStr( occurence = this._containsStr(
sA.replace(re_eq,''), cell_data, null, true); sA.replace(re_eq, ''), cell_data, null, true);
} }
//starts with //starts with
else if(hasST){ else if(hasST){
occurence = cell_data.indexOf(sA.replace(re_st,''))===0 ? occurence = cell_data.indexOf(sA.replace(re_st, ''))===0 ?
true : false; true : false;
} }
//ends with //ends with
else if(hasEN){ else if(hasEN){
let searchArg = sA.replace(re_en,''); let searchArg = sA.replace(re_en, '');
occurence = occurence =
cell_data.lastIndexOf(searchArg,cell_data.length-1) === cell_data.lastIndexOf(searchArg,cell_data.length-1) ===
(cell_data.length-1)-(searchArg.length-1) && (cell_data.length-1)-(searchArg.length-1) &&
@ -1899,9 +1846,6 @@ export class TableFilter{
} catch(e) { occurence = false; } } catch(e) { occurence = false; }
} }
else{ else{
// let fCol = f['col_'+j];
// occurence = this._containsStr(
// sA, cell_data, !fCol ? this.fltTypeInp : fCol);
occurence = this._containsStr( occurence = this._containsStr(
sA, cell_data, this.getFilterType(j)); sA, cell_data, this.getFilterType(j));
} }
@ -2104,7 +2048,7 @@ export class TableFilter{
let isExludedRow = false; let isExludedRow = false;
// checks if current row index appears in exclude array // checks if current row index appears in exclude array
if(exclude && Types.isArray(exclude)){ if(exclude && Types.isArray(exclude)){
isExludedRow = Arr.has(exclude, i); //boolean isExludedRow = Arr.has(exclude, i);
} }
let cell = row[i].cells, let cell = row[i].cells,
nchilds = cell.length; nchilds = cell.length;
@ -2116,15 +2060,13 @@ export class TableFilter{
if(j != colindex || row[i].style.display != ''){ if(j != colindex || row[i].style.display != ''){
continue; continue;
} }
// if(j === colindex && row[i].style.display === ''){
let cell_data = Str.lower(this.getCellData(j, cell[j])), let cell_data = Str.lower(this.getCellData(j, cell[j])),
nbFormat = this.colNbFormat ? nbFormat = this.colNbFormat ?
this.colNbFormat[colindex] : null, this.colNbFormat[colindex] : null,
data = num ? data = num ?
Helpers.removeNbFormat(cell_data,nbFormat) : Helpers.removeNbFormat(cell_data, nbFormat) :
cell_data; cell_data;
colValues.push(data); colValues.push(data);
// }
} }
} }
} }
@ -2145,7 +2087,8 @@ export class TableFilter{
if(!flt){ if(!flt){
return ''; return '';
} }
let fltColType = this.fltCol[index]; // let fltColType = this.fltCol[index];
let fltColType = this.getFilterType(index);
if(fltColType !== this.fltTypeMulti && if(fltColType !== this.fltTypeMulti &&
fltColType !== this.fltTypeCheckList){ fltColType !== this.fltTypeCheckList){
fltValue = flt.value; fltValue = flt.value;
@ -2222,7 +2165,7 @@ export class TableFilter{
} }
let arr = []; let arr = [];
for(let i=0, len=this.fltIds.length; i<len; i++){ for(let i=0, len=this.fltIds.length; i<len; i++){
let fltType = this['col'+i]; let fltType = this.getFilterType(i);
if(fltType === Str.lower(type)){ if(fltType === Str.lower(type)){
let a = bool ? i : this.fltIds[i]; let a = bool ? i : this.fltIds[i];
arr.push(a); arr.push(a);
@ -2246,8 +2189,9 @@ export class TableFilter{
* @param {Number} rowIndex Index of the row * @param {Number} rowIndex Index of the row
* @return {Number} Number of cells * @return {Number} Number of cells
*/ */
getCellsNb(rowIndex){ getCellsNb(rowIndex=0){
let tr = !rowIndex ? this.tbl.rows[0] : this.tbl.rows[rowIndex]; // let tr = !rowIndex ? this.tbl.rows[0] : this.tbl.rows[rowIndex];
let tr = this.tbl.rows[rowIndex];
return tr.cells.length; return tr.cells.length;
} }
@ -2258,7 +2202,7 @@ export class TableFilter{
* @return {Number} Number of filterable rows * @return {Number} Number of filterable rows
*/ */
getRowsNb(includeHeaders){ getRowsNb(includeHeaders){
let s = !this.refRow ? 0 : this.refRow, let s = Types.isUndef(this.refRow) ? 0 : this.refRow,
ntrs = this.tbl.rows.length; ntrs = this.tbl.rows.length;
if(includeHeaders){ s = 0; } if(includeHeaders){ s = 0; }
return parseInt(ntrs-s, 10); return parseInt(ntrs-s, 10);
@ -2437,7 +2381,6 @@ export class TableFilter{
} }
let slc = this.getFilterElement(index), let slc = this.getFilterElement(index),
// execFilter = doFilter===undefined ? true : doFilter, // execFilter = doFilter===undefined ? true : doFilter,
// fltColType = this['col'+index];
fltColType = this.getFilterType(index); fltColType = this.getFilterType(index);
if(fltColType !== this.fltTypeMulti && if(fltColType !== this.fltTypeMulti &&
@ -2449,14 +2392,15 @@ export class TableFilter{
let s = searcharg.split(' '+this.orOperator+' '); let s = searcharg.split(' '+this.orOperator+' ');
// let ct = 0; //keywords counter // let ct = 0; //keywords counter
for(let j=0, len=slc.options.length; j<len; j++){ for(let j=0, len=slc.options.length; j<len; j++){
let option = slc.options[j];
if(s==='' || s[0]===''){ if(s==='' || s[0]===''){
slc.options[j].selected = false; option.selected = false;
} }
if(slc.options[j].value===''){ if(option.value===''){
slc.options[j].selected = false; option.selected = false;
} }
if(slc.options[j].value!=='' && if(option.value!=='' &&
Arr.has(s, slc.options[j].value, true)){ Arr.has(s, option.value, true)){
// IE multiple selection work-around // IE multiple selection work-around
// if(hlp.isIE()){ // if(hlp.isIE()){
// //when last value reached filtering can be executed // //when last value reached filtering can be executed
@ -2468,7 +2412,7 @@ export class TableFilter{
// else{ // else{
// slc.options[j].selected = true; // slc.options[j].selected = true;
// } // }
slc.options[j].selected = true; option.selected = true;
}//if }//if
}//for j }//for j
} }
@ -2697,7 +2641,8 @@ export class TableFilter{
let externalFltEl = this.externalFltEls[ct]; let externalFltEl = this.externalFltEls[ct];
extFlt.appendChild(externalFltEl); extFlt.appendChild(externalFltEl);
let colFltType = this['col'+ct]; // let colFltType = this['col'+ct];
let colFltType = this.getFilterType(ct);
//IE special treatment for gridLayout, appended filters are //IE special treatment for gridLayout, appended filters are
//empty //empty
if(this.gridLayout && if(this.gridLayout &&

12
static/style/tablefilter.css
View file

@ -7,7 +7,8 @@
/* TABLE LAYOUT /* TABLE LAYOUT
=====================================================*/ =====================================================*/
table.TF{ table.TF{
font:normal 12px arial, tahoma, helvetica, sans-serif; /*font:normal 12px arial, tahoma, helvetica, sans-serif;*/
font:inherit;
border-top:1px solid #D0D0D0; border-left:1px solid #D0D0D0; border-top:1px solid #D0D0D0; border-left:1px solid #D0D0D0;
border-bottom:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #ccc; border-right:1px solid #ccc;
} }
@ -61,9 +62,9 @@ select.flt_multi{ /* multiple select filter */
border-top:1px solid #ccc; border-bottom:1px solid #999; border-top:1px solid #ccc; border-bottom:1px solid #999;
margin:0; width:120px; vertical-align:middle; margin:0; width:120px; vertical-align:middle;
} }
.fltWatermark{ /* watermark input */ /*.fltWatermark{ watermark input
color:#999; color:#999;
} }*/
.div_checklist{ /* div containing checklist */ .div_checklist{ /* div containing checklist */
width:100%; height:100px; width:100%; height:100px;
border:1px solid #ccc; border:1px solid #ccc;
@ -108,7 +109,10 @@ input.reset:hover{ background:#CAD1D6 url(themes/btn_clear_filters.png) center c
border:1px solid #ccc; overflow:hidden; border:1px solid #ccc; overflow:hidden;
} }
.ldiv{ /* left div */ .ldiv{ /* left div */
float:left; width:30%; position:inherit; float:left;
width:30%;
position:inherit;
text-align:left;
} }
.mdiv{ /* middle div */ .mdiv{ /* middle div */
float:left; width:38%; position:inherit; text-align:center; float:left; width:38%; position:inherit; text-align:center;

80
test/test-auto-filter.html Normal file
View file

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TableFilter with auto filter feature tests</title>
<link rel="stylesheet" href="libs/qunit/qunit.css">
<script src="libs/qunit/qunit.js"></script>
<script src="libs/polyfill.js"></script>
</head>
<body>
<table id="demo">
<thead>
<tr>
<th>From</th>
<th>Destination</th>
<th>Road Distance (km)</th>
<th>By Air (hrs)</th>
<th>By Rail (hrs)</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Sydney</strong></td>
<td>Adelaide</td>
<td>1412</td>
<td>1.4</td>
<td>25.3</td>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Brisbane</td>
<td>982</td>
<td>1.5</td>
<td>16</td>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Canberra</td>
<td>286</td>
<td>.6</td>
<td>4.3</td>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Melbourne</td>
<td>872</td>
<td>1.1</td>
<td>10.5</td>
</tr>
<tr>
<td><strong>Adelaide</strong></td>
<td>Perth</td>
<td>2781</td>
<td>3.1</td>
<td>38</td>
</tr>
<tr>
<td><strong>Adelaide</strong></td>
<td>Alice Springs</td>
<td>1533</td>
<td>2</td>
<td>20.25</td>
</tr>
<tr>
<td><strong>Adelaide</strong></td>
<td>Brisbane</td>
<td>2045</td>
<td>2.15</td>
<td>40</td>
</tr>
</tbody>
</table>
<script src="../dist/tablefilter/tablefilter.js"></script>
<script src="test-auto-filter.js"></script>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>

30
test/test-auto-filter.js Normal file
View file

@ -0,0 +1,30 @@
(function(win, TableFilter){
var tf = new TableFilter('demo', {
base_path: '../dist/tablefilter/',
auto_filter: true,
auto_filter_delay: 1000
});
tf.init();
window.tf = tf;
module('Sanity checks');
test('Auto filter feature', function() {
deepEqual(tf instanceof TableFilter, true, 'TableFilter instanciated');
deepEqual(tf.autoFilter, true, 'Auto filtering enabled');
deepEqual(tf.autoFilterDelay, 1000, 'Expected filtering delay');
});
module('Remove feature');
test('Auto filter feature disabled', function() {
tf.destroy();
tf = new TableFilter('demo', {
base_path: '../dist/tablefilter/',
auto_filter: false
});
deepEqual(tf.autoFilter, false, 'Auto filtering disabled');
deepEqual(tf.autoFilterDelay, 900, 'Expected filtering delay');
});
})(window, TableFilter);

2
test/test.js
View file

@ -9,7 +9,7 @@
test("TableFilter object", function() { test("TableFilter object", function() {
equal(tf.id, 'demo', 'id check'); equal(tf.id, 'demo', 'id check');
equal(tf.filtersRowIndex, 0, 'Filters row index'); equal(tf.filtersRowIndex, 0, 'Filters row index');
deepEqual(tf.fltCol.length, 5, 'filters type collection length'); deepEqual(tf.getCellsNb(), 5, 'filters type collection length');
}); });
module('DOM tests'); module('DOM tests');