mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-06-16 12:45:49 +02:00
Started drop-down filter module
This commit is contained in:
parent
718b3cc1b0
commit
2ae6d7f2c3
|
@ -1,4 +1,9 @@
|
||||||
TableFilter
|
TableFilter
|
||||||
===========
|
===========
|
||||||
|
|
||||||
Filter HTML tables content easily
|
Filter HTML tables data easily
|
||||||
|
|
||||||
|
This script adds to any html table a "filter by column" feature that enables
|
||||||
|
users to filter and limit the data displayed within a long table. It even works
|
||||||
|
on tables with uneven rows. The script automatically adds a filter grid bar at
|
||||||
|
the top of the desired table.
|
||||||
|
|
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: Sun Feb 01 2015 19:22:55)
|
- (build date: Sat Feb 14 2015 19:57:20)
|
||||||
- Edit below for your projects' needs
|
- Edit below for your projects' needs
|
||||||
------------------------------------------------------------------------*/
|
------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import {Dom} from '../dom';
|
import {Dom} from '../dom';
|
||||||
import {Str} from '../string';
|
import {Str} from '../string';
|
||||||
|
import {Types} from '../types';
|
||||||
|
|
||||||
export class ColOps{
|
export class ColOps{
|
||||||
|
|
||||||
|
@ -11,6 +12,13 @@ export class ColOps{
|
||||||
var f = tf.fObj;
|
var f = tf.fObj;
|
||||||
this.colOperation = f.col_operation;
|
this.colOperation = f.col_operation;
|
||||||
|
|
||||||
|
//calls function before col operation
|
||||||
|
this.onBeforeOperation = Types.isFn(f.on_before_operation) ?
|
||||||
|
f.on_before_operation : null;
|
||||||
|
//calls function after col operation
|
||||||
|
this.onAfterOperation = Types.isFn(f.on_after_operation) ?
|
||||||
|
f.on_after_operation : null;
|
||||||
|
|
||||||
this.tf = tf;
|
this.tf = tf;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -35,8 +43,8 @@ export class ColOps{
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.tf.onBeforeOperation){
|
if(this.onBeforeOperation){
|
||||||
this.tf.onBeforeOperation.call(null, this.tf);
|
this.onBeforeOperation.call(null, this.tf);
|
||||||
}
|
}
|
||||||
|
|
||||||
var colOperation = this.colOperation,
|
var colOperation = this.colOperation,
|
||||||
|
@ -293,8 +301,8 @@ export class ColOps{
|
||||||
}//for ucol
|
}//for ucol
|
||||||
}//if typeof
|
}//if typeof
|
||||||
|
|
||||||
if(this.tf.onAfterOperation){
|
if(this.onAfterOperation){
|
||||||
this.tf.onAfterOperation.call(null, this.tf);
|
this.onAfterOperation.call(null, this.tf);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
324
src-es6/modules/dropdown.js
Normal file
324
src-es6/modules/dropdown.js
Normal file
|
@ -0,0 +1,324 @@
|
||||||
|
import {Dom} from '../dom';
|
||||||
|
import {Arr as array} from '../array';
|
||||||
|
import {Str} from '../string';
|
||||||
|
import {Sort} from '../sort';
|
||||||
|
import {Event} from '../event';
|
||||||
|
|
||||||
|
export class Dropdown{
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Dropdown UI component
|
||||||
|
* @param {Object} tf TableFilter instance
|
||||||
|
*/
|
||||||
|
constructor(tf){
|
||||||
|
// Configuration object
|
||||||
|
var f = tf.fObj;
|
||||||
|
|
||||||
|
this.enableSlcResetFilter = !f.enable_slc_reset_filter ? false : true;
|
||||||
|
//defines empty option text
|
||||||
|
this.nonEmptyText = f.non_empty_text || '(Non empty)';
|
||||||
|
//enables/disables onChange event on combo-box
|
||||||
|
this.onSlcChange = f.on_change===false ? false : true;
|
||||||
|
//sets select filling method: 'innerHTML' or 'createElement'
|
||||||
|
this.slcFillingMethod = f.slc_filling_method || 'createElement';
|
||||||
|
//IE only, tooltip text appearing on select before it is populated
|
||||||
|
this.activateSlcTooltip = f.activate_slc_tooltip ||
|
||||||
|
'Click to activate';
|
||||||
|
//tooltip text appearing on multiple select
|
||||||
|
this.multipleSlcTooltip = f.multiple_slc_tooltip ||
|
||||||
|
'Use Ctrl key for multiple selections';
|
||||||
|
this.hasCustomSlcOptions = types.isObj(f.custom_slc_options) ?
|
||||||
|
true : false;
|
||||||
|
this.customSlcOptions = types.isArray(f.custom_slc_options) ?
|
||||||
|
f.custom_slc_options : null;
|
||||||
|
|
||||||
|
this.isCustom = null;
|
||||||
|
this.opts = [];
|
||||||
|
this.optsTxt = [];
|
||||||
|
this.slcInnerHtml = '';
|
||||||
|
|
||||||
|
this.tf = tf;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Build checklist UI
|
||||||
|
* @param {Number} colIndex Column index
|
||||||
|
* @param {Boolean} isRefreshed Enable linked refresh behaviour
|
||||||
|
* @param {Boolean} isExternal Render in external container
|
||||||
|
* @param {String} extFltId External container id
|
||||||
|
*/
|
||||||
|
_build(colIndex, isRefreshed=false, isExternal=false, extFltId=null){
|
||||||
|
var tf = this.tf;
|
||||||
|
colIndex = parseInt(colIndex, 10);
|
||||||
|
|
||||||
|
var slcId = tf.fltIds[colIndex];
|
||||||
|
if((!Dom.id(slcId) && !isExternal) ||
|
||||||
|
(!Dom.id(extSlcId) && isExternal)){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var slc = !isExternal ? Dom.id(slcId) : Dom.id(extSlcId),
|
||||||
|
rows = tf.tbl.rows,
|
||||||
|
matchCase = tf.matchCase,
|
||||||
|
fillMethod = Str.lower(this.slcFillingMethod);
|
||||||
|
|
||||||
|
//custom select test
|
||||||
|
this.isCustom = (this.hasCustomSlcOptions &&
|
||||||
|
array.has(this.customSlcOptions.cols, colIndex));
|
||||||
|
|
||||||
|
//custom selects text
|
||||||
|
var activeFlt;
|
||||||
|
if(isRefreshed && tf.activeFilterId){
|
||||||
|
activeFlt = tf.activeFilterId.split('_')[0];
|
||||||
|
activeFlt = activeFlt.split(tf.prfxFlt)[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** remember grid values ***/
|
||||||
|
var flts_values = [], fltArr = [];
|
||||||
|
if(tf.rememberGridValues){
|
||||||
|
flts_values = tf.Cpt.store.getFilterValues(tf.fltsValuesCookie);
|
||||||
|
if(flts_values && !Str.isEmpty(flts_values.toString())){
|
||||||
|
if(this.isCustom){
|
||||||
|
fltArr.push(flts_values[colIndex]);
|
||||||
|
} else {
|
||||||
|
fltArr = flts_values[colIndex].split(' '+tf.orOperator+' ');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var excludedOpts = null,
|
||||||
|
filteredDataCol = null;
|
||||||
|
if(isRefreshed && tf.disableExcludedOptions){
|
||||||
|
excludedOpts = [];
|
||||||
|
filteredDataCol = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
for(var k=tf.refRow; k<tf.nbRows; k++){
|
||||||
|
// always visible rows don't need to appear on selects as always
|
||||||
|
// valid
|
||||||
|
if(tf.hasVisibleRows && array.has(tf.visibleRows, k) &&
|
||||||
|
!tf.paging){
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
var cell = rows[k].cells,
|
||||||
|
nchilds = cell.length;
|
||||||
|
|
||||||
|
// checks if row has exact cell #
|
||||||
|
if(nchilds !== tf.nbCells || this.isCustom){
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
// checks if row has exact cell #
|
||||||
|
// if(nchilds === this.nbCells && !this.isCustom){
|
||||||
|
// this loop retrieves cell data
|
||||||
|
for(var j=0; j<nchilds; j++){
|
||||||
|
if((colIndex===j &&
|
||||||
|
(!isRefreshed ||
|
||||||
|
(isRefreshed && tf.disableExcludedOptions))) ||
|
||||||
|
(colIndex==j && isRefreshed &&
|
||||||
|
((rows[k].style.display === '' && !tf.paging) ||
|
||||||
|
(tf.paging && (!tf.validRowsIndex ||
|
||||||
|
(tf.validRowsIndex &&
|
||||||
|
array.has(tf.validRowsIndex, k))) &&
|
||||||
|
((activeFlt===undefined || activeFlt==colIndex) ||
|
||||||
|
(activeFlt!=colIndex &&
|
||||||
|
array.has(tf.validRowsIndex, k) ))) ))){
|
||||||
|
var cell_data = this.GetCellData(j, cell[j]),
|
||||||
|
//Vary Peter's patch
|
||||||
|
cell_string = Str.matchCase(cell_data, matchCase);
|
||||||
|
|
||||||
|
// checks if celldata is already in array
|
||||||
|
if(!array.has(this.opts, cell_string, matchCase)){
|
||||||
|
this.opts.push(cell_data);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(isRefreshed && tf.disableExcludedOptions){
|
||||||
|
var filteredCol = filteredDataCol[j];
|
||||||
|
if(!filteredCol){
|
||||||
|
filteredCol = this.GetFilteredDataCol(j);
|
||||||
|
}
|
||||||
|
if(!array.has(filteredCol, cell_string, matchCase) &&
|
||||||
|
!array.has(
|
||||||
|
excludedOpts, cell_string, matchCase) &&
|
||||||
|
!this.isFirstLoad){
|
||||||
|
excludedOpts.push(cell_data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}//if colIndex==j
|
||||||
|
}//for j
|
||||||
|
// }//if
|
||||||
|
}//for k
|
||||||
|
|
||||||
|
//Retrieves custom values
|
||||||
|
if(this.isCustom){
|
||||||
|
var customValues = tf.__getCustomValues(colIndex);
|
||||||
|
this.opts = customValues[0];
|
||||||
|
this.optsTxt = customValues[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
if(tf.sortSlc && !this.isCustom){
|
||||||
|
if (!matchCase){
|
||||||
|
this.opts.sort(Sort.ignoreCase);
|
||||||
|
if(excludedOpts){
|
||||||
|
excludedOpts.sort(Sort.ignoreCase);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.opts.sort();
|
||||||
|
if(excludedOpts){ excludedOpts.sort(); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//asc sort
|
||||||
|
if(tf.sortNumAsc && array.has(tf.sortNumAsc, colIndex)){
|
||||||
|
try{
|
||||||
|
this.opts.sort( numSortAsc );
|
||||||
|
if(excludedOpts){
|
||||||
|
excludedOpts.sort(numSortAsc);
|
||||||
|
}
|
||||||
|
if(this.isCustom){
|
||||||
|
this.optsTxt.sort(numSortAsc);
|
||||||
|
}
|
||||||
|
} catch(e) {
|
||||||
|
this.opts.sort();
|
||||||
|
if(excludedOpts){
|
||||||
|
excludedOpts.sort();
|
||||||
|
}
|
||||||
|
if(this.isCustom){
|
||||||
|
this.optsTxt.sort();
|
||||||
|
}
|
||||||
|
}//in case there are alphanumeric values
|
||||||
|
}
|
||||||
|
//desc sort
|
||||||
|
if(tf.sortNumDesc && array.has(tf.sortNumDesc, colIndex)){
|
||||||
|
try{
|
||||||
|
this.opts.sort(numSortDesc);
|
||||||
|
if(excludedOpts){
|
||||||
|
excludedOpts.sort(numSortDesc);
|
||||||
|
}
|
||||||
|
if(this.isCustom){
|
||||||
|
this.optsTxt.sort(numSortDesc);
|
||||||
|
}
|
||||||
|
} catch(e) {
|
||||||
|
this.opts.sort();
|
||||||
|
if(excludedOpts){
|
||||||
|
excludedOpts.sort();
|
||||||
|
}
|
||||||
|
if(this.isCustom){
|
||||||
|
this.optsTxt.sort();
|
||||||
|
}
|
||||||
|
}//in case there are alphanumeric values
|
||||||
|
}
|
||||||
|
|
||||||
|
//populates drop-down
|
||||||
|
this.addOptions(colIndex, slc, excludedOpts, fltArr);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add drop-down options
|
||||||
|
* @param {Number} colIndex Column index
|
||||||
|
* @param {Object} slc Select Dom element
|
||||||
|
* @param {Array} excludedOpts Array of excluded options
|
||||||
|
* @param {Array} fltArr Collection of persisted filter values
|
||||||
|
*/
|
||||||
|
addOptions(colIndex, slc, excludedOpts, fltArr){
|
||||||
|
var tf = this.tf,
|
||||||
|
fillMethod = Str.lower(this.slcFillingMethod),
|
||||||
|
slcValue = slc.value;
|
||||||
|
|
||||||
|
slc.innerHTML = '';
|
||||||
|
slc = this.addFirstOption(slc);
|
||||||
|
|
||||||
|
for(var y=0; y<this.opts.length; y++){
|
||||||
|
if(this.opts[y]===''){
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
var val = this.opts[y]; //option value
|
||||||
|
var lbl = this.isCustom ? this.optsTxt[y] : val; //option text
|
||||||
|
var isDisabled = false;
|
||||||
|
if(isRefreshed && this.disableExcludedOptions &&
|
||||||
|
array.has(
|
||||||
|
excludedOpts,
|
||||||
|
Str.matchCase(val, tf.matchCase),
|
||||||
|
tf.matchCase
|
||||||
|
)){
|
||||||
|
isDisabled = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(fillMethod === 'innerhtml'){
|
||||||
|
var slcAttr = '';
|
||||||
|
if(tf.fillSlcOnDemand && slcValue===this.opts[y]){
|
||||||
|
slcAttr = 'selected="selected"';
|
||||||
|
}
|
||||||
|
this.slcInnerHtml += '<option value="'+val+'" ' + slcAttr +
|
||||||
|
(isDisabled ? 'disabled="disabled"' : '')+ '>' +
|
||||||
|
lbl+'</option>';
|
||||||
|
} else {
|
||||||
|
var opt;
|
||||||
|
//fill select on demand
|
||||||
|
if(tf.fillSlcOnDemand && slcValue===this.opts[y] &&
|
||||||
|
tf['col'+colIndex]===tf.fltTypeSlc){
|
||||||
|
opt = Dom.createOpt(lbl, val, true);
|
||||||
|
} else {
|
||||||
|
if(tf['col'+colIndex]!==tf.fltTypeMulti){
|
||||||
|
opt = Dom.createOpt(
|
||||||
|
lbl,
|
||||||
|
val,
|
||||||
|
(flts_values[colIndex]!==' ' &&
|
||||||
|
val===flts_values[colIndex]) ? true : false
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
opt = Dom.createOpt(
|
||||||
|
lbl,
|
||||||
|
val,
|
||||||
|
(array.has(fltArr,
|
||||||
|
Str.matchCase(this.opts[y], tf.matchCase),
|
||||||
|
tf.matchCase) ||
|
||||||
|
fltArr.toString().indexOf(val)!== -1) ?
|
||||||
|
true : false
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(isDisabled){
|
||||||
|
opt.disabled = true;
|
||||||
|
}
|
||||||
|
slc.appendChild(opt);
|
||||||
|
}
|
||||||
|
}// for y
|
||||||
|
|
||||||
|
if(fillMethod === 'innerhtml'){
|
||||||
|
slc.innerHTML += this.slcInnerHtml;
|
||||||
|
}
|
||||||
|
slc.setAttribute('filled', '1');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add drop-down header option
|
||||||
|
* @param {Object} slc Select DOM element
|
||||||
|
*/
|
||||||
|
addFirstOption(slc){
|
||||||
|
var tf = this.tf,
|
||||||
|
fillMethod = Str.lower(this.slcFillingMethod);
|
||||||
|
|
||||||
|
if(fillMethod === 'innerhtml'){
|
||||||
|
this.slcInnerHtml += '<option value="">'+ tf.displayAllText +
|
||||||
|
'</option>';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var opt0 = Dom.createOpt(
|
||||||
|
(!this.enableSlcResetFilter ? '' : tf.displayAllText),'');
|
||||||
|
if(!this.enableSlcResetFilter){
|
||||||
|
opt0.style.display = 'none';
|
||||||
|
}
|
||||||
|
slc.appendChild(opt0);
|
||||||
|
if(tf.enableEmptyOption){
|
||||||
|
var opt1 = Dom.createOpt(tf.emptyText, tf.emOperator);
|
||||||
|
slc.appendChild(opt1);
|
||||||
|
}
|
||||||
|
if(tf.enableNonEmptyOption){
|
||||||
|
var opt2 = Dom.createOpt(tf.nonEmptyText, tf.nmOperator);
|
||||||
|
slc.appendChild(opt2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return slc;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
44
src/core.js
44
src/core.js
|
@ -281,8 +281,8 @@ function TableFilter(id) {
|
||||||
/*** select filter's customisation and behaviours ***/
|
/*** select filter's customisation and behaviours ***/
|
||||||
//defines 1st option text
|
//defines 1st option text
|
||||||
this.displayAllText = f.display_all_text || '';
|
this.displayAllText = f.display_all_text || '';
|
||||||
this.enableSlcResetFilter = f.enable_slc_reset_filter===false ?
|
// this.enableSlcResetFilter = f.enable_slc_reset_filter===false ?
|
||||||
false : true;
|
// false : true;
|
||||||
//enables/disables empty option in combo-box filters
|
//enables/disables empty option in combo-box filters
|
||||||
this.enableEmptyOption = f.enable_empty_option===true ? true : false;
|
this.enableEmptyOption = f.enable_empty_option===true ? true : false;
|
||||||
//defines empty option text
|
//defines empty option text
|
||||||
|
@ -292,8 +292,8 @@ function TableFilter(id) {
|
||||||
true : false;
|
true : false;
|
||||||
//defines empty option text
|
//defines empty option text
|
||||||
this.nonEmptyText = f.non_empty_text || '(Non empty)';
|
this.nonEmptyText = f.non_empty_text || '(Non empty)';
|
||||||
//enables/disables onChange event on combo-box
|
// //enables/disables onChange event on combo-box
|
||||||
this.onSlcChange = f.on_change===false ? false : true;
|
// this.onSlcChange = f.on_change===false ? false : true;
|
||||||
//enables/disables select options sorting
|
//enables/disables select options sorting
|
||||||
this.sortSlc = f.sort_select===false ? false : true;
|
this.sortSlc = f.sort_select===false ? false : true;
|
||||||
//enables/disables ascending numeric options sorting
|
//enables/disables ascending numeric options sorting
|
||||||
|
@ -302,26 +302,26 @@ function TableFilter(id) {
|
||||||
//enables/disables descending numeric options sorting
|
//enables/disables descending numeric options sorting
|
||||||
this.isSortNumDesc = f.sort_num_desc===true ? true : false;
|
this.isSortNumDesc = f.sort_num_desc===true ? true : false;
|
||||||
this.sortNumDesc = this.isSortNumDesc ? f.sort_num_desc : null;
|
this.sortNumDesc = this.isSortNumDesc ? f.sort_num_desc : null;
|
||||||
//sets select filling method: 'innerHTML' or 'createElement'
|
// //sets select filling method: 'innerHTML' or 'createElement'
|
||||||
this.slcFillingMethod = f.slc_filling_method || 'createElement';
|
// this.slcFillingMethod = f.slc_filling_method || 'createElement';
|
||||||
//enabled selects are populated on demand
|
//enabled selects are populated on demand
|
||||||
this.fillSlcOnDemand = f.fill_slc_on_demand===true ? true : false;
|
this.fillSlcOnDemand = f.fill_slc_on_demand===true ? true : false;
|
||||||
//IE only, tooltip text appearing on select before it is populated
|
// //IE only, tooltip text appearing on select before it is populated
|
||||||
this.activateSlcTooltip = f.activate_slc_tooltip ||
|
// this.activateSlcTooltip = f.activate_slc_tooltip ||
|
||||||
'Click to activate';
|
// 'Click to activate';
|
||||||
//tooltip text appearing on multiple select
|
// //tooltip text appearing on multiple select
|
||||||
this.multipleSlcTooltip = f.multiple_slc_tooltip ||
|
// this.multipleSlcTooltip = f.multiple_slc_tooltip ||
|
||||||
'Use Ctrl key for multiple selections';
|
// 'Use Ctrl key for multiple selections';
|
||||||
this.hasCustomSlcOptions = types.isObj(f.custom_slc_options) ?
|
// this.hasCustomSlcOptions = types.isObj(f.custom_slc_options) ?
|
||||||
true : false;
|
// true : false;
|
||||||
this.customSlcOptions = types.isArray(f.custom_slc_options) ?
|
// this.customSlcOptions = types.isArray(f.custom_slc_options) ?
|
||||||
f.custom_slc_options : null;
|
// f.custom_slc_options : null;
|
||||||
//calls function before col operation
|
// //calls function before col operation
|
||||||
this.onBeforeOperation = types.isFn(f.on_before_operation) ?
|
// this.onBeforeOperation = types.isFn(f.on_before_operation) ?
|
||||||
f.on_before_operation : null;
|
// f.on_before_operation : null;
|
||||||
//calls function after col operation
|
// //calls function after col operation
|
||||||
this.onAfterOperation = types.isFn(f.on_after_operation) ?
|
// this.onAfterOperation = types.isFn(f.on_after_operation) ?
|
||||||
f.on_after_operation : null;
|
// f.on_after_operation : null;
|
||||||
|
|
||||||
/*** Filter operators ***/
|
/*** Filter operators ***/
|
||||||
this.rgxOperator = f.regexp_operator || 'rgx:';
|
this.rgxOperator = f.regexp_operator || 'rgx:';
|
||||||
|
|
|
@ -21,6 +21,7 @@
|
||||||
tf.Cpt.paging.destroy();
|
tf.Cpt.paging.destroy();
|
||||||
tf.Filter();" >
|
tf.Filter();" >
|
||||||
</p>
|
</p>
|
||||||
|
<div style="width: 900px;">
|
||||||
<table id="demo" cellpadding="0" cellspacing="0">
|
<table id="demo" cellpadding="0" cellspacing="0">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -81,12 +82,14 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
requirejs(['core'], function(TableFilter){
|
requirejs(['core'], function(TableFilter){
|
||||||
// Your logic here
|
// Your logic here
|
||||||
tf = new TableFilter("demo", {
|
tf = new TableFilter("demo", {
|
||||||
col_0: 'select',
|
col_0: 'select',
|
||||||
|
col_2: 'select',
|
||||||
col_3: 'checklist',
|
col_3: 'checklist',
|
||||||
base_path: './',
|
base_path: './',
|
||||||
loader: false,
|
loader: false,
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
define(["exports", "../dom", "../string"], function (exports, _dom, _string) {
|
define(["exports", "../dom", "../string", "../types"], function (exports, _dom, _string, _types) {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
var _classProps = function (child, staticProps, instanceProps) {
|
var _classProps = function (child, staticProps, instanceProps) {
|
||||||
|
@ -8,11 +8,17 @@ define(["exports", "../dom", "../string"], function (exports, _dom, _string) {
|
||||||
|
|
||||||
var Dom = _dom.Dom;
|
var Dom = _dom.Dom;
|
||||||
var Str = _string.Str;
|
var Str = _string.Str;
|
||||||
|
var Types = _types.Types;
|
||||||
var ColOps = (function () {
|
var ColOps = (function () {
|
||||||
var ColOps = function ColOps(tf) {
|
var ColOps = function ColOps(tf) {
|
||||||
var f = tf.fObj;
|
var f = tf.fObj;
|
||||||
this.colOperation = f.col_operation;
|
this.colOperation = f.col_operation;
|
||||||
|
|
||||||
|
//calls function before col operation
|
||||||
|
this.onBeforeOperation = Types.isFn(f.on_before_operation) ? f.on_before_operation : null;
|
||||||
|
//calls function after col operation
|
||||||
|
this.onAfterOperation = Types.isFn(f.on_after_operation) ? f.on_after_operation : null;
|
||||||
|
|
||||||
this.tf = tf;
|
this.tf = tf;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -24,8 +30,8 @@ define(["exports", "../dom", "../string"], function (exports, _dom, _string) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.tf.onBeforeOperation) {
|
if (this.onBeforeOperation) {
|
||||||
this.tf.onBeforeOperation.call(null, this.tf);
|
this.onBeforeOperation.call(null, this.tf);
|
||||||
}
|
}
|
||||||
|
|
||||||
var colOperation = this.colOperation, labelId = colOperation.id, colIndex = colOperation.col, operation = colOperation.operation, outputType = colOperation.write_method, totRowIndex = colOperation.tot_row_index, excludeRow = colOperation.exclude_row, decimalPrecision = colOperation.decimal_precision !== undefined ? colOperation.decimal_precision : 2;
|
var colOperation = this.colOperation, labelId = colOperation.id, colIndex = colOperation.col, operation = colOperation.operation, outputType = colOperation.write_method, totRowIndex = colOperation.tot_row_index, excludeRow = colOperation.exclude_row, decimalPrecision = colOperation.decimal_precision !== undefined ? colOperation.decimal_precision : 2;
|
||||||
|
@ -235,8 +241,8 @@ define(["exports", "../dom", "../string"], function (exports, _dom, _string) {
|
||||||
} //for ucol
|
} //for ucol
|
||||||
} //if typeof
|
} //if typeof
|
||||||
|
|
||||||
if (this.tf.onAfterOperation) {
|
if (this.onAfterOperation) {
|
||||||
this.tf.onAfterOperation.call(null, this.tf);
|
this.onAfterOperation.call(null, this.tf);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because one or more lines are too long
274
src/modules/dropdown.js
Normal file
274
src/modules/dropdown.js
Normal file
|
@ -0,0 +1,274 @@
|
||||||
|
define(["exports", "../dom", "../array", "../string", "../sort", "../event"], function (exports, _dom, _array, _string, _sort, _event) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var _classProps = function (child, staticProps, instanceProps) {
|
||||||
|
if (staticProps) Object.defineProperties(child, staticProps);
|
||||||
|
if (instanceProps) Object.defineProperties(child.prototype, instanceProps);
|
||||||
|
};
|
||||||
|
|
||||||
|
var Dom = _dom.Dom;
|
||||||
|
var array = _array.Arr;
|
||||||
|
var Str = _string.Str;
|
||||||
|
var Sort = _sort.Sort;
|
||||||
|
var Event = _event.Event;
|
||||||
|
var Dropdown = (function () {
|
||||||
|
var Dropdown = function Dropdown(tf) {
|
||||||
|
// Configuration object
|
||||||
|
var f = tf.fObj;
|
||||||
|
|
||||||
|
this.enableSlcResetFilter = !f.enable_slc_reset_filter ? false : true;
|
||||||
|
//defines empty option text
|
||||||
|
this.nonEmptyText = f.non_empty_text || "(Non empty)";
|
||||||
|
//enables/disables onChange event on combo-box
|
||||||
|
this.onSlcChange = f.on_change === false ? false : true;
|
||||||
|
//sets select filling method: 'innerHTML' or 'createElement'
|
||||||
|
this.slcFillingMethod = f.slc_filling_method || "createElement";
|
||||||
|
//IE only, tooltip text appearing on select before it is populated
|
||||||
|
this.activateSlcTooltip = f.activate_slc_tooltip || "Click to activate";
|
||||||
|
//tooltip text appearing on multiple select
|
||||||
|
this.multipleSlcTooltip = f.multiple_slc_tooltip || "Use Ctrl key for multiple selections";
|
||||||
|
this.hasCustomSlcOptions = types.isObj(f.custom_slc_options) ? true : false;
|
||||||
|
this.customSlcOptions = types.isArray(f.custom_slc_options) ? f.custom_slc_options : null;
|
||||||
|
|
||||||
|
this.isCustom = null;
|
||||||
|
this.opts = [];
|
||||||
|
this.optsTxt = [];
|
||||||
|
this.slcInnerHtml = "";
|
||||||
|
|
||||||
|
this.tf = tf;
|
||||||
|
};
|
||||||
|
|
||||||
|
_classProps(Dropdown, null, {
|
||||||
|
_build: {
|
||||||
|
writable: true,
|
||||||
|
value: function (colIndex, isRefreshed, isExternal, extFltId) {
|
||||||
|
if (extFltId === undefined) extFltId = null;
|
||||||
|
if (isExternal === undefined) isExternal = false;
|
||||||
|
if (isRefreshed === undefined) isRefreshed = false;
|
||||||
|
var tf = this.tf;
|
||||||
|
colIndex = parseInt(colIndex, 10);
|
||||||
|
|
||||||
|
var slcId = tf.fltIds[colIndex];
|
||||||
|
if ((!Dom.id(slcId) && !isExternal) || (!Dom.id(extSlcId) && isExternal)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var slc = !isExternal ? Dom.id(slcId) : Dom.id(extSlcId), rows = tf.tbl.rows, matchCase = tf.matchCase, fillMethod = Str.lower(this.slcFillingMethod);
|
||||||
|
|
||||||
|
//custom select test
|
||||||
|
this.isCustom = (this.hasCustomSlcOptions && array.has(this.customSlcOptions.cols, colIndex));
|
||||||
|
|
||||||
|
//custom selects text
|
||||||
|
var activeFlt;
|
||||||
|
if (isRefreshed && tf.activeFilterId) {
|
||||||
|
activeFlt = tf.activeFilterId.split("_")[0];
|
||||||
|
activeFlt = activeFlt.split(tf.prfxFlt)[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** remember grid values ***/
|
||||||
|
var flts_values = [], fltArr = [];
|
||||||
|
if (tf.rememberGridValues) {
|
||||||
|
flts_values = tf.Cpt.store.getFilterValues(tf.fltsValuesCookie);
|
||||||
|
if (flts_values && !Str.isEmpty(flts_values.toString())) {
|
||||||
|
if (this.isCustom) {
|
||||||
|
fltArr.push(flts_values[colIndex]);
|
||||||
|
} else {
|
||||||
|
fltArr = flts_values[colIndex].split(" " + tf.orOperator + " ");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var excludedOpts = null, filteredDataCol = null;
|
||||||
|
if (isRefreshed && tf.disableExcludedOptions) {
|
||||||
|
excludedOpts = [];
|
||||||
|
filteredDataCol = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var k = tf.refRow; k < tf.nbRows; k++) {
|
||||||
|
// always visible rows don't need to appear on selects as always
|
||||||
|
// valid
|
||||||
|
if (tf.hasVisibleRows && array.has(tf.visibleRows, k) && !tf.paging) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
var cell = rows[k].cells, nchilds = cell.length;
|
||||||
|
|
||||||
|
// checks if row has exact cell #
|
||||||
|
if (nchilds !== tf.nbCells || this.isCustom) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
// checks if row has exact cell #
|
||||||
|
// if(nchilds === this.nbCells && !this.isCustom){
|
||||||
|
// this loop retrieves cell data
|
||||||
|
for (var j = 0; j < nchilds; j++) {
|
||||||
|
if ((colIndex === j && (!isRefreshed || (isRefreshed && tf.disableExcludedOptions))) || (colIndex == j && isRefreshed && ((rows[k].style.display === "" && !tf.paging) || (tf.paging && (!tf.validRowsIndex || (tf.validRowsIndex && array.has(tf.validRowsIndex, k))) && ((activeFlt === undefined || activeFlt == colIndex) || (activeFlt != colIndex && array.has(tf.validRowsIndex, k))))))) {
|
||||||
|
var cell_data = this.GetCellData(j, cell[j]),
|
||||||
|
//Vary Peter's patch
|
||||||
|
cell_string = Str.matchCase(cell_data, matchCase);
|
||||||
|
|
||||||
|
// checks if celldata is already in array
|
||||||
|
if (!array.has(this.opts, cell_string, matchCase)) {
|
||||||
|
this.opts.push(cell_data);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isRefreshed && tf.disableExcludedOptions) {
|
||||||
|
var filteredCol = filteredDataCol[j];
|
||||||
|
if (!filteredCol) {
|
||||||
|
filteredCol = this.GetFilteredDataCol(j);
|
||||||
|
}
|
||||||
|
if (!array.has(filteredCol, cell_string, matchCase) && !array.has(excludedOpts, cell_string, matchCase) && !this.isFirstLoad) {
|
||||||
|
excludedOpts.push(cell_data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} //if colIndex==j
|
||||||
|
} //for j
|
||||||
|
// }//if
|
||||||
|
} //for k
|
||||||
|
|
||||||
|
//Retrieves custom values
|
||||||
|
if (this.isCustom) {
|
||||||
|
var customValues = tf.__getCustomValues(colIndex);
|
||||||
|
this.opts = customValues[0];
|
||||||
|
this.optsTxt = customValues[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (tf.sortSlc && !this.isCustom) {
|
||||||
|
if (!matchCase) {
|
||||||
|
this.opts.sort(Sort.ignoreCase);
|
||||||
|
if (excludedOpts) {
|
||||||
|
excludedOpts.sort(Sort.ignoreCase);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.opts.sort();
|
||||||
|
if (excludedOpts) {
|
||||||
|
excludedOpts.sort();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//asc sort
|
||||||
|
if (tf.sortNumAsc && array.has(tf.sortNumAsc, colIndex)) {
|
||||||
|
try {
|
||||||
|
this.opts.sort(numSortAsc);
|
||||||
|
if (excludedOpts) {
|
||||||
|
excludedOpts.sort(numSortAsc);
|
||||||
|
}
|
||||||
|
if (this.isCustom) {
|
||||||
|
this.optsTxt.sort(numSortAsc);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.opts.sort();
|
||||||
|
if (excludedOpts) {
|
||||||
|
excludedOpts.sort();
|
||||||
|
}
|
||||||
|
if (this.isCustom) {
|
||||||
|
this.optsTxt.sort();
|
||||||
|
}
|
||||||
|
} //in case there are alphanumeric values
|
||||||
|
}
|
||||||
|
//desc sort
|
||||||
|
if (tf.sortNumDesc && array.has(tf.sortNumDesc, colIndex)) {
|
||||||
|
try {
|
||||||
|
this.opts.sort(numSortDesc);
|
||||||
|
if (excludedOpts) {
|
||||||
|
excludedOpts.sort(numSortDesc);
|
||||||
|
}
|
||||||
|
if (this.isCustom) {
|
||||||
|
this.optsTxt.sort(numSortDesc);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.opts.sort();
|
||||||
|
if (excludedOpts) {
|
||||||
|
excludedOpts.sort();
|
||||||
|
}
|
||||||
|
if (this.isCustom) {
|
||||||
|
this.optsTxt.sort();
|
||||||
|
}
|
||||||
|
} //in case there are alphanumeric values
|
||||||
|
}
|
||||||
|
|
||||||
|
//populates drop-down
|
||||||
|
this.addOptions(colIndex, slc, excludedOpts, fltArr);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
addOptions: {
|
||||||
|
writable: true,
|
||||||
|
value: function (colIndex, slc, excludedOpts, fltArr) {
|
||||||
|
var tf = this.tf, fillMethod = Str.lower(this.slcFillingMethod), slcValue = slc.value;
|
||||||
|
|
||||||
|
slc.innerHTML = "";
|
||||||
|
slc = this.addFirstOption(slc);
|
||||||
|
|
||||||
|
for (var y = 0; y < this.opts.length; y++) {
|
||||||
|
if (this.opts[y] === "") {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
var val = this.opts[y]; //option value
|
||||||
|
var lbl = this.isCustom ? this.optsTxt[y] : val; //option text
|
||||||
|
var isDisabled = false;
|
||||||
|
if (isRefreshed && this.disableExcludedOptions && array.has(excludedOpts, Str.matchCase(val, tf.matchCase), tf.matchCase)) {
|
||||||
|
isDisabled = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (fillMethod === "innerhtml") {
|
||||||
|
var slcAttr = "";
|
||||||
|
if (tf.fillSlcOnDemand && slcValue === this.opts[y]) {
|
||||||
|
slcAttr = "selected=\"selected\"";
|
||||||
|
}
|
||||||
|
this.slcInnerHtml += "<option value=\"" + val + "\" " + slcAttr + (isDisabled ? "disabled=\"disabled\"" : "") + ">" + lbl + "</option>";
|
||||||
|
} else {
|
||||||
|
var opt;
|
||||||
|
//fill select on demand
|
||||||
|
if (tf.fillSlcOnDemand && slcValue === this.opts[y] && tf["col" + colIndex] === tf.fltTypeSlc) {
|
||||||
|
opt = Dom.createOpt(lbl, val, true);
|
||||||
|
} else {
|
||||||
|
if (tf["col" + colIndex] !== tf.fltTypeMulti) {
|
||||||
|
opt = Dom.createOpt(lbl, val, (flts_values[colIndex] !== " " && val === flts_values[colIndex]) ? true : false);
|
||||||
|
} else {
|
||||||
|
opt = Dom.createOpt(lbl, val, (array.has(fltArr, Str.matchCase(this.opts[y], tf.matchCase), tf.matchCase) || fltArr.toString().indexOf(val) !== -1) ? true : false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (isDisabled) {
|
||||||
|
opt.disabled = true;
|
||||||
|
}
|
||||||
|
slc.appendChild(opt);
|
||||||
|
}
|
||||||
|
} // for y
|
||||||
|
|
||||||
|
if (fillMethod === "innerhtml") {
|
||||||
|
slc.innerHTML += this.slcInnerHtml;
|
||||||
|
}
|
||||||
|
slc.setAttribute("filled", "1");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
addFirstOption: {
|
||||||
|
writable: true,
|
||||||
|
value: function (slc) {
|
||||||
|
var tf = this.tf, fillMethod = Str.lower(this.slcFillingMethod);
|
||||||
|
|
||||||
|
if (fillMethod === "innerhtml") {
|
||||||
|
this.slcInnerHtml += "<option value=\"\">" + tf.displayAllText + "</option>";
|
||||||
|
} else {
|
||||||
|
var opt0 = Dom.createOpt((!this.enableSlcResetFilter ? "" : tf.displayAllText), "");
|
||||||
|
if (!this.enableSlcResetFilter) {
|
||||||
|
opt0.style.display = "none";
|
||||||
|
}
|
||||||
|
slc.appendChild(opt0);
|
||||||
|
if (tf.enableEmptyOption) {
|
||||||
|
var opt1 = Dom.createOpt(tf.emptyText, tf.emOperator);
|
||||||
|
slc.appendChild(opt1);
|
||||||
|
}
|
||||||
|
if (tf.enableNonEmptyOption) {
|
||||||
|
var opt2 = Dom.createOpt(tf.nonEmptyText, tf.nmOperator);
|
||||||
|
slc.appendChild(opt2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return slc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return Dropdown;
|
||||||
|
})();
|
||||||
|
|
||||||
|
exports.Dropdown = Dropdown;
|
||||||
|
});
|
1
src/modules/dropdown.js.map
Normal file
1
src/modules/dropdown.js.map
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue