mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-04-27 20:32:54 +02:00
Added alternate rows compenent
This commit is contained in:
Max Guglielmi
parent
d866dbbb2e
commit
8ac4ab8548
2
dist/filtergrid.css
vendored
2
dist/filtergrid.css
vendored
|
|
@ -1,6 +1,6 @@
|
|||
/*------------------------------------------------------------------------
|
||||
- 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
|
||||
------------------------------------------------------------------------*/
|
||||
|
||||
|
|
|
|||
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
|
||||
this.singleFltCssClass = f.single_flt_css_class || 'single_flt';
|
||||
this.isStartBgAlternate = true;
|
||||
//defines css class for even rows
|
||||
this.rowBgEvenCssClass = f.even_row_css_class || 'even';
|
||||
//defines css class for odd rows
|
||||
this.rowBgOddCssClass = f.odd_row_css_class || 'odd';
|
||||
// //defines css class for even rows
|
||||
// this.rowBgEvenCssClass = f.even_row_css_class || 'even';
|
||||
// //defines css class for odd rows
|
||||
// this.rowBgOddCssClass = f.odd_row_css_class || 'odd';
|
||||
|
||||
/*** filters' grid behaviours ***/
|
||||
//enables/disables enter key
|
||||
|
|
@ -677,7 +677,10 @@ function TableFilter(id) {
|
|||
this.themesPath = f.themes_path || this.basePath+'TF_Themes/';
|
||||
|
||||
// Components
|
||||
this.loaderCpt = null;
|
||||
this.Cpt = {
|
||||
loader: null,
|
||||
alternateRows: null
|
||||
};
|
||||
|
||||
/*** TF events ***/
|
||||
var o = this;
|
||||
|
|
@ -942,7 +945,7 @@ TableFilter.prototype = {
|
|||
|
||||
if(this.loader){
|
||||
var Loader = require('modules/loader');
|
||||
this.loaderCpt = new Loader(this);
|
||||
this.Cpt.loader = new Loader(this);
|
||||
}
|
||||
|
||||
if(this.popUpFilters){
|
||||
|
|
@ -1217,7 +1220,9 @@ TableFilter.prototype = {
|
|||
}
|
||||
if(this.alternateBgs && this.isStartBgAlternate){
|
||||
//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){
|
||||
this.colOperation = f.col_operation;
|
||||
|
|
@ -1244,7 +1249,7 @@ TableFilter.prototype = {
|
|||
}
|
||||
|
||||
if(this.loader){
|
||||
this.loaderCpt.show('none');
|
||||
this.Cpt.loader.show('none');
|
||||
}
|
||||
|
||||
/* Loads extensions */
|
||||
|
|
@ -1329,13 +1334,13 @@ TableFilter.prototype = {
|
|||
o.StatusMsg('');
|
||||
}
|
||||
if(o.loader){
|
||||
o.loaderCpt.show('none');
|
||||
o.Cpt.loader.show('none');
|
||||
}
|
||||
}
|
||||
|
||||
if(this.loader || this.status || this.statusBar) {
|
||||
try{
|
||||
this.loaderCpt.show('');
|
||||
this.Cpt.loader.show('');
|
||||
this.StatusMsg(o['msg'+evt]);
|
||||
} catch(e){}
|
||||
global.setTimeout(efx, this.execDelay);
|
||||
|
|
@ -1527,7 +1532,7 @@ TableFilter.prototype = {
|
|||
this.RemoveSort();
|
||||
}
|
||||
if(this.loader){
|
||||
this.loaderCpt.remove();
|
||||
this.Cpt.loader.remove();
|
||||
}
|
||||
if(this.popUpFilters){
|
||||
this.RemovePopupFilters();
|
||||
|
|
@ -1558,7 +1563,7 @@ TableFilter.prototype = {
|
|||
|
||||
//removes alternating colors
|
||||
if(this.alternateBgs){
|
||||
this.RemoveRowBg(j);
|
||||
this.Cpt.alternateRows.removeRowBg(j);
|
||||
}
|
||||
|
||||
}//for j
|
||||
|
|
@ -2024,7 +2029,7 @@ TableFilter.prototype = {
|
|||
o.AddPaging(false);
|
||||
}
|
||||
if(o.alternateBgs){
|
||||
o.SetAlternateRows();
|
||||
o.Cpt.alternateRows.set();
|
||||
}
|
||||
if(fnE){
|
||||
fnE.call(null, arguments[0], arguments[1], arguments[2]);
|
||||
|
|
@ -2044,7 +2049,7 @@ TableFilter.prototype = {
|
|||
o.AddPaging(false);
|
||||
}
|
||||
if(o.alternateBgs){
|
||||
o.SetAlternateRows();
|
||||
o.Cpt.alternateRows.set();
|
||||
}
|
||||
if(fnF){
|
||||
fnF.call(null, arguments[0], arguments[1]);
|
||||
|
|
@ -2514,12 +2519,12 @@ TableFilter.prototype = {
|
|||
r.style.display = '';
|
||||
}
|
||||
if(this.alternateBgs){
|
||||
this.SetRowBg(this.validRowsIndex[h], h);
|
||||
this.Cpt.alternateRows(this.validRowsIndex[h], h);
|
||||
}
|
||||
} else {
|
||||
r.style.display = 'none';
|
||||
if(this.alternateBgs){
|
||||
this.RemoveRowBg(this.validRowsIndex[h]);
|
||||
this.Cpt.alternateRows.removeRowBg(this.validRowsIndex[h]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4650,78 +4655,6 @@ TableFilter.prototype = {
|
|||
}//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
|
||||
=====================================================*/
|
||||
|
|
@ -5189,7 +5122,8 @@ TableFilter.prototype = {
|
|||
this.SetRowValidation(k,true);
|
||||
this.validRowsIndex.push(k);
|
||||
if(this.alternateBgs){
|
||||
this.SetRowBg(k,this.validRowsIndex.length);
|
||||
this.Cpt.alternateRows.setRowBg(
|
||||
k, this.validRowsIndex.length);
|
||||
}
|
||||
if(this.onRowValidated){
|
||||
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){
|
||||
|
||||
// Original configuration
|
||||
// TableFilter configuration
|
||||
var f = tf.fObj;
|
||||
//id of container element
|
||||
tf.loaderTgtId = f.loader_target_id || null;
|
||||
|
|
@ -32,7 +32,7 @@ define(['../dom', '../types'], function (dom, types) {
|
|||
|
||||
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;
|
||||
|
||||
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");
|
||||
test("Loader component", function() {
|
||||
deepEqual(tf.loaderCpt instanceof Loader, true, 'Loader constructor');
|
||||
notEqual(tf.loaderCpt, null, 'Loader instanciated');
|
||||
deepEqual(tf.Cpt.loader instanceof Loader, true, 'Loader constructor');
|
||||
notEqual(tf.Cpt.loader, null, 'Loader instanciated');
|
||||
notEqual(dom.id(tf.prfxLoader+tf.id), null, 'Loader DOM container');
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue