mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-12 03:16:48 +02:00
Added alternate rows compenent
This commit is contained in:
parent
d866dbbb2e
commit
8ac4ab8548
2
dist/filtergrid.css
vendored
2
dist/filtergrid.css
vendored
|
@ -1,6 +1,6 @@
|
||||||
/*------------------------------------------------------------------------
|
/*------------------------------------------------------------------------
|
||||||
- TableFilter stylesheet by Max Guglielmi
|
- TableFilter stylesheet by Max Guglielmi
|
||||||
- (build date: Sat Nov 08 2014 23:36:20)
|
- (build date: Sun Nov 09 2014 19:28:32)
|
||||||
- Edit below for your projects' needs
|
- Edit below for your projects' needs
|
||||||
------------------------------------------------------------------------*/
|
------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
|
10
dist/tablefilter.js
vendored
10
dist/tablefilter.js
vendored
File diff suppressed because one or more lines are too long
112
src/core.js
112
src/core.js
|
@ -198,10 +198,10 @@ function TableFilter(id) {
|
||||||
//defines css class for single-filter
|
//defines css class for single-filter
|
||||||
this.singleFltCssClass = f.single_flt_css_class || 'single_flt';
|
this.singleFltCssClass = f.single_flt_css_class || 'single_flt';
|
||||||
this.isStartBgAlternate = true;
|
this.isStartBgAlternate = true;
|
||||||
//defines css class for even rows
|
// //defines css class for even rows
|
||||||
this.rowBgEvenCssClass = f.even_row_css_class || 'even';
|
// this.rowBgEvenCssClass = f.even_row_css_class || 'even';
|
||||||
//defines css class for odd rows
|
// //defines css class for odd rows
|
||||||
this.rowBgOddCssClass = f.odd_row_css_class || 'odd';
|
// this.rowBgOddCssClass = f.odd_row_css_class || 'odd';
|
||||||
|
|
||||||
/*** filters' grid behaviours ***/
|
/*** filters' grid behaviours ***/
|
||||||
//enables/disables enter key
|
//enables/disables enter key
|
||||||
|
@ -677,7 +677,10 @@ function TableFilter(id) {
|
||||||
this.themesPath = f.themes_path || this.basePath+'TF_Themes/';
|
this.themesPath = f.themes_path || this.basePath+'TF_Themes/';
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
this.loaderCpt = null;
|
this.Cpt = {
|
||||||
|
loader: null,
|
||||||
|
alternateRows: null
|
||||||
|
};
|
||||||
|
|
||||||
/*** TF events ***/
|
/*** TF events ***/
|
||||||
var o = this;
|
var o = this;
|
||||||
|
@ -942,7 +945,7 @@ TableFilter.prototype = {
|
||||||
|
|
||||||
if(this.loader){
|
if(this.loader){
|
||||||
var Loader = require('modules/loader');
|
var Loader = require('modules/loader');
|
||||||
this.loaderCpt = new Loader(this);
|
this.Cpt.loader = new Loader(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.popUpFilters){
|
if(this.popUpFilters){
|
||||||
|
@ -1217,7 +1220,9 @@ TableFilter.prototype = {
|
||||||
}
|
}
|
||||||
if(this.alternateBgs && this.isStartBgAlternate){
|
if(this.alternateBgs && this.isStartBgAlternate){
|
||||||
//1st time only if no paging and rememberGridValues
|
//1st time only if no paging and rememberGridValues
|
||||||
this.SetAlternateRows();
|
var AlternateRows = require('modules/alternateRows');
|
||||||
|
this.Cpt.alternateRows = new AlternateRows(this);
|
||||||
|
this.Cpt.alternateRows.set();
|
||||||
}
|
}
|
||||||
if(this.hasColOperation && this.fltGrid){
|
if(this.hasColOperation && this.fltGrid){
|
||||||
this.colOperation = f.col_operation;
|
this.colOperation = f.col_operation;
|
||||||
|
@ -1244,7 +1249,7 @@ TableFilter.prototype = {
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.loader){
|
if(this.loader){
|
||||||
this.loaderCpt.show('none');
|
this.Cpt.loader.show('none');
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Loads extensions */
|
/* Loads extensions */
|
||||||
|
@ -1329,13 +1334,13 @@ TableFilter.prototype = {
|
||||||
o.StatusMsg('');
|
o.StatusMsg('');
|
||||||
}
|
}
|
||||||
if(o.loader){
|
if(o.loader){
|
||||||
o.loaderCpt.show('none');
|
o.Cpt.loader.show('none');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.loader || this.status || this.statusBar) {
|
if(this.loader || this.status || this.statusBar) {
|
||||||
try{
|
try{
|
||||||
this.loaderCpt.show('');
|
this.Cpt.loader.show('');
|
||||||
this.StatusMsg(o['msg'+evt]);
|
this.StatusMsg(o['msg'+evt]);
|
||||||
} catch(e){}
|
} catch(e){}
|
||||||
global.setTimeout(efx, this.execDelay);
|
global.setTimeout(efx, this.execDelay);
|
||||||
|
@ -1527,7 +1532,7 @@ TableFilter.prototype = {
|
||||||
this.RemoveSort();
|
this.RemoveSort();
|
||||||
}
|
}
|
||||||
if(this.loader){
|
if(this.loader){
|
||||||
this.loaderCpt.remove();
|
this.Cpt.loader.remove();
|
||||||
}
|
}
|
||||||
if(this.popUpFilters){
|
if(this.popUpFilters){
|
||||||
this.RemovePopupFilters();
|
this.RemovePopupFilters();
|
||||||
|
@ -1558,7 +1563,7 @@ TableFilter.prototype = {
|
||||||
|
|
||||||
//removes alternating colors
|
//removes alternating colors
|
||||||
if(this.alternateBgs){
|
if(this.alternateBgs){
|
||||||
this.RemoveRowBg(j);
|
this.Cpt.alternateRows.removeRowBg(j);
|
||||||
}
|
}
|
||||||
|
|
||||||
}//for j
|
}//for j
|
||||||
|
@ -2024,7 +2029,7 @@ TableFilter.prototype = {
|
||||||
o.AddPaging(false);
|
o.AddPaging(false);
|
||||||
}
|
}
|
||||||
if(o.alternateBgs){
|
if(o.alternateBgs){
|
||||||
o.SetAlternateRows();
|
o.Cpt.alternateRows.set();
|
||||||
}
|
}
|
||||||
if(fnE){
|
if(fnE){
|
||||||
fnE.call(null, arguments[0], arguments[1], arguments[2]);
|
fnE.call(null, arguments[0], arguments[1], arguments[2]);
|
||||||
|
@ -2044,7 +2049,7 @@ TableFilter.prototype = {
|
||||||
o.AddPaging(false);
|
o.AddPaging(false);
|
||||||
}
|
}
|
||||||
if(o.alternateBgs){
|
if(o.alternateBgs){
|
||||||
o.SetAlternateRows();
|
o.Cpt.alternateRows.set();
|
||||||
}
|
}
|
||||||
if(fnF){
|
if(fnF){
|
||||||
fnF.call(null, arguments[0], arguments[1]);
|
fnF.call(null, arguments[0], arguments[1]);
|
||||||
|
@ -2514,12 +2519,12 @@ TableFilter.prototype = {
|
||||||
r.style.display = '';
|
r.style.display = '';
|
||||||
}
|
}
|
||||||
if(this.alternateBgs){
|
if(this.alternateBgs){
|
||||||
this.SetRowBg(this.validRowsIndex[h], h);
|
this.Cpt.alternateRows(this.validRowsIndex[h], h);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
r.style.display = 'none';
|
r.style.display = 'none';
|
||||||
if(this.alternateBgs){
|
if(this.alternateBgs){
|
||||||
this.RemoveRowBg(this.validRowsIndex[h]);
|
this.Cpt.alternateRows.removeRowBg(this.validRowsIndex[h]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -4650,78 +4655,6 @@ TableFilter.prototype = {
|
||||||
}//end if
|
}//end if
|
||||||
},
|
},
|
||||||
|
|
||||||
/*====================================================
|
|
||||||
- sets row background color
|
|
||||||
- Params:
|
|
||||||
- rIndex: row index (numeric value)
|
|
||||||
- index: valid row collection index needed to
|
|
||||||
calculate bg color
|
|
||||||
=====================================================*/
|
|
||||||
SetRowBg: function(rIndex,index){
|
|
||||||
if(!this.alternateBgs || isNaN(rIndex)){
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var rows = this.tbl.rows;
|
|
||||||
var i = !index ? rIndex : index;
|
|
||||||
this.RemoveRowBg(rIndex);
|
|
||||||
dom.addClass(
|
|
||||||
rows[rIndex],
|
|
||||||
(i%2) ? this.rowBgEvenCssClass : this.rowBgOddCssClass
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
/*====================================================
|
|
||||||
- removes row background color
|
|
||||||
- Params:
|
|
||||||
- index: row index (numeric value)
|
|
||||||
=====================================================*/
|
|
||||||
RemoveRowBg: function(index){
|
|
||||||
if(isNaN(index)){
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var rows = this.tbl.rows;
|
|
||||||
dom.removeClass(rows[index],this.rowBgOddCssClass);
|
|
||||||
dom.removeClass(rows[index],this.rowBgEvenCssClass);
|
|
||||||
},
|
|
||||||
|
|
||||||
/*====================================================
|
|
||||||
- alternates row colors for better readability
|
|
||||||
=====================================================*/
|
|
||||||
SetAlternateRows: function(){
|
|
||||||
if(!this.hasGrid && !this.isFirstLoad){
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var rows = this.tbl.rows;
|
|
||||||
var noValidRowsIndex = this.validRowsIndex===null;
|
|
||||||
//1st index
|
|
||||||
var beginIndex = noValidRowsIndex ? this.refRow : 0;
|
|
||||||
// nb indexes
|
|
||||||
var indexLen = noValidRowsIndex ? (this.nbFilterableRows+beginIndex) :
|
|
||||||
this.validRowsIndex.length;
|
|
||||||
|
|
||||||
var idx = 0;
|
|
||||||
//alternates bg color
|
|
||||||
for(var j=beginIndex; j<indexLen; j++){
|
|
||||||
var rIndex = (noValidRowsIndex) ? j : this.validRowsIndex[j];
|
|
||||||
this.SetRowBg(rIndex,idx);
|
|
||||||
idx++;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/*====================================================
|
|
||||||
- removes alternate row colors
|
|
||||||
=====================================================*/
|
|
||||||
RemoveAlternateRows: function(){
|
|
||||||
if(!this.hasGrid){
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var row = this.tbl.rows;
|
|
||||||
for(var i=this.refRow; i<this.nbRows; i++){
|
|
||||||
this.RemoveRowBg(i);
|
|
||||||
}
|
|
||||||
this.isStartBgAlternate = true;
|
|
||||||
},
|
|
||||||
|
|
||||||
/*====================================================
|
/*====================================================
|
||||||
- CSS solution making headers fixed
|
- CSS solution making headers fixed
|
||||||
=====================================================*/
|
=====================================================*/
|
||||||
|
@ -5189,7 +5122,8 @@ TableFilter.prototype = {
|
||||||
this.SetRowValidation(k,true);
|
this.SetRowValidation(k,true);
|
||||||
this.validRowsIndex.push(k);
|
this.validRowsIndex.push(k);
|
||||||
if(this.alternateBgs){
|
if(this.alternateBgs){
|
||||||
this.SetRowBg(k,this.validRowsIndex.length);
|
this.Cpt.alternateRows.setRowBg(
|
||||||
|
k, this.validRowsIndex.length);
|
||||||
}
|
}
|
||||||
if(this.onRowValidated){
|
if(this.onRowValidated){
|
||||||
this.onRowValidated.call(null,this,k);
|
this.onRowValidated.call(null,this,k);
|
||||||
|
|
98
src/modules/alternateRows.js
Normal file
98
src/modules/alternateRows.js
Normal file
|
@ -0,0 +1,98 @@
|
||||||
|
define(['../dom'], function (dom) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Alternating rows color
|
||||||
|
* @param {Object} tf TableFilter instance
|
||||||
|
*/
|
||||||
|
function AlternateRows(tf) {
|
||||||
|
var f = tf.fObj;
|
||||||
|
//defines css class for even rows
|
||||||
|
this.evenCss = f.even_row_css_class || 'even';
|
||||||
|
//defines css class for odd rows
|
||||||
|
this.oddCss = f.odd_row_css_class || 'odd';
|
||||||
|
|
||||||
|
this.tf = tf;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets alternating rows color
|
||||||
|
*/
|
||||||
|
AlternateRows.prototype.set = function() {
|
||||||
|
if(!this.tf.hasGrid && !this.tf.isFirstLoad){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var rows = this.tf.tbl.rows;
|
||||||
|
var noValidRowsIndex = this.tf.validRowsIndex===null;
|
||||||
|
//1st index
|
||||||
|
var beginIndex = noValidRowsIndex ? this.tf.refRow : 0;
|
||||||
|
// nb indexes
|
||||||
|
var indexLen = noValidRowsIndex ?
|
||||||
|
this.tf.nbFilterableRows+beginIndex :
|
||||||
|
this.tf.validRowsIndex.length;
|
||||||
|
var idx = 0;
|
||||||
|
|
||||||
|
//alternates bg color
|
||||||
|
for(var j=beginIndex; j<indexLen; j++){
|
||||||
|
var rowIdx = noValidRowsIndex ? j : this.tf.validRowsIndex[j];
|
||||||
|
this.setRowBg(rowIdx, idx);
|
||||||
|
idx++;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets row background color
|
||||||
|
* @param {Number} rowIdx Row index
|
||||||
|
* @param {Number} idx Valid rows collection index needed to calculate bg
|
||||||
|
* color
|
||||||
|
*/
|
||||||
|
AlternateRows.prototype.setRowBg = function(rowIdx, idx) {
|
||||||
|
if(!this.tf.alternateBgs || isNaN(rowIdx)){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var rows = this.tf.tbl.rows;
|
||||||
|
var i = !idx ? rowIdx : idx;
|
||||||
|
this.removeRowBg(rowIdx);
|
||||||
|
dom.addClass(
|
||||||
|
rows[rowIdx],
|
||||||
|
(i%2) ? this.evenCss : this.oddCss
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Removes row background color
|
||||||
|
* @param {Number} idx Row index
|
||||||
|
*/
|
||||||
|
AlternateRows.prototype.removeRowBg = function(idx) {
|
||||||
|
if(isNaN(idx)){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var rows = this.tf.tbl.rows;
|
||||||
|
dom.removeClass(rows[idx], this.oddCss);
|
||||||
|
dom.removeClass(rows[idx], this.evenCss);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Removes all row background color
|
||||||
|
*/
|
||||||
|
AlternateRows.prototype.remove = function() {
|
||||||
|
if(!this.tf.hasGrid){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var row = this.tf.tbl.rows;
|
||||||
|
for(var i=this.tf.refRow; i<this.tf.nbRows; i++){
|
||||||
|
this.removeRowBg(i);
|
||||||
|
}
|
||||||
|
this.tf.isStartBgAlternate = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
AlternateRows.prototype.enable = function() {
|
||||||
|
this.tf.alternateBgs = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
AlternateRows.prototype.disable = function() {
|
||||||
|
this.tf.alternateBgs = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
return AlternateRows;
|
||||||
|
});
|
|
@ -9,7 +9,7 @@ define(['../dom', '../types'], function (dom, types) {
|
||||||
*/
|
*/
|
||||||
function Loader(tf){
|
function Loader(tf){
|
||||||
|
|
||||||
// Original configuration
|
// TableFilter configuration
|
||||||
var f = tf.fObj;
|
var f = tf.fObj;
|
||||||
//id of container element
|
//id of container element
|
||||||
tf.loaderTgtId = f.loader_target_id || null;
|
tf.loaderTgtId = f.loader_target_id || null;
|
||||||
|
@ -32,7 +32,7 @@ define(['../dom', '../types'], function (dom, types) {
|
||||||
|
|
||||||
this.tf = tf;
|
this.tf = tf;
|
||||||
|
|
||||||
var containerDiv = dom.create('div',['id', tf.prfxLoader+tf.id]);
|
var containerDiv = dom.create('div', ['id', tf.prfxLoader+tf.id]);
|
||||||
containerDiv.className = tf.loaderCssClass;
|
containerDiv.className = tf.loaderCssClass;
|
||||||
|
|
||||||
var targetEl = !tf.loaderTgtId ?
|
var targetEl = !tf.loaderTgtId ?
|
||||||
|
|
82
test/test-alternate-rows.html
Normal file
82
test/test-alternate-rows.html
Normal file
|
@ -0,0 +1,82 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>TableFilter basic test</title>
|
||||||
|
<link rel="stylesheet" href="libs/qunit/qunit.css">
|
||||||
|
<link rel="stylesheet" href="../dist/filtergrid.css">
|
||||||
|
<script src="libs/qunit/qunit.js"></script>
|
||||||
|
<script>
|
||||||
|
// Defer Qunit so RequireJS can work its magic and resolve all modules.
|
||||||
|
QUnit.config.autostart = false;
|
||||||
|
QUnit.config.autoload = false;
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<table id="demo" cellpadding="0" cellspacing="0">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>From</th>
|
||||||
|
<th>Destination</th>
|
||||||
|
<th>Road Distance (km)</th>
|
||||||
|
<th>By Air (hrs)</th>
|
||||||
|
<th>By Rail (hrs)</th>
|
||||||
|
</tr>
|
||||||
|
<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 data-main="test-alternate-rows" src="../libs/requirejs/require.js"></script>
|
||||||
|
|
||||||
|
<div id="qunit"></div>
|
||||||
|
<div id="qunit-fixture"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
19
test/test-alternate-rows.js
Normal file
19
test/test-alternate-rows.js
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
requirejs(['test-config', '../src/core'], function(config, TableFilter){
|
||||||
|
|
||||||
|
QUnit.start();
|
||||||
|
|
||||||
|
var dom = require('dom'),
|
||||||
|
AlternateRows = require('modules/alternateRows');
|
||||||
|
|
||||||
|
var tf = new TableFilter('demo', {
|
||||||
|
alternate_rows: true
|
||||||
|
});
|
||||||
|
tf.init();
|
||||||
|
|
||||||
|
module("Sanity checks");
|
||||||
|
test("AlternateRows component", function() {
|
||||||
|
deepEqual(tf.Cpt.alternateRows instanceof AlternateRows, true, 'AlternateRows constructor');
|
||||||
|
notEqual(tf.Cpt.alternateRows, null, 'AlternateRows instanciated');
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
|
@ -12,8 +12,8 @@ requirejs(['test-config', '../src/core'], function(config, TableFilter){
|
||||||
|
|
||||||
module("Sanity checks");
|
module("Sanity checks");
|
||||||
test("Loader component", function() {
|
test("Loader component", function() {
|
||||||
deepEqual(tf.loaderCpt instanceof Loader, true, 'Loader constructor');
|
deepEqual(tf.Cpt.loader instanceof Loader, true, 'Loader constructor');
|
||||||
notEqual(tf.loaderCpt, null, 'Loader instanciated');
|
notEqual(tf.Cpt.loader, null, 'Loader instanciated');
|
||||||
notEqual(dom.id(tf.prfxLoader+tf.id), null, 'Loader DOM container');
|
notEqual(dom.id(tf.prfxLoader+tf.id), null, 'Loader DOM container');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue