mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-23 16:52:26 +02:00
Started drop-down filter module
This commit is contained in:
parent
718b3cc1b0
commit
2ae6d7f2c3
|
@ -1,4 +1,9 @@
|
|||
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
|
||||
- (build date: Sun Feb 01 2015 19:22:55)
|
||||
- (build date: Sat Feb 14 2015 19:57:20)
|
||||
- Edit below for your projects' needs
|
||||
------------------------------------------------------------------------*/
|
||||
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import {Dom} from '../dom';
|
||||
import {Str} from '../string';
|
||||
import {Types} from '../types';
|
||||
|
||||
export class ColOps{
|
||||
|
||||
|
@ -11,6 +12,13 @@ export class ColOps{
|
|||
var f = tf.fObj;
|
||||
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;
|
||||
}
|
||||
|
||||
|
@ -35,8 +43,8 @@ export class ColOps{
|
|||
return;
|
||||
}
|
||||
|
||||
if(this.tf.onBeforeOperation){
|
||||
this.tf.onBeforeOperation.call(null, this.tf);
|
||||
if(this.onBeforeOperation){
|
||||
this.onBeforeOperation.call(null, this.tf);
|
||||
}
|
||||
|
||||
var colOperation = this.colOperation,
|
||||
|
@ -293,8 +301,8 @@ export class ColOps{
|
|||
}//for ucol
|
||||
}//if typeof
|
||||
|
||||
if(this.tf.onAfterOperation){
|
||||
this.tf.onAfterOperation.call(null, this.tf);
|
||||
if(this.onAfterOperation){
|
||||
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 ***/
|
||||
//defines 1st option text
|
||||
this.displayAllText = f.display_all_text || '';
|
||||
this.enableSlcResetFilter = f.enable_slc_reset_filter===false ?
|
||||
false : true;
|
||||
// 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 +292,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,26 +302,26 @@ 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';
|
||||
// //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
|
||||
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;
|
||||
//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;
|
||||
// //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;
|
||||
// //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;
|
||||
|
||||
/*** Filter operators ***/
|
||||
this.rgxOperator = f.regexp_operator || 'rgx:';
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
tf.Cpt.paging.destroy();
|
||||
tf.Filter();" >
|
||||
</p>
|
||||
<div style="width: 900px;">
|
||||
<table id="demo" cellpadding="0" cellspacing="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
|
@ -81,12 +82,14 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
requirejs(['core'], function(TableFilter){
|
||||
// Your logic here
|
||||
tf = new TableFilter("demo", {
|
||||
col_0: 'select',
|
||||
col_2: 'select',
|
||||
col_3: 'checklist',
|
||||
base_path: './',
|
||||
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";
|
||||
|
||||
var _classProps = function (child, staticProps, instanceProps) {
|
||||
|
@ -8,11 +8,17 @@ define(["exports", "../dom", "../string"], function (exports, _dom, _string) {
|
|||
|
||||
var Dom = _dom.Dom;
|
||||
var Str = _string.Str;
|
||||
var Types = _types.Types;
|
||||
var ColOps = (function () {
|
||||
var ColOps = function ColOps(tf) {
|
||||
var f = tf.fObj;
|
||||
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;
|
||||
};
|
||||
|
||||
|
@ -24,8 +30,8 @@ define(["exports", "../dom", "../string"], function (exports, _dom, _string) {
|
|||
return;
|
||||
}
|
||||
|
||||
if (this.tf.onBeforeOperation) {
|
||||
this.tf.onBeforeOperation.call(null, this.tf);
|
||||
if (this.onBeforeOperation) {
|
||||
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;
|
||||
|
@ -235,8 +241,8 @@ define(["exports", "../dom", "../string"], function (exports, _dom, _string) {
|
|||
} //for ucol
|
||||
} //if typeof
|
||||
|
||||
if (this.tf.onAfterOperation) {
|
||||
this.tf.onAfterOperation.call(null, this.tf);
|
||||
if (this.onAfterOperation) {
|
||||
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