1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-12 19:36:41 +02:00

Finalised drop-down filter module

This commit is contained in:
Max Guglielmi 2015-02-15 14:25:22 +11:00
parent 2ae6d7f2c3
commit c121f730af
11 changed files with 404 additions and 362 deletions

3
TODO
View file

@ -1,4 +1,5 @@
- Initialise TableFilter object with a table DOM element
- Use DOM event listeners for DOM events
- Refactor persistence using localStorage or cookie
- Refactor persistence using localStorage or cookie
- Verify linked filters work as per production

2
dist/filtergrid.css vendored
View file

@ -1,6 +1,6 @@
/*------------------------------------------------------------------------
- TableFilter stylesheet by Max Guglielmi
- (build date: Sat Feb 14 2015 19:57:20)
- (build date: Sun Feb 15 2015 14:22:06)
- Edit below for your projects' needs
------------------------------------------------------------------------*/

10
dist/tablefilter.js vendored

File diff suppressed because one or more lines are too long

View file

@ -37,8 +37,8 @@ export class CheckList{
f.enable_checklist_reset_filter===false ? false : true;
this.isCustom = null;
this.opts = [];
this.optsTxt = [];
this.opts = null;
this.optsTxt = null;
this.tf = tf;
}
@ -77,11 +77,15 @@ export class CheckList{
var tf = this.tf;
colIndex = parseInt(colIndex, 10);
this.opts = [];
this.optsTxt = [];
var divFltId = tf.prfxCheckListDiv+colIndex+'_'+tf.id;
if((!Dom.id(divFltId) && !isExternal) ||
(!Dom.id(extFltId) && isExternal)){
return;
}
var flt = !isExternal ? this.checkListDiv[colIndex] : Dom.id(extFltId);
var ul = Dom.create(
'ul', ['id', tf.fltIds[colIndex]], ['colIndex', colIndex]);

View file

@ -2,7 +2,6 @@ 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{
@ -14,11 +13,9 @@ export class Dropdown{
// Configuration object
var f = tf.fObj;
this.enableSlcResetFilter = !f.enable_slc_reset_filter ? false : true;
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
@ -27,30 +24,50 @@ export class Dropdown{
//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.opts = null;
this.optsTxt = null;
this.slcInnerHtml = null;
this.tf = tf;
}
/**
* Build checklist UI
* Build drop-down filter UI asynchronously
* @param {Number} colIndex Column index
* @param {Boolean} isRefreshed Enable linked refresh behaviour
* @param {Boolean} isExternal Render in external container
* @param {String} extSlcId External container id
*/
build(colIndex, isRefreshed, isExternal, extSlcId){
var tf = this.tf;
tf.EvtManager(
tf.Evt.name.dropdown,
{
slcIndex: colIndex,
slcRefreshed: isRefreshed,
slcExternal: isExternal,
slcId: extSlcId
}
);
}
/**
* Build drop-down filter 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
* @param {String} extSlcId External container id
*/
_build(colIndex, isRefreshed=false, isExternal=false, extFltId=null){
_build(colIndex, isRefreshed=false, isExternal=false, extSlcId=null){
var tf = this.tf;
colIndex = parseInt(colIndex, 10);
this.opts = [];
this.optsTxt = [];
this.slcInnerHtml = '';
var slcId = tf.fltIds[colIndex];
if((!Dom.id(slcId) && !isExternal) ||
(!Dom.id(extSlcId) && isExternal)){
@ -62,8 +79,8 @@ export class Dropdown{
fillMethod = Str.lower(this.slcFillingMethod);
//custom select test
this.isCustom = (this.hasCustomSlcOptions &&
array.has(this.customSlcOptions.cols, colIndex));
this.isCustom = (tf.hasCustomSlcOptions &&
array.has(tf.customSlcOptions.cols, colIndex));
//custom selects text
var activeFlt;
@ -73,14 +90,14 @@ export class Dropdown{
}
/*** remember grid values ***/
var flts_values = [], fltArr = [];
var fltsValues = [], fltArr = [];
if(tf.rememberGridValues){
flts_values = tf.Cpt.store.getFilterValues(tf.fltsValuesCookie);
if(flts_values && !Str.isEmpty(flts_values.toString())){
fltsValues = tf.Cpt.store.getFilterValues(tf.fltsValuesCookie);
if(fltsValues && !Str.isEmpty(fltsValues.toString())){
if(this.isCustom){
fltArr.push(flts_values[colIndex]);
fltArr.push(fltsValues[colIndex]);
} else {
fltArr = flts_values[colIndex].split(' '+tf.orOperator+' ');
fltArr = fltsValues[colIndex].split(' '+tf.orOperator+' ');
}
}
}
@ -107,8 +124,7 @@ export class Dropdown{
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 &&
@ -122,7 +138,7 @@ export class Dropdown{
((activeFlt===undefined || activeFlt==colIndex) ||
(activeFlt!=colIndex &&
array.has(tf.validRowsIndex, k) ))) ))){
var cell_data = this.GetCellData(j, cell[j]),
var cell_data = tf.GetCellData(j, cell[j]),
//Vary Peter's patch
cell_string = Str.matchCase(cell_data, matchCase);
@ -145,7 +161,6 @@ export class Dropdown{
}
}//if colIndex==j
}//for j
// }//if
}//for k
//Retrieves custom values
@ -209,17 +224,20 @@ export class Dropdown{
}
//populates drop-down
this.addOptions(colIndex, slc, excludedOpts, fltArr);
this.addOptions(
colIndex, slc, isRefreshed, excludedOpts, fltsValues, 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
* @param {Number} colIndex Column index
* @param {Object} slc Select Dom element
* @param {Boolean} isRefreshed Enable linked refresh behaviour
* @param {Array} excludedOpts Array of excluded options
* @param {Array} fltsValues Collection of persisted filter values
* @param {Array} fltArr Collection of persisted filter values
*/
addOptions(colIndex, slc, excludedOpts, fltArr){
addOptions(colIndex, slc, isRefreshed, excludedOpts, fltsValues, fltArr){
var tf = this.tf,
fillMethod = Str.lower(this.slcFillingMethod),
slcValue = slc.value;
@ -262,8 +280,8 @@ export class Dropdown{
opt = Dom.createOpt(
lbl,
val,
(flts_values[colIndex]!==' ' &&
val===flts_values[colIndex]) ? true : false
(fltsValues[colIndex]!==' ' &&
val===fltsValues[colIndex]) ? true : false
);
} else {
opt = Dom.createOpt(

View file

@ -281,8 +281,6 @@ function TableFilter(id) {
/*** select filter's customisation and behaviours ***/
//defines 1st option text
this.displayAllText = f.display_all_text || '';
// this.enableSlcResetFilter = f.enable_slc_reset_filter===false ?
// false : true;
//enables/disables empty option in combo-box filters
this.enableEmptyOption = f.enable_empty_option===true ? true : false;
//defines empty option text
@ -292,8 +290,8 @@ function TableFilter(id) {
true : false;
//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;
//enables/disables onChange event on combo-box
this.onSlcChange = f.on_change===false ? false : true;
//enables/disables select options sorting
this.sortSlc = f.sort_select===false ? false : true;
//enables/disables ascending numeric options sorting
@ -302,8 +300,6 @@ function TableFilter(id) {
//enables/disables descending numeric options sorting
this.isSortNumDesc = f.sort_num_desc===true ? true : false;
this.sortNumDesc = this.isSortNumDesc ? f.sort_num_desc : null;
// //sets select filling method: 'innerHTML' or 'createElement'
// this.slcFillingMethod = f.slc_filling_method || 'createElement';
//enabled selects are populated on demand
this.fillSlcOnDemand = f.fill_slc_on_demand===true ? true : false;
// //IE only, tooltip text appearing on select before it is populated
@ -312,16 +308,10 @@ function TableFilter(id) {
// //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;
// //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.hasCustomSlcOptions = types.isObj(f.custom_slc_options) ?
true : false;
this.customSlcOptions = types.isArray(f.custom_slc_options) ?
f.custom_slc_options : null;
/*** Filter operators ***/
this.rgxOperator = f.regexp_operator || 'rgx:';
@ -634,7 +624,8 @@ function TableFilter(id) {
store: null,
highlightKeywords: null,
paging: null,
checkList: null
checkList: null,
dropdown: null
};
/*** TF events ***/
@ -642,7 +633,7 @@ function TableFilter(id) {
this.Evt = {
name: {
filter: 'Filter',
populateselect: 'Populate',
dropdown: 'dropdown',
checklist: 'checkList',
changepage: 'changePage',
clear: 'Clear',
@ -781,8 +772,8 @@ function TableFilter(id) {
// select is populated when element has focus
if(o.fillSlcOnDemand && this.getAttribute('filled') === '0'){
var ct = this.getAttribute('ct');
o.PopulateSelect(ct);
if(!hlp.isIE()){ this.setAttribute('filled','1'); }
// o.PopulateSelect(ct);
o.Cpt.dropdown._build(ct);
}
if(o.popUpFilters){
evt.cancel(_evt);
@ -813,7 +804,6 @@ function TableFilter(id) {
_OnCheckListClick: function() {
if(o.fillSlcOnDemand && this.getAttribute('filled') === '0'){
var ct = this.getAttribute('ct');
// o.PopulateCheckList(ct);
o.Cpt.checkList._build(ct);
o.Cpt.checkList.checkListDiv[ct].onclick = null;
o.Cpt.checkList.checkListDiv[ct].title = '';
@ -999,16 +989,23 @@ TableFilter.prototype = {
inpclass = this.singleFltCssClass;
}
//selects
if(col===this.fltTypeSlc ||
col===this.fltTypeMulti){
//drop-down filters
if(col===this.fltTypeSlc || col===this.fltTypeMulti){
var dropdown;
if(!this.Cpt.dropdown){
var Dropdown = require('modules/dropdown').Dropdown;
dropdown = new Dropdown(this);
}
this.Cpt.dropdown = dropdown;
var slc = dom.create(this.fltTypeSlc,
['id',this.prfxFlt+i+'_'+this.id],
['ct',i], ['filled','0']);
['id', this.prfxFlt+i+'_'+this.id],
['ct', i], ['filled', '0']
);
if(col===this.fltTypeMulti){
slc.multiple = this.fltTypeMulti;
slc.title = this.multipleSlcTooltip;
slc.title = dropdown.multipleSlcTooltip;
}
slc.className = str.lower(col)===this.fltTypeSlc ?
inpclass : this.fltMultiCssClass;// for ie<=6
@ -1024,25 +1021,33 @@ TableFilter.prototype = {
this.fltIds.push(this.prfxFlt+i+'_'+this.id);
if(!this.fillSlcOnDemand){
this._PopulateSelect(i);
// this._PopulateSelect(i);
dropdown._build(i);
}
slc.onkeypress = this.Evt._DetectKey;
slc.onchange = this.Evt._OnSlcChange;
slc.onfocus = this.Evt._OnSlcFocus;
slc.onblur = this.Evt._OnSlcBlur;
// slc.onkeypress = this.Evt._DetectKey;
evt.add(slc, 'keypress', this.Evt._DetectKey);
// slc.onchange = this.Evt._OnSlcChange;
evt.add(slc, 'change', this.Evt._OnSlcChange);
// slc.onfocus = this.Evt._OnSlcFocus;
evt.add(slc, 'focus', this.Evt._OnSlcFocus);
// slc.onblur = this.Evt._OnSlcBlur;
evt.add(slc, 'blur', this.Evt._OnSlcBlur);
//1st option is created here since PopulateSelect isn't
//invoked
if(this.fillSlcOnDemand){
var opt0 = dom.createOpt(this.displayAllText,'');
var opt0 = dom.createOpt(this.displayAllText, '');
slc.appendChild(opt0);
}
}
// checklist
else if(col===this.fltTypeCheckList){
var CheckList = require('modules/checkList').CheckList;
if(!this.Cpt.checkList){
var CheckList =
require('modules/checkList').CheckList;
this.Cpt.checkList = new CheckList(this);
}
var divCont = dom.create('div',
['id',this.prfxCheckListDiv+i+'_'+this.id],
@ -1058,16 +1063,13 @@ TableFilter.prototype = {
fltcell.appendChild(divCont);
}
// this.checkListDiv[i] = divCont;
this.Cpt.checkList.checkListDiv[i] = divCont;
this.fltIds.push(this.prfxFlt+i+'_'+this.id);
if(!this.fillSlcOnDemand){
// this._PopulateCheckList(i);
this.Cpt.checkList._build(i);
}
if(this.fillSlcOnDemand){
//divCont.onclick = this.Evt._OnCheckListClick;
evt.add(
divCont, 'click', this.Evt._OnCheckListClick);
divCont.appendChild(
@ -1075,7 +1077,6 @@ TableFilter.prototype = {
this.Cpt.checkList.activateCheckListTxt));
}
//divCont.onclick = this.Evt._OnCheckListFocus;
evt.add(divCont, 'click', this.Evt._OnCheckListFocus);
}
@ -1090,7 +1091,7 @@ TableFilter.prototype = {
this.inpWatermark[i] : this.inpWatermark;
}
inp.className = inpclass;// for ie<=6
if(this.inpWatermark!==''){
if(this.inpWatermark !== ''){
//watermark css class
dom.addClass(inp, this.inpWatermarkCssClass);
}
@ -1237,11 +1238,14 @@ TableFilter.prototype = {
o._Filter();
}
break;
case o.Evt.name.populateselect:
case o.Evt.name.dropdown:
if(o.refreshFilters){
o._PopulateSelect(slcIndex, true);
// o._PopulateSelect(slcIndex, true);
o.Cpt.dropdown._build(slcIndex, true);
} else {
o._PopulateSelect(slcIndex, false, slcExternal, slcId);
// o._PopulateSelect(slcIndex, false, slcExternal, slcId);
o.Cpt.dropdown._build(
slcIndex, false, slcExternal, slcId);
}
break;
case o.Evt.name.checklist:
@ -2142,265 +2146,265 @@ TableFilter.prototype = {
}
},
PopulateSelect: function(colIndex,isExternal,extSlcId){
this.EvtManager(
this.Evt.name.populateselect,
{ slcIndex:colIndex, slcExternal:isExternal, slcId:extSlcId }
);
},
// PopulateSelect: function(colIndex,isExternal,extSlcId){
// this.EvtManager(
// this.Evt.name.dropdown,
// { slcIndex:colIndex, slcExternal:isExternal, slcId:extSlcId }
// );
// },
/*====================================================
- populates drop-down filters
=====================================================*/
_PopulateSelect: function(colIndex,isRefreshed,isExternal,extSlcId) {
isExternal = isExternal===undefined ? false : isExternal;
var slcId = this.fltIds[colIndex];
if((!dom.id(slcId) && !isExternal) ||
(!dom.id(extSlcId) && isExternal)){
return;
}
var slc = !isExternal ? dom.id(slcId) : dom.id(extSlcId),
o = this,
row = this.tbl.rows,
matchCase = this.matchCase,
fillMethod = str.lower(this.slcFillingMethod),
optArray = [],
slcInnerHtml = '',
opt0,
//custom select test
isCustomSlc = (this.hasCustomSlcOptions &&
array.has(this.customSlcOptions.cols, colIndex));
//custom selects text
var optTxt = [],
activeFlt;
if(isRefreshed && this.activeFilterId){
activeFlt = this.activeFilterId.split('_')[0];
activeFlt = activeFlt.split(this.prfxFlt)[1];
}
// _PopulateSelect: function(colIndex,isRefreshed,isExternal,extSlcId) {
// isExternal = isExternal===undefined ? false : isExternal;
// var slcId = this.fltIds[colIndex];
// if((!dom.id(slcId) && !isExternal) ||
// (!dom.id(extSlcId) && isExternal)){
// return;
// }
// var slc = !isExternal ? dom.id(slcId) : dom.id(extSlcId),
// o = this,
// row = this.tbl.rows,
// matchCase = this.matchCase,
// fillMethod = str.lower(this.slcFillingMethod),
// optArray = [],
// slcInnerHtml = '',
// opt0,
// //custom select test
// isCustomSlc = (this.hasCustomSlcOptions &&
// array.has(this.customSlcOptions.cols, colIndex));
// //custom selects text
// var optTxt = [],
// activeFlt;
// if(isRefreshed && this.activeFilterId){
// activeFlt = this.activeFilterId.split('_')[0];
// activeFlt = activeFlt.split(this.prfxFlt)[1];
// }
/*** remember grid values ***/
var flts_values = [], fltArr = [];
if(this.rememberGridValues){
// flts_values = cookie.valueToArray(
// this.fltsValuesCookie, this.separator);
flts_values = this.Cpt.store.getFilterValues(this.fltsValuesCookie);
if(flts_values && !str.isEmpty(flts_values.toString())){
if(isCustomSlc){
fltArr.push(flts_values[colIndex]);
} else {
fltArr = flts_values[colIndex].split(' '+o.orOperator+' ');
}
}
}
// /*** remember grid values ***/
// var flts_values = [], fltArr = [];
// if(this.rememberGridValues){
// // flts_values = cookie.valueToArray(
// // this.fltsValuesCookie, this.separator);
// flts_values = this.Cpt.store.getFilterValues(this.fltsValuesCookie);
// if(flts_values && !str.isEmpty(flts_values.toString())){
// if(isCustomSlc){
// fltArr.push(flts_values[colIndex]);
// } else {
// fltArr = flts_values[colIndex].split(' '+o.orOperator+' ');
// }
// }
// }
var excludedOpts = null,
filteredDataCol = null;
if(isRefreshed && this.disableExcludedOptions){
excludedOpts = [];
filteredDataCol = [];
}
// var excludedOpts = null,
// filteredDataCol = null;
// if(isRefreshed && this.disableExcludedOptions){
// excludedOpts = [];
// filteredDataCol = [];
// }
for(var k=this.refRow; k<this.nbRows; k++){
// always visible rows don't need to appear on selects as always
// valid
if(this.hasVisibleRows && array.has(this.visibleRows, k) &&
!this.paging){
continue;
}
// for(var k=this.refRow; k<this.nbRows; k++){
// // always visible rows don't need to appear on selects as always
// // valid
// if(this.hasVisibleRows && array.has(this.visibleRows, k) &&
// !this.paging){
// continue;
// }
var cell = row[k].cells,
nchilds = cell.length;
// var cell = row[k].cells,
// nchilds = cell.length;
// checks if row has exact cell #
if(nchilds === this.nbCells && !isCustomSlc){
// this loop retrieves cell data
for(var j=0; j<nchilds; j++){
if((colIndex===j &&
(!isRefreshed ||
(isRefreshed && this.disableExcludedOptions))) ||
(colIndex==j && isRefreshed &&
((row[k].style.display === '' && !this.paging) ||
(this.paging && (!this.validRowsIndex ||
(this.validRowsIndex &&
array.has(this.validRowsIndex, k))) &&
((activeFlt===undefined || activeFlt==colIndex) ||
(activeFlt!=colIndex &&
array.has(this.validRowsIndex, k) ))) ))){
var cell_data = this.GetCellData(j, cell[j]),
//Vary Peter's patch
cell_string = str.matchCase(cell_data, matchCase);
// // checks if row has exact cell #
// if(nchilds === this.nbCells && !isCustomSlc){
// // this loop retrieves cell data
// for(var j=0; j<nchilds; j++){
// if((colIndex===j &&
// (!isRefreshed ||
// (isRefreshed && this.disableExcludedOptions))) ||
// (colIndex==j && isRefreshed &&
// ((row[k].style.display === '' && !this.paging) ||
// (this.paging && (!this.validRowsIndex ||
// (this.validRowsIndex &&
// array.has(this.validRowsIndex, k))) &&
// ((activeFlt===undefined || activeFlt==colIndex) ||
// (activeFlt!=colIndex &&
// array.has(this.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(optArray, cell_string, matchCase)){
optArray.push(cell_data);
}
// // checks if celldata is already in array
// if(!array.has(optArray, cell_string, matchCase)){
// optArray.push(cell_data);
// }
if(isRefreshed && this.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
// if(isRefreshed && this.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(isCustomSlc){
var customValues = this.__getCustomValues(colIndex);
optArray = customValues[0];
optTxt = customValues[1];
}
// //Retrieves custom values
// if(isCustomSlc){
// var customValues = this.__getCustomValues(colIndex);
// optArray = customValues[0];
// optTxt = customValues[1];
// }
if(this.sortSlc && !isCustomSlc){
if (!matchCase){
optArray.sort(Sort.ignoreCase);
if(excludedOpts){
excludedOpts.sort(Sort.ignoreCase);
}
} else {
optArray.sort();
if(excludedOpts){ excludedOpts.sort(); }
}
}
// if(this.sortSlc && !isCustomSlc){
// if (!matchCase){
// optArray.sort(Sort.ignoreCase);
// if(excludedOpts){
// excludedOpts.sort(Sort.ignoreCase);
// }
// } else {
// optArray.sort();
// if(excludedOpts){ excludedOpts.sort(); }
// }
// }
//asc sort
if(this.sortNumAsc && array.has(this.sortNumAsc, colIndex)){
try{
optArray.sort( numSortAsc );
if(excludedOpts){
excludedOpts.sort( numSortAsc );
}
if(isCustomSlc){
optTxt.sort( numSortAsc );
}
} catch(e) {
optArray.sort();
if(excludedOpts){
excludedOpts.sort();
}
if(isCustomSlc){
optTxt.sort();
}
}//in case there are alphanumeric values
}
//desc sort
if(this.sortNumDesc && array.has(this.sortNumDesc, colIndex)){
try{
optArray.sort( numSortDesc );
if(excludedOpts){
excludedOpts.sort( numSortDesc );
}
if(isCustomSlc){
optTxt.sort( numSortDesc );
}
} catch(e) {
optArray.sort();
if(excludedOpts){ excludedOpts.sort(); }
if(isCustomSlc){
optTxt.sort();
}
}//in case there are alphanumeric values
}
// //asc sort
// if(this.sortNumAsc && array.has(this.sortNumAsc, colIndex)){
// try{
// optArray.sort( numSortAsc );
// if(excludedOpts){
// excludedOpts.sort( numSortAsc );
// }
// if(isCustomSlc){
// optTxt.sort( numSortAsc );
// }
// } catch(e) {
// optArray.sort();
// if(excludedOpts){
// excludedOpts.sort();
// }
// if(isCustomSlc){
// optTxt.sort();
// }
// }//in case there are alphanumeric values
// }
// //desc sort
// if(this.sortNumDesc && array.has(this.sortNumDesc, colIndex)){
// try{
// optArray.sort( numSortDesc );
// if(excludedOpts){
// excludedOpts.sort( numSortDesc );
// }
// if(isCustomSlc){
// optTxt.sort( numSortDesc );
// }
// } catch(e) {
// optArray.sort();
// if(excludedOpts){ excludedOpts.sort(); }
// if(isCustomSlc){
// optTxt.sort();
// }
// }//in case there are alphanumeric values
// }
AddOpts();//populates drop-down
// AddOpts();//populates drop-down
// adds 1st option
function AddOpt0(){
if(fillMethod === 'innerhtml'){
slcInnerHtml +='<option value="">'+o.displayAllText+'</option>';
}
else {
var opt0 = dom.createOpt(
(!o.enableSlcResetFilter ? '' : o.displayAllText),'');
if(!o.enableSlcResetFilter){
opt0.style.display = 'none';
}
slc.appendChild(opt0);
if(o.enableEmptyOption){
var opt1 = dom.createOpt(o.emptyText,o.emOperator);
slc.appendChild(opt1);
}
if(o.enableNonEmptyOption){
var opt2 = dom.createOpt(o.nonEmptyText,o.nmOperator);
slc.appendChild(opt2);
}
}
}
// // adds 1st option
// function AddOpt0(){
// if(fillMethod === 'innerhtml'){
// slcInnerHtml +='<option value="">'+o.displayAllText+'</option>';
// }
// else {
// var opt0 = dom.createOpt(
// (!o.enableSlcResetFilter ? '' : o.displayAllText),'');
// if(!o.enableSlcResetFilter){
// opt0.style.display = 'none';
// }
// slc.appendChild(opt0);
// if(o.enableEmptyOption){
// var opt1 = dom.createOpt(o.emptyText,o.emOperator);
// slc.appendChild(opt1);
// }
// if(o.enableNonEmptyOption){
// var opt2 = dom.createOpt(o.nonEmptyText,o.nmOperator);
// slc.appendChild(opt2);
// }
// }
// }
// populates select
function AddOpts(){
var slcValue = slc.value;
slc.innerHTML = '';
AddOpt0();
// // populates select
// function AddOpts(){
// var slcValue = slc.value;
// slc.innerHTML = '';
// AddOpt0();
for(var y=0; y<optArray.length; y++){
if(optArray[y]===''){
continue;
}
var val = optArray[y]; //option value
var lbl = isCustomSlc ? optTxt[y] : val; //option text
var isDisabled = false;
if(isRefreshed && o.disableExcludedOptions &&
array.has(excludedOpts,
str.matchCase(val, o.matchCase), o.matchCase)){
isDisabled = true;
}
// for(var y=0; y<optArray.length; y++){
// if(optArray[y]===''){
// continue;
// }
// var val = optArray[y]; //option value
// var lbl = isCustomSlc ? optTxt[y] : val; //option text
// var isDisabled = false;
// if(isRefreshed && o.disableExcludedOptions &&
// array.has(excludedOpts,
// str.matchCase(val, o.matchCase), o.matchCase)){
// isDisabled = true;
// }
if(fillMethod === 'innerhtml'){
var slcAttr = '';
if(o.fillSlcOnDemand && slcValue==optArray[y]){
slcAttr = 'selected="selected"';
}
slcInnerHtml += '<option value="'+val+'" ' + slcAttr +
(isDisabled ? 'disabled="disabled"' : '')+ '>' +
lbl+'</option>';
} else {
var opt;
//fill select on demand
if(o.fillSlcOnDemand && slcValue==optArray[y] &&
o['col'+colIndex]===o.fltTypeSlc){
opt = dom.createOpt(lbl, val, true);
} else {
if(o['col'+colIndex]!=o.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(optArray[y],o.matchCase),
o.matchCase) ||
fltArr.toString().indexOf(val)!== -1) ?
true : false
);
}
}
if(isDisabled){
opt.disabled = true;
}
slc.appendChild(opt);
}
}// for y
// if(fillMethod === 'innerhtml'){
// var slcAttr = '';
// if(o.fillSlcOnDemand && slcValue==optArray[y]){
// slcAttr = 'selected="selected"';
// }
// slcInnerHtml += '<option value="'+val+'" ' + slcAttr +
// (isDisabled ? 'disabled="disabled"' : '')+ '>' +
// lbl+'</option>';
// } else {
// var opt;
// //fill select on demand
// if(o.fillSlcOnDemand && slcValue==optArray[y] &&
// o['col'+colIndex]===o.fltTypeSlc){
// opt = dom.createOpt(lbl, val, true);
// } else {
// if(o['col'+colIndex]!=o.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(optArray[y],o.matchCase),
// o.matchCase) ||
// fltArr.toString().indexOf(val)!== -1) ?
// true : false
// );
// }
// }
// if(isDisabled){
// opt.disabled = true;
// }
// slc.appendChild(opt);
// }
// }// for y
if(fillMethod === 'innerhtml'){
slc.innerHTML += slcInnerHtml;
}
slc.setAttribute('filled','1');
}// fn AddOpt
},
// if(fillMethod === 'innerhtml'){
// slc.innerHTML += slcInnerHtml;
// }
// slc.setAttribute('filled','1');
// }// fn AddOpt
// },
/*====================================================
- IE bug: it seems there is no way to make
@ -3782,7 +3786,7 @@ TableFilter.prototype = {
var s = searcharg.split(' '+this.orOperator+' '),
ct = 0; //keywords counter
for(var j=0; j<slc.options.length; j++){
if(s===''){
if(s==='' || s[0]===''){
slc.options[j].selected = false;
}
if(slc.options[j].value===''){
@ -3884,7 +3888,7 @@ TableFilter.prototype = {
this.onBeforeReset.call(null, this, this.GetFiltersValue());
}
for(var i=0; i<this.fltIds.length; i++){
this.SetFilterValue(i,'');
this.SetFilterValue(i, '');
}
if(this.refreshFilters){
this.activeFilterId = '';
@ -3960,7 +3964,6 @@ TableFilter.prototype = {
slcSelectedValue === this.displayAllText ){
if(array.has(slcA3, slcIndex[i])){
// this.checkListDiv[slcIndex[i]].innerHTML = '';
this.Cpt.checkList.checkListDiv[
slcIndex[i]].innerHTML = '';
} else {
@ -3969,17 +3972,17 @@ TableFilter.prototype = {
//1st option needs to be inserted
if(this.fillSlcOnDemand) {
var opt0 = dom.createOpt(this.displayAllText,'');
var opt0 = dom.createOpt(this.displayAllText, '');
if(curSlc){
curSlc.appendChild(opt0);
}
}
if(array.has(slcA3, slcIndex[i])){
// this._PopulateCheckList(slcIndex[i]);
this.Cpt.checkList._build(slcIndex[i]);
} else {
this._PopulateSelect(slcIndex[i], true);
// this._PopulateSelect(slcIndex[i], true);
this.Cpt.dropdown._build(slcIndex[i], true);
}
this.SetFilterValue(slcIndex[i],slcSelectedValue);
@ -4023,7 +4026,8 @@ TableFilter.prototype = {
colFltType !== this.fltTypeInp){
if(colFltType === this.fltTypeSlc ||
colFltType === this.fltTypeMulti){
this.PopulateSelect(ct);
// this.PopulateSelect(ct);
this.Cpt.dropdown.build(ct);
}
if(colFltType === this.fltTypeCheckList){
// this.PopulateCheckList(ct);

View file

@ -89,20 +89,22 @@
// Your logic here
tf = new TableFilter("demo", {
col_0: 'select',
col_2: 'select',
col_2: 'multiple',
col_3: 'checklist',
base_path: './',
loader: false,
rows_counter: true,
enable_default_theme: true,
paging: true,
// slc_filling_method: 'innerhtml',
paging: false,
paging_length: 2,
// page_selector_type: 'input',
results_per_page: ['Results per page', [2,4,6]],
remember_grid_values: true,
// remember_page_number: true,
// remember_page_length: true,
fill_slc_on_demand: true,
fill_slc_on_demand: false,
refresh_filters: true,
alternate_rows: true,
highlight_keywords: true,
match_case: false,

View file

@ -32,8 +32,8 @@ define(["exports", "../dom", "../array", "../string", "../sort", "../event"], fu
this.enableCheckListResetFilter = f.enable_checklist_reset_filter === false ? false : true;
this.isCustom = null;
this.opts = [];
this.optsTxt = [];
this.opts = null;
this.optsTxt = null;
this.tf = tf;
};
@ -68,10 +68,14 @@ define(["exports", "../dom", "../array", "../string", "../sort", "../event"], fu
var tf = this.tf;
colIndex = parseInt(colIndex, 10);
this.opts = [];
this.optsTxt = [];
var divFltId = tf.prfxCheckListDiv + colIndex + "_" + tf.id;
if ((!Dom.id(divFltId) && !isExternal) || (!Dom.id(extFltId) && isExternal)) {
return;
}
var flt = !isExternal ? this.checkListDiv[colIndex] : Dom.id(extFltId);
var ul = Dom.create("ul", ["id", tf.fltIds[colIndex]], ["colIndex", colIndex]);
ul.className = this.checkListCssClass;

File diff suppressed because one or more lines are too long

View file

@ -1,4 +1,4 @@
define(["exports", "../dom", "../array", "../string", "../sort", "../event"], function (exports, _dom, _array, _string, _sort, _event) {
define(["exports", "../dom", "../array", "../string", "../sort"], function (exports, _dom, _array, _string, _sort) {
"use strict";
var _classProps = function (child, staticProps, instanceProps) {
@ -10,44 +10,55 @@ define(["exports", "../dom", "../array", "../string", "../sort", "../event"], fu
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;
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.opts = null;
this.optsTxt = null;
this.slcInnerHtml = null;
this.tf = tf;
};
_classProps(Dropdown, null, {
build: {
writable: true,
value: function (colIndex, isRefreshed, isExternal, extSlcId) {
var tf = this.tf;
tf.EvtManager(tf.Evt.name.dropdown, {
slcIndex: colIndex,
slcRefreshed: isRefreshed,
slcExternal: isExternal,
slcId: extSlcId
});
}
},
_build: {
writable: true,
value: function (colIndex, isRefreshed, isExternal, extFltId) {
if (extFltId === undefined) extFltId = null;
value: function (colIndex, isRefreshed, isExternal, extSlcId) {
if (extSlcId === undefined) extSlcId = null;
if (isExternal === undefined) isExternal = false;
if (isRefreshed === undefined) isRefreshed = false;
var tf = this.tf;
colIndex = parseInt(colIndex, 10);
this.opts = [];
this.optsTxt = [];
this.slcInnerHtml = "";
var slcId = tf.fltIds[colIndex];
if ((!Dom.id(slcId) && !isExternal) || (!Dom.id(extSlcId) && isExternal)) {
return;
@ -55,7 +66,7 @@ define(["exports", "../dom", "../array", "../string", "../sort", "../event"], fu
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));
this.isCustom = (tf.hasCustomSlcOptions && array.has(tf.customSlcOptions.cols, colIndex));
//custom selects text
var activeFlt;
@ -65,14 +76,14 @@ define(["exports", "../dom", "../array", "../string", "../sort", "../event"], fu
}
/*** remember grid values ***/
var flts_values = [], fltArr = [];
var fltsValues = [], fltArr = [];
if (tf.rememberGridValues) {
flts_values = tf.Cpt.store.getFilterValues(tf.fltsValuesCookie);
if (flts_values && !Str.isEmpty(flts_values.toString())) {
fltsValues = tf.Cpt.store.getFilterValues(tf.fltsValuesCookie);
if (fltsValues && !Str.isEmpty(fltsValues.toString())) {
if (this.isCustom) {
fltArr.push(flts_values[colIndex]);
fltArr.push(fltsValues[colIndex]);
} else {
fltArr = flts_values[colIndex].split(" " + tf.orOperator + " ");
fltArr = fltsValues[colIndex].split(" " + tf.orOperator + " ");
}
}
}
@ -96,12 +107,11 @@ define(["exports", "../dom", "../array", "../string", "../sort", "../event"], fu
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]),
var cell_data = tf.GetCellData(j, cell[j]),
//Vary Peter's patch
cell_string = Str.matchCase(cell_data, matchCase);
@ -121,7 +131,6 @@ define(["exports", "../dom", "../array", "../string", "../sort", "../event"], fu
}
} //if colIndex==j
} //for j
// }//if
} //for k
//Retrieves custom values
@ -187,12 +196,12 @@ define(["exports", "../dom", "../array", "../string", "../sort", "../event"], fu
}
//populates drop-down
this.addOptions(colIndex, slc, excludedOpts, fltArr);
this.addOptions(colIndex, slc, isRefreshed, excludedOpts, fltsValues, fltArr);
}
},
addOptions: {
writable: true,
value: function (colIndex, slc, excludedOpts, fltArr) {
value: function (colIndex, slc, isRefreshed, excludedOpts, fltsValues, fltArr) {
var tf = this.tf, fillMethod = Str.lower(this.slcFillingMethod), slcValue = slc.value;
slc.innerHTML = "";
@ -222,7 +231,7 @@ define(["exports", "../dom", "../array", "../string", "../sort", "../event"], fu
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);
opt = Dom.createOpt(lbl, val, (fltsValues[colIndex] !== " " && val === fltsValues[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);
}

File diff suppressed because one or more lines are too long