Added auto filter tests
This commit is contained in:
Max Guglielmi
parent
289579245d
commit
1cf087e5bc
14
Gruntfile.js
14
Gruntfile.js
|
|
@ -101,6 +101,16 @@ module.exports = function (grunt) {
|
|||
// },
|
||||
},
|
||||
|
||||
watch: {
|
||||
app: {
|
||||
files: ["src-es6/**/*"],
|
||||
tasks: ["dev"],
|
||||
options: {
|
||||
spawn: false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
babel: {
|
||||
options: {
|
||||
sourceMap: true,
|
||||
|
|
@ -122,6 +132,7 @@ module.exports = function (grunt) {
|
|||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-qunit');
|
||||
grunt.loadNpmTasks('grunt-contrib-copy');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-webpack');
|
||||
grunt.loadNpmTasks('grunt-babel');
|
||||
|
||||
|
|
@ -133,7 +144,8 @@ module.exports = function (grunt) {
|
|||
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
|
||||
grunt.registerTask('dist',
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
/* TABLE LAYOUT
|
||||
=====================================================*/
|
||||
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-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;
|
||||
margin:0; width:120px; vertical-align:middle;
|
||||
}
|
||||
.fltWatermark{ /* watermark input */
|
||||
/*.fltWatermark{ watermark input
|
||||
color:#999;
|
||||
}
|
||||
}*/
|
||||
.div_checklist{ /* div containing checklist */
|
||||
width:100%; height:100px;
|
||||
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;
|
||||
}
|
||||
.ldiv{ /* left div */
|
||||
float:left; width:30%; position:inherit;
|
||||
float:left;
|
||||
width:30%;
|
||||
position:inherit;
|
||||
text-align:left;
|
||||
}
|
||||
.mdiv{ /* middle div */
|
||||
float:left; width:38%; position:inherit; text-align:center;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,79 +4,77 @@
|
|||
<title>HTML Table Filter Generator</title>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width:800px;">
|
||||
<table id="demo" cellpadding="0" cellspacing="0">
|
||||
<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>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Tot:</td>
|
||||
<td></td>
|
||||
<td id="sum1"></td>
|
||||
<td id="sum2"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<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>
|
||||
</div>
|
||||
<table id="demo" cellpadding="0" cellspacing="0">
|
||||
<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>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Tot:</td>
|
||||
<td></td>
|
||||
<td id="sum1"></td>
|
||||
<td id="sum2"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<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>
|
||||
|
||||
<div>
|
||||
<button onclick="tf.ExtRegistry.advancedGrid.destroy();">Remove ezEditTable</button>
|
||||
|
|
@ -100,7 +98,7 @@
|
|||
// fill_slc_on_demand: true,
|
||||
rows_counter: true,
|
||||
// enable_default_theme: true,
|
||||
// help_instructions: true,
|
||||
// help_instructions: false,
|
||||
mark_active_columns: true,
|
||||
// auto_filter: false,
|
||||
auto_filter_delay: 200,
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
"grunt-contrib-copy": "^0.8.0",
|
||||
"grunt-contrib-jshint": "^0.11.2",
|
||||
"grunt-contrib-qunit": "^0.7.0",
|
||||
"grunt-contrib-watch": "^0.6.1",
|
||||
"grunt-webpack": "^1.0.8",
|
||||
"script-loader": "^0.6.1",
|
||||
"webpack": "^1.8.10",
|
||||
|
|
|
|||
|
|
@ -107,15 +107,6 @@ export class TableFilter{
|
|||
this.fltTypeMulti = 'multiple';
|
||||
this.fltTypeCheckList = 'checklist';
|
||||
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 ***/
|
||||
|
||||
|
|
@ -269,7 +260,8 @@ export class TableFilter{
|
|||
//id of toolbar container element
|
||||
this.toolBarTgtId = f.toolbar_target_id || null;
|
||||
//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
|
||||
this.popUpFilters = Boolean(f.popup_filters);
|
||||
//active columns color
|
||||
|
|
@ -381,12 +373,6 @@ export class TableFilter{
|
|||
Types.isArray(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 ***/
|
||||
//enables/disables auto filtering, table is filtered when user stops
|
||||
//typing
|
||||
|
|
@ -521,9 +507,7 @@ export class TableFilter{
|
|||
};
|
||||
|
||||
// Extensions registry
|
||||
this.ExtRegistry = {
|
||||
sort: null
|
||||
};
|
||||
this.ExtRegistry = {};
|
||||
|
||||
/*** TF events ***/
|
||||
// let o = this;
|
||||
|
|
@ -713,8 +697,7 @@ export class TableFilter{
|
|||
this.gridLayout)){
|
||||
this.headersRow = 0;
|
||||
}
|
||||
let /*f = this.cfg,*/
|
||||
n = this.singleSearchFlt ? 1 : this.nbCells,
|
||||
let n = this.singleSearchFlt ? 1 : this.nbCells,
|
||||
inpclass;
|
||||
|
||||
// if(global['tf_'+this.id] === undefined){
|
||||
|
|
@ -729,37 +712,26 @@ export class TableFilter{
|
|||
|
||||
if(this.rememberGridValues || this.rememberPageNb ||
|
||||
this.rememberPageLen){
|
||||
//let Store = require('modules/store').Store;
|
||||
// import {Store} from 'modules/store';
|
||||
this.Cpt.store = new Store(this);
|
||||
}
|
||||
|
||||
if(this.gridLayout){
|
||||
// let GridLayout = require('modules/gridLayout').GridLayout;
|
||||
// import {GridLayout} from 'modules/gridLayout';
|
||||
this.Cpt.gridLayout = new GridLayout(this);
|
||||
this.Cpt.gridLayout.init();
|
||||
}
|
||||
|
||||
if(this.loader){
|
||||
if(!this.Cpt.loader){
|
||||
// let Loader = require('modules/loader').Loader;
|
||||
// import {Loader} from 'modules/loader';
|
||||
this.Cpt.loader = new Loader(this);
|
||||
}
|
||||
}
|
||||
|
||||
if(this.highlightKeywords){
|
||||
// let Highlight =
|
||||
// require('modules/highlightKeywords').HighlightKeyword;
|
||||
// import {HighlightKeyword} from 'modules/highlightKeywords';
|
||||
this.Cpt.highlightKeyword = new HighlightKeyword(this);
|
||||
}
|
||||
|
||||
if(this.popUpFilters){
|
||||
if(!this.Cpt.popupFilter){
|
||||
// let PopupFilter = require('modules/popupFilter').PopupFilter;
|
||||
// import {PopupFilter} from 'modules/popupFilter';
|
||||
this.Cpt.popupFilter = new PopupFilter(this);
|
||||
}
|
||||
this.Cpt.popupFilter.init();
|
||||
|
|
@ -813,7 +785,6 @@ export class TableFilter{
|
|||
}
|
||||
|
||||
let fltcell = Dom.create(this.fltCellTag),
|
||||
// col = this['col'+i],
|
||||
col = this.getFilterType(i),
|
||||
externalFltTgtId =
|
||||
this.isExternalFlt && this.externalFltTgtIds ?
|
||||
|
|
@ -828,11 +799,6 @@ export class TableFilter{
|
|||
inpclass = (i==n-1 && this.displayBtn) ?
|
||||
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
|
||||
if(this.singleSearchFlt){
|
||||
col = this.fltTypeInp;
|
||||
|
|
@ -889,10 +855,8 @@ export class TableFilter{
|
|||
// checklist
|
||||
else if(col===this.fltTypeCheckList){
|
||||
let checkList;
|
||||
// if(!this.Cpt.checkList){
|
||||
this.Cpt.checkList = new CheckList(this);
|
||||
checkList = this.Cpt.checkList;
|
||||
// }
|
||||
this.Cpt.checkList = new CheckList(this);
|
||||
checkList = this.Cpt.checkList;
|
||||
|
||||
let divCont = Dom.create('div',
|
||||
['id', checkList.prfxCheckListDiv+i+'_'+this.id],
|
||||
|
|
@ -976,7 +940,6 @@ export class TableFilter{
|
|||
fltcell.appendChild(btn);
|
||||
}
|
||||
|
||||
// btn.onclick = this.Evt.onBtnClick;
|
||||
Event.add(btn, 'click', this.Evt.onBtnClick.bind(this));
|
||||
}//if
|
||||
|
||||
|
|
@ -990,51 +953,35 @@ export class TableFilter{
|
|||
|
||||
/* Filter behaviours */
|
||||
if(this.rowsCounter){
|
||||
// let RowsCounter = require('modules/rowsCounter').RowsCounter;
|
||||
// import {RowsCounter} from 'modules/rowsCounter';
|
||||
this.Cpt.rowsCounter = new RowsCounter(this);
|
||||
this.Cpt.rowsCounter.init();
|
||||
}
|
||||
if(this.statusBar){
|
||||
// let StatusBar = require('modules/statusBar').StatusBar;
|
||||
// import {StatusBar} from 'modules/statusBar';
|
||||
this.Cpt.statusBar = new StatusBar(this);
|
||||
this.Cpt.statusBar.init();
|
||||
}
|
||||
if(this.paging || (this.Cpt.paging && this.Cpt.paging.isPagingRemoved)){
|
||||
// let Paging = require('modules/paging').Paging;
|
||||
// import {Paging} from 'modules/paging';
|
||||
// if(!this.Cpt.paging){
|
||||
this.Cpt.paging = new Paging(this);
|
||||
// }
|
||||
this.Cpt.paging = new Paging(this);
|
||||
this.Cpt.paging.init();
|
||||
}
|
||||
if(this.btnReset){
|
||||
// let ClearButton = require('modules/clearButton').ClearButton;
|
||||
// import {ClearButton} from 'modules/clearButton';
|
||||
this.Cpt.clearButton = new ClearButton(this);
|
||||
this.Cpt.clearButton.init();
|
||||
}
|
||||
if(this.helpInstructions){
|
||||
// let Help = require('modules/help').Help;
|
||||
// import {Help} from 'modules/help';
|
||||
this.Cpt.help = new Help(this);
|
||||
if(!this.Cpt.help){
|
||||
this.Cpt.help = new Help(this);
|
||||
}
|
||||
this.Cpt.help.init();
|
||||
}
|
||||
if(this.hasColWidths && !this.gridLayout){
|
||||
this.setColWidths();
|
||||
}
|
||||
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.init();
|
||||
}
|
||||
if(this.hasColOperation){
|
||||
// let ColOps = require('modules/colOps').ColOps;
|
||||
// import {ColOps} from 'modules/colOps';
|
||||
this.Cpt.colOps = new ColOps(this);
|
||||
this.Cpt.colOps.calc();
|
||||
}
|
||||
|
|
@ -1274,23 +1221,22 @@ export class TableFilter{
|
|||
return;
|
||||
}
|
||||
let rows = this.tbl.rows,
|
||||
Cpt = this.Cpt/*,
|
||||
ExtRegistry = this.ExtRegistry*/;
|
||||
if(this.paging){
|
||||
Cpt.paging.destroy();
|
||||
}
|
||||
if(this.statusBar){
|
||||
Cpt.statusBar.destroy();
|
||||
}
|
||||
if(this.rowsCounter){
|
||||
Cpt.rowsCounter.destroy();
|
||||
}
|
||||
if(this.btnReset){
|
||||
Cpt.clearButton.destroy();
|
||||
}
|
||||
if(this.helpInstructions){
|
||||
Cpt.help.destroy();
|
||||
}
|
||||
Cpt = this.Cpt;
|
||||
// if(this.paging){
|
||||
// Cpt.paging.destroy();
|
||||
// }
|
||||
// if(this.statusBar){
|
||||
// Cpt.statusBar.destroy();
|
||||
// }
|
||||
// if(this.rowsCounter){
|
||||
// Cpt.rowsCounter.destroy();
|
||||
// }
|
||||
// if(this.btnReset){
|
||||
// Cpt.clearButton.destroy();
|
||||
// }
|
||||
// if(this.helpInstructions){
|
||||
// Cpt.help.destroy();
|
||||
// }
|
||||
if(this.isExternalFlt && !this.popUpFilters){
|
||||
this.removeExternalFlts();
|
||||
}
|
||||
|
|
@ -1300,12 +1246,12 @@ export class TableFilter{
|
|||
if(this.highlightKeywords){
|
||||
Cpt.highlightKeyword.unhighlightAll();
|
||||
}
|
||||
if(this.loader){
|
||||
Cpt.loader.destroy();
|
||||
}
|
||||
if(this.popUpFilters){
|
||||
Cpt.popupFilter.destroy();
|
||||
}
|
||||
// if(this.loader){
|
||||
// Cpt.loader.destroy();
|
||||
// }
|
||||
// if(this.popUpFilters){
|
||||
// Cpt.popupFilter.destroy();
|
||||
// }
|
||||
if(this.markActiveColumns){
|
||||
this.clearActiveColumns();
|
||||
}
|
||||
|
|
@ -1316,20 +1262,20 @@ export class TableFilter{
|
|||
//this loop shows all rows and removes validRow attribute
|
||||
for(let j=this.refRow; j<this.nbRows; j++){
|
||||
rows[j].style.display = '';
|
||||
try{
|
||||
// try{
|
||||
if(rows[j].hasAttribute('validRow')){
|
||||
rows[j].removeAttribute('validRow');
|
||||
}
|
||||
} catch(e) {
|
||||
//ie<=6 doesn't support hasAttribute method
|
||||
let row = rows[j];
|
||||
let attribs = row.attributes;
|
||||
for(let x=0, len=attribs.length; x<len; x++){
|
||||
if(Str.lower(attribs.nodeName)==='validrow'){
|
||||
row.removeAttribute('validRow');
|
||||
}
|
||||
}
|
||||
}
|
||||
// } catch(e) {
|
||||
// //ie<=6 doesn't support hasAttribute method
|
||||
// let row = rows[j];
|
||||
// let attribs = row.attributes;
|
||||
// for(let x=0, len=attribs.length; x<len; x++){
|
||||
// if(Str.lower(attribs.nodeName)==='validrow'){
|
||||
// row.removeAttribute('validRow');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
//removes alternating colors
|
||||
if(this.alternateBgs){
|
||||
|
|
@ -1342,9 +1288,16 @@ export class TableFilter{
|
|||
this.fltGridEl = rows[this.filtersRowIndex];
|
||||
this.tbl.deleteRow(this.filtersRowIndex);
|
||||
}
|
||||
if(this.gridLayout){
|
||||
Cpt.gridLayout.destroy();
|
||||
}
|
||||
// if(this.gridLayout){
|
||||
// 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);
|
||||
this.activeFlt = null;
|
||||
this.isStartBgAlternate = true;
|
||||
|
|
@ -1376,7 +1329,10 @@ export class TableFilter{
|
|||
}
|
||||
//default location: just above the table
|
||||
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);
|
||||
|
||||
|
|
@ -1399,8 +1355,9 @@ export class TableFilter{
|
|||
infdiv.appendChild(mdiv);
|
||||
this.mDiv = Dom.id(this.prfxMDiv+this.id);
|
||||
|
||||
// Enable help instructions by default if topbar is generated
|
||||
if(!this.helpInstructions){
|
||||
// Enable help instructions by default if topbar is generated and not
|
||||
// explicitely set to false
|
||||
if(Types.isUndef(this.helpInstructions)){
|
||||
if(!this.Cpt.help){
|
||||
this.Cpt.help = new Help(this);
|
||||
}
|
||||
|
|
@ -1455,16 +1412,6 @@ export class TableFilter{
|
|||
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
|
||||
multiple selections programatically, only last
|
||||
|
|
@ -1584,10 +1531,10 @@ export class TableFilter{
|
|||
continue;
|
||||
}
|
||||
let s, opt;
|
||||
let fltType = this.getFilterType(i);
|
||||
// if fillSlcOnDemand, drop-down needs to contain stored
|
||||
// value(s) for filtering
|
||||
if(this['col'+i]===this.fltTypeSlc ||
|
||||
this['col'+i]===this.fltTypeMulti){
|
||||
if(fltType===this.fltTypeSlc || fltType===this.fltTypeMulti){
|
||||
let slc = Dom.id( this.fltIds[i] );
|
||||
slc.options[0].selected = false;
|
||||
|
||||
|
|
@ -1616,7 +1563,7 @@ export class TableFilter{
|
|||
}
|
||||
}// if multiFltsIndex
|
||||
}
|
||||
else if(this['col'+i]==this.fltTypeCheckList){
|
||||
else if(fltType===this.fltTypeCheckList){
|
||||
let checkList = this.Cpt.checkList;
|
||||
let divChk = checkList.checkListDiv[i];
|
||||
divChk.title = divChk.innerHTML;
|
||||
|
|
@ -1834,46 +1781,46 @@ export class TableFilter{
|
|||
// lower equal
|
||||
if(hasLE){
|
||||
occurence = num_cell_data <= removeNbFormat(
|
||||
sA.replace(re_le,''), nbFormat);
|
||||
sA.replace(re_le, ''), nbFormat);
|
||||
}
|
||||
//greater equal
|
||||
else if(hasGE){
|
||||
occurence = num_cell_data >= removeNbFormat(
|
||||
sA.replace(re_ge,''), nbFormat);
|
||||
sA.replace(re_ge, ''), nbFormat);
|
||||
}
|
||||
//lower
|
||||
else if(hasLO){
|
||||
occurence = num_cell_data < removeNbFormat(
|
||||
sA.replace(re_l,''), nbFormat);
|
||||
sA.replace(re_l, ''), nbFormat);
|
||||
}
|
||||
//greater
|
||||
else if(hasGR){
|
||||
occurence = num_cell_data > removeNbFormat(
|
||||
sA.replace(re_g,''), nbFormat);
|
||||
sA.replace(re_g, ''), nbFormat);
|
||||
}
|
||||
//different
|
||||
else if(hasDF){
|
||||
occurence = this._containsStr(
|
||||
sA.replace(re_d,''),cell_data) ? false : true;
|
||||
sA.replace(re_d, ''),cell_data) ? false : true;
|
||||
}
|
||||
//like
|
||||
else if(hasLK){
|
||||
occurence = this._containsStr(
|
||||
sA.replace(re_lk,''), cell_data, null, false);
|
||||
sA.replace(re_lk, ''), cell_data, null, false);
|
||||
}
|
||||
//equal
|
||||
else if(hasEQ){
|
||||
occurence = this._containsStr(
|
||||
sA.replace(re_eq,''), cell_data, null, true);
|
||||
sA.replace(re_eq, ''), cell_data, null, true);
|
||||
}
|
||||
//starts with
|
||||
else if(hasST){
|
||||
occurence = cell_data.indexOf(sA.replace(re_st,''))===0 ?
|
||||
occurence = cell_data.indexOf(sA.replace(re_st, ''))===0 ?
|
||||
true : false;
|
||||
}
|
||||
//ends with
|
||||
else if(hasEN){
|
||||
let searchArg = sA.replace(re_en,'');
|
||||
let searchArg = sA.replace(re_en, '');
|
||||
occurence =
|
||||
cell_data.lastIndexOf(searchArg,cell_data.length-1) ===
|
||||
(cell_data.length-1)-(searchArg.length-1) &&
|
||||
|
|
@ -1899,9 +1846,6 @@ export class TableFilter{
|
|||
} catch(e) { occurence = false; }
|
||||
}
|
||||
else{
|
||||
// let fCol = f['col_'+j];
|
||||
// occurence = this._containsStr(
|
||||
// sA, cell_data, !fCol ? this.fltTypeInp : fCol);
|
||||
occurence = this._containsStr(
|
||||
sA, cell_data, this.getFilterType(j));
|
||||
}
|
||||
|
|
@ -2104,7 +2048,7 @@ export class TableFilter{
|
|||
let isExludedRow = false;
|
||||
// checks if current row index appears in exclude array
|
||||
if(exclude && Types.isArray(exclude)){
|
||||
isExludedRow = Arr.has(exclude, i); //boolean
|
||||
isExludedRow = Arr.has(exclude, i);
|
||||
}
|
||||
let cell = row[i].cells,
|
||||
nchilds = cell.length;
|
||||
|
|
@ -2116,15 +2060,13 @@ export class TableFilter{
|
|||
if(j != colindex || row[i].style.display != ''){
|
||||
continue;
|
||||
}
|
||||
// if(j === colindex && row[i].style.display === ''){
|
||||
let cell_data = Str.lower(this.getCellData(j, cell[j])),
|
||||
nbFormat = this.colNbFormat ?
|
||||
this.colNbFormat[colindex] : null,
|
||||
data = num ?
|
||||
Helpers.removeNbFormat(cell_data,nbFormat) :
|
||||
Helpers.removeNbFormat(cell_data, nbFormat) :
|
||||
cell_data;
|
||||
colValues.push(data);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2145,7 +2087,8 @@ export class TableFilter{
|
|||
if(!flt){
|
||||
return '';
|
||||
}
|
||||
let fltColType = this.fltCol[index];
|
||||
// let fltColType = this.fltCol[index];
|
||||
let fltColType = this.getFilterType(index);
|
||||
if(fltColType !== this.fltTypeMulti &&
|
||||
fltColType !== this.fltTypeCheckList){
|
||||
fltValue = flt.value;
|
||||
|
|
@ -2222,7 +2165,7 @@ export class TableFilter{
|
|||
}
|
||||
let arr = [];
|
||||
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)){
|
||||
let a = bool ? i : this.fltIds[i];
|
||||
arr.push(a);
|
||||
|
|
@ -2246,8 +2189,9 @@ export class TableFilter{
|
|||
* @param {Number} rowIndex Index of the row
|
||||
* @return {Number} Number of cells
|
||||
*/
|
||||
getCellsNb(rowIndex){
|
||||
let tr = !rowIndex ? this.tbl.rows[0] : this.tbl.rows[rowIndex];
|
||||
getCellsNb(rowIndex=0){
|
||||
// let tr = !rowIndex ? this.tbl.rows[0] : this.tbl.rows[rowIndex];
|
||||
let tr = this.tbl.rows[rowIndex];
|
||||
return tr.cells.length;
|
||||
}
|
||||
|
||||
|
|
@ -2258,7 +2202,7 @@ export class TableFilter{
|
|||
* @return {Number} Number of filterable rows
|
||||
*/
|
||||
getRowsNb(includeHeaders){
|
||||
let s = !this.refRow ? 0 : this.refRow,
|
||||
let s = Types.isUndef(this.refRow) ? 0 : this.refRow,
|
||||
ntrs = this.tbl.rows.length;
|
||||
if(includeHeaders){ s = 0; }
|
||||
return parseInt(ntrs-s, 10);
|
||||
|
|
@ -2437,7 +2381,6 @@ export class TableFilter{
|
|||
}
|
||||
let slc = this.getFilterElement(index),
|
||||
// execFilter = doFilter===undefined ? true : doFilter,
|
||||
// fltColType = this['col'+index];
|
||||
fltColType = this.getFilterType(index);
|
||||
|
||||
if(fltColType !== this.fltTypeMulti &&
|
||||
|
|
@ -2449,14 +2392,15 @@ export class TableFilter{
|
|||
let s = searcharg.split(' '+this.orOperator+' ');
|
||||
// let ct = 0; //keywords counter
|
||||
for(let j=0, len=slc.options.length; j<len; j++){
|
||||
let option = slc.options[j];
|
||||
if(s==='' || s[0]===''){
|
||||
slc.options[j].selected = false;
|
||||
option.selected = false;
|
||||
}
|
||||
if(slc.options[j].value===''){
|
||||
slc.options[j].selected = false;
|
||||
if(option.value===''){
|
||||
option.selected = false;
|
||||
}
|
||||
if(slc.options[j].value!=='' &&
|
||||
Arr.has(s, slc.options[j].value, true)){
|
||||
if(option.value!=='' &&
|
||||
Arr.has(s, option.value, true)){
|
||||
// IE multiple selection work-around
|
||||
// if(hlp.isIE()){
|
||||
// //when last value reached filtering can be executed
|
||||
|
|
@ -2468,7 +2412,7 @@ export class TableFilter{
|
|||
// else{
|
||||
// slc.options[j].selected = true;
|
||||
// }
|
||||
slc.options[j].selected = true;
|
||||
option.selected = true;
|
||||
}//if
|
||||
}//for j
|
||||
}
|
||||
|
|
@ -2697,7 +2641,8 @@ export class TableFilter{
|
|||
|
||||
let externalFltEl = this.externalFltEls[ct];
|
||||
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
|
||||
//empty
|
||||
if(this.gridLayout &&
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
/* TABLE LAYOUT
|
||||
=====================================================*/
|
||||
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-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;
|
||||
margin:0; width:120px; vertical-align:middle;
|
||||
}
|
||||
.fltWatermark{ /* watermark input */
|
||||
/*.fltWatermark{ watermark input
|
||||
color:#999;
|
||||
}
|
||||
}*/
|
||||
.div_checklist{ /* div containing checklist */
|
||||
width:100%; height:100px;
|
||||
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;
|
||||
}
|
||||
.ldiv{ /* left div */
|
||||
float:left; width:30%; position:inherit;
|
||||
float:left;
|
||||
width:30%;
|
||||
position:inherit;
|
||||
text-align:left;
|
||||
}
|
||||
.mdiv{ /* middle div */
|
||||
float:left; width:38%; position:inherit; text-align:center;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
test("TableFilter object", function() {
|
||||
equal(tf.id, 'demo', 'id check');
|
||||
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');
|
||||
|
|
|
|||
Loading…
Reference in New Issue