mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-06-19 22:25:18 +02:00
Added columns visibility extension demo
This commit is contained in:
parent
a0b2de403b
commit
c083dc517e
2243
dist/tablefilter/1-1624429a94932563c8ae.js
vendored
Normal file
2243
dist/tablefilter/1-1624429a94932563c8ae.js
vendored
Normal file
File diff suppressed because one or more lines are too long
8
dist/tablefilter/1-303232cf9e9dfa428c1b.js
vendored
8
dist/tablefilter/1-303232cf9e9dfa428c1b.js
vendored
File diff suppressed because one or more lines are too long
7166
dist/tablefilter/tablefilter.js
vendored
7166
dist/tablefilter/tablefilter.js
vendored
File diff suppressed because one or more lines are too long
|
@ -7,7 +7,7 @@
|
||||||
body{
|
body{
|
||||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
padding: 1em;
|
padding: 0 1em;
|
||||||
}
|
}
|
||||||
pre{
|
pre{
|
||||||
margin: auto 1em 1em 1em;
|
margin: auto 1em 1em 1em;
|
||||||
|
|
2644
examples/columns-visibility.html
Normal file
2644
examples/columns-visibility.html
Normal file
File diff suppressed because it is too large
Load diff
2638
examples/colums-visibility.html
Normal file
2638
examples/colums-visibility.html
Normal file
File diff suppressed because it is too large
Load diff
|
@ -7,7 +7,7 @@
|
||||||
body{
|
body{
|
||||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
padding: 1em;
|
padding: 0 1em;
|
||||||
}
|
}
|
||||||
pre{
|
pre{
|
||||||
margin: auto 1em 1em 1em;
|
margin: auto 1em 1em 1em;
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
body{
|
body{
|
||||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
padding: 1em;
|
padding: 0 1em;
|
||||||
}
|
}
|
||||||
pre{
|
pre{
|
||||||
margin: auto 1em 1em 1em;
|
margin: auto 1em 1em 1em;
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
body{
|
body{
|
||||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
padding: 1em;
|
padding: 0 1em;
|
||||||
}
|
}
|
||||||
pre{
|
pre{
|
||||||
margin: auto 1em 1em 1em;
|
margin: auto 1em 1em 1em;
|
||||||
|
@ -13076,6 +13076,8 @@ var tfConfig = {
|
||||||
col_2: "checklist",
|
col_2: "checklist",
|
||||||
col_4: "none",
|
col_4: "none",
|
||||||
col_8: "none",
|
col_8: "none",
|
||||||
|
|
||||||
|
/* external filters */
|
||||||
external_flt_grid: true,
|
external_flt_grid: true,
|
||||||
external_flt_grid_ids: [
|
external_flt_grid_ids: [
|
||||||
'slcCountry',
|
'slcCountry',
|
||||||
|
@ -13084,7 +13086,7 @@ var tfConfig = {
|
||||||
'inpPop'
|
'inpPop'
|
||||||
],
|
],
|
||||||
|
|
||||||
/* Sorting feature */
|
/* sorting feature */
|
||||||
extensions: [{ name: 'sort' }]
|
extensions: [{ name: 'sort' }]
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
body{
|
body{
|
||||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
padding: 1em;
|
padding: 0 1em;
|
||||||
}
|
}
|
||||||
pre{
|
pre{
|
||||||
margin: auto 1em 1em 1em;
|
margin: auto 1em 1em 1em;
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
body{
|
body{
|
||||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
padding: 1em;
|
padding: 0 1em;
|
||||||
}
|
}
|
||||||
pre{
|
pre{
|
||||||
margin: auto 1em 1em 1em;
|
margin: auto 1em 1em 1em;
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
body{
|
body{
|
||||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
padding: 1em;
|
padding: 0 1em;
|
||||||
}
|
}
|
||||||
pre{
|
pre{
|
||||||
margin: auto 1em 1em 1em;
|
margin: auto 1em 1em 1em;
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
body{
|
body{
|
||||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
padding: 1em;
|
padding: 0 1em;
|
||||||
}
|
}
|
||||||
pre{
|
pre{
|
||||||
margin: auto 1em 1em 1em;
|
margin: auto 1em 1em 1em;
|
||||||
|
@ -2602,13 +2602,15 @@
|
||||||
enable_default_theme: true,
|
enable_default_theme: true,
|
||||||
extensions:[{
|
extensions:[{
|
||||||
name: 'sort',
|
name: 'sort',
|
||||||
types: ['number', 'string', 'string', 'US', 'none', 'string']
|
types: [
|
||||||
|
'number', 'string', 'string',
|
||||||
|
'US', 'none', 'string'
|
||||||
|
]
|
||||||
}]
|
}]
|
||||||
};
|
};
|
||||||
|
|
||||||
var tf = new TableFilter('demo', filtersConfig);
|
var tf = new TableFilter('demo', filtersConfig);
|
||||||
tf.init();
|
tf.init();
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
var configs = document.querySelectorAll('script[data-config]');
|
var configs = document.querySelectorAll('script[data-config]');
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
body{
|
body{
|
||||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
padding: 1em;
|
padding: 0 1em;
|
||||||
}
|
}
|
||||||
pre{
|
pre{
|
||||||
margin: auto 1em 1em 1em;
|
margin: auto 1em 1em 1em;
|
||||||
|
|
|
@ -784,7 +784,6 @@ export class TableFilter{
|
||||||
Event.add(slc, 'change',
|
Event.add(slc, 'change',
|
||||||
this.Evt.onSlcChange.bind(this));
|
this.Evt.onSlcChange.bind(this));
|
||||||
Event.add(slc, 'focus', this.Evt.onSlcFocus.bind(this));
|
Event.add(slc, 'focus', this.Evt.onSlcFocus.bind(this));
|
||||||
// Event.add(slc, 'blur', this.Evt._OnSlcBlur);
|
|
||||||
|
|
||||||
//1st option is created here since dropdown.build isn't
|
//1st option is created here since dropdown.build isn't
|
||||||
//invoked
|
//invoked
|
||||||
|
@ -1334,41 +1333,6 @@ export class TableFilter{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*====================================================
|
|
||||||
- IE bug: it seems there is no way to make
|
|
||||||
multiple selections programatically, only last
|
|
||||||
selection is kept (multiple select previously
|
|
||||||
populated via DOM)
|
|
||||||
- Work-around: defer selection with a setTimeout
|
|
||||||
If you find a more elegant solution to
|
|
||||||
this let me know ;-)
|
|
||||||
- For the moment only this solution seems to work!
|
|
||||||
- Params:
|
|
||||||
- slc = select object (select obj)
|
|
||||||
- index to be selected (integer)
|
|
||||||
- execute filtering (boolean)
|
|
||||||
=====================================================*/
|
|
||||||
// __deferMultipleSelection: function(slc,index,filter){
|
|
||||||
// if(Str.lower(slc.nodeName)!=='select'){
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// let doFilter = filter===undefined ? false : filter;
|
|
||||||
// let o = this;
|
|
||||||
// global.setTimeout(function(){
|
|
||||||
// slc.options[0].selected = false;
|
|
||||||
|
|
||||||
// if(slc.options[index].value===''){
|
|
||||||
// slc.options[index].selected = false;
|
|
||||||
// }
|
|
||||||
// else{
|
|
||||||
// slc.options[index].selected = true;
|
|
||||||
// if(doFilter){
|
|
||||||
// o.filter();
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }, 0.1);
|
|
||||||
// },
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Check if given column implements a filter with custom options
|
* Check if given column implements a filter with custom options
|
||||||
* @param {Number} colIndex Column's index
|
* @param {Number} colIndex Column's index
|
||||||
|
@ -1476,12 +1440,6 @@ export class TableFilter{
|
||||||
opt = Dom.createOpt(s[j],s[j],true);
|
opt = Dom.createOpt(s[j],s[j],true);
|
||||||
slc.appendChild(opt);
|
slc.appendChild(opt);
|
||||||
this.hasStoredValues = true;
|
this.hasStoredValues = true;
|
||||||
|
|
||||||
// IE multiple selection work-around
|
|
||||||
// if(hlp.isIE()){
|
|
||||||
// this.__deferMultipleSelection(slc,j,false);
|
|
||||||
// hasStoredValues = false;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
}// if multiFltsIndex
|
}// if multiFltsIndex
|
||||||
}
|
}
|
||||||
|
@ -2138,7 +2096,7 @@ export class TableFilter{
|
||||||
* @return {String}
|
* @return {String}
|
||||||
*/
|
*/
|
||||||
getCellData(i, cell){
|
getCellData(i, cell){
|
||||||
if(i===undefined || !cell){
|
if(Types.isUndef(i) || !cell){
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
//First checks for customCellData event
|
//First checks for customCellData event
|
||||||
|
@ -2297,7 +2255,7 @@ export class TableFilter{
|
||||||
* @param {Number} index Column's index
|
* @param {Number} index Column's index
|
||||||
* @param {String} searcharg Search term
|
* @param {String} searcharg Search term
|
||||||
*/
|
*/
|
||||||
setFilterValue(index, searcharg=''/*, doFilter*/){
|
setFilterValue(index, searcharg=''){
|
||||||
if((!this.fltGrid && !this.isFirstLoad) ||
|
if((!this.fltGrid && !this.isFirstLoad) ||
|
||||||
!this.getFilterElement(index)){
|
!this.getFilterElement(index)){
|
||||||
return;
|
return;
|
||||||
|
@ -2324,17 +2282,6 @@ export class TableFilter{
|
||||||
}
|
}
|
||||||
if(option.value!=='' &&
|
if(option.value!=='' &&
|
||||||
Arr.has(s, option.value, true)){
|
Arr.has(s, option.value, true)){
|
||||||
// IE multiple selection work-around
|
|
||||||
// if(hlp.isIE()){
|
|
||||||
// //when last value reached filtering can be executed
|
|
||||||
// let filter = ct==(s.length-1) && execFilter ?
|
|
||||||
// true : false;
|
|
||||||
// this.__deferMultipleSelection(slc,j,filter);
|
|
||||||
// ct++;
|
|
||||||
// }
|
|
||||||
// else{
|
|
||||||
// slc.options[j].selected = true;
|
|
||||||
// }
|
|
||||||
option.selected = true;
|
option.selected = true;
|
||||||
}//if
|
}//if
|
||||||
}//for j
|
}//for j
|
||||||
|
@ -2615,21 +2562,6 @@ export class TableFilter{
|
||||||
Mod.popupFilter.buildAll();
|
Mod.popupFilter.buildAll();
|
||||||
}
|
}
|
||||||
|
|
||||||
/*** ie bug work-around, filters need to be re-generated since row
|
|
||||||
is empty; insertBefore method doesn't seem to work properly
|
|
||||||
with previously generated DOM nodes modified by innerHTML ***/
|
|
||||||
// function refreshFilters(o){
|
|
||||||
// tbl.deleteRow(filtersRowIndex);
|
|
||||||
// o.remove();
|
|
||||||
// o.fltIds = [];
|
|
||||||
// o.isFirstLoad = true;
|
|
||||||
// if(o.popUpFilters){
|
|
||||||
// // o.RemovePopupFilters();
|
|
||||||
// o.Mod.popupFilter.destroy();
|
|
||||||
// }
|
|
||||||
// o.init();
|
|
||||||
// }
|
|
||||||
|
|
||||||
if(!this.gridLayout){
|
if(!this.gridLayout){
|
||||||
Dom.addClass(this.tbl, this.prfxTf);
|
Dom.addClass(this.tbl, this.prfxTf);
|
||||||
}
|
}
|
||||||
|
@ -2892,43 +2824,6 @@ TableFilter.Paging = Paging;
|
||||||
// TableFilter.Help = Help;
|
// TableFilter.Help = Help;
|
||||||
// TableFilter.AlternateRows = AlternateRows;
|
// TableFilter.AlternateRows = AlternateRows;
|
||||||
|
|
||||||
//Firefox does not support outerHTML property
|
|
||||||
// function setOuterHtml(){
|
|
||||||
// if(doc.body.__defineGetter__){
|
|
||||||
// if(HTMLElement) {
|
|
||||||
// let element = HTMLElement.prototype;
|
|
||||||
// if(element.__defineGetter__){
|
|
||||||
// element.__defineGetter__("outerHTML",
|
|
||||||
// function(){
|
|
||||||
// let parent = this.parentNode;
|
|
||||||
// let el = Dom.create(parent.tagName);
|
|
||||||
// el.appendChild(this);
|
|
||||||
// let shtml = el.innerHTML;
|
|
||||||
// parent.appendChild(this);
|
|
||||||
// return shtml;
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
// if(element.__defineSetter__) {
|
|
||||||
// HTMLElement.prototype.__defineSetter__(
|
|
||||||
// "outerHTML", function(sHTML){
|
|
||||||
// let r = this.ownerDocument.createRange();
|
|
||||||
// r.setStartBefore(this);
|
|
||||||
// let df = r.createContextualFragment(sHTML);
|
|
||||||
// this.parentNode.replaceChild(df, this);
|
|
||||||
// return sHTML;
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// return TableFilter;
|
|
||||||
|
|
||||||
// });
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
/*====================================================
|
/*====================================================
|
||||||
- Sets filters grid bar
|
- Sets filters grid bar
|
||||||
- Calls TF Constructor and generates grid bar
|
- Calls TF Constructor and generates grid bar
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
body{
|
body{
|
||||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
padding: 1em;
|
padding: 0 1em;
|
||||||
}
|
}
|
||||||
pre{
|
pre{
|
||||||
margin: auto 1em 1em 1em;
|
margin: auto 1em 1em 1em;
|
||||||
|
|
61
static/templates/columns-visibility.html
Normal file
61
static/templates/columns-visibility.html
Normal file
|
@ -0,0 +1,61 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>{NAME} v{VERSION} - Columns Visibility Extension Demo</title>
|
||||||
|
<!-- @import partials/style.html -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>{NAME} v{VERSION}</h1>
|
||||||
|
<h2>Columns visibility extension demo</h2>
|
||||||
|
<p>
|
||||||
|
This demo features the columns visibility extension.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<button onclick="javascript:
|
||||||
|
tf.getExtension('colsVisibility').hideCol(0);">Hide Column 0</button>
|
||||||
|
<button onclick="javascript:
|
||||||
|
tf.getExtension('colsVisibility').showCol(0);">Show Column 0</button>
|
||||||
|
<button onclick="javascript:
|
||||||
|
tf.getExtension('colsVisibility').toggleCol(2);">Toggle Column 2</button>
|
||||||
|
</p>
|
||||||
|
<!-- @import partials/pre.html -->
|
||||||
|
<!-- @import partials/countries-by-continent.html -->
|
||||||
|
|
||||||
|
<!-- @import partials/tablefilter-script.html -->
|
||||||
|
<script data-config>
|
||||||
|
var tfConfig = {
|
||||||
|
base_path: '../dist/tablefilter/',
|
||||||
|
paging: true,
|
||||||
|
remember_grid_values: true,
|
||||||
|
alternate_rows: true,
|
||||||
|
rows_counter: true,
|
||||||
|
btn_reset: true,
|
||||||
|
btn_reset_text: "Clear",
|
||||||
|
status_bar: true,
|
||||||
|
col_1: "select",
|
||||||
|
col_2: "select",
|
||||||
|
|
||||||
|
/* columns visibility and sort extension */
|
||||||
|
extensions:[
|
||||||
|
{
|
||||||
|
name: 'colsVisibility',
|
||||||
|
at_start: [3, 5],
|
||||||
|
text: 'Columns: ',
|
||||||
|
enable_tick_all: true
|
||||||
|
}, {
|
||||||
|
name: 'sort',
|
||||||
|
types: [
|
||||||
|
'number', 'string', 'string',
|
||||||
|
'US', 'none', 'string'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
var tf = new TableFilter('demo', tfConfig);
|
||||||
|
tf.init();
|
||||||
|
</script>
|
||||||
|
<!-- @import partials/pre-inline-script.html -->
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -99,6 +99,8 @@ var tfConfig = {
|
||||||
col_2: "checklist",
|
col_2: "checklist",
|
||||||
col_4: "none",
|
col_4: "none",
|
||||||
col_8: "none",
|
col_8: "none",
|
||||||
|
|
||||||
|
/* external filters */
|
||||||
external_flt_grid: true,
|
external_flt_grid: true,
|
||||||
external_flt_grid_ids: [
|
external_flt_grid_ids: [
|
||||||
'slcCountry',
|
'slcCountry',
|
||||||
|
@ -107,7 +109,7 @@ var tfConfig = {
|
||||||
'inpPop'
|
'inpPop'
|
||||||
],
|
],
|
||||||
|
|
||||||
/* Sorting feature */
|
/* sorting feature */
|
||||||
extensions: [{ name: 'sort' }]
|
extensions: [{ name: 'sort' }]
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -30,13 +30,15 @@
|
||||||
enable_default_theme: true,
|
enable_default_theme: true,
|
||||||
extensions:[{
|
extensions:[{
|
||||||
name: 'sort',
|
name: 'sort',
|
||||||
types: ['number', 'string', 'string', 'US', 'none', 'string']
|
types: [
|
||||||
|
'number', 'string', 'string',
|
||||||
|
'US', 'none', 'string'
|
||||||
|
]
|
||||||
}]
|
}]
|
||||||
};
|
};
|
||||||
|
|
||||||
var tf = new TableFilter('demo', filtersConfig);
|
var tf = new TableFilter('demo', filtersConfig);
|
||||||
tf.init();
|
tf.init();
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<!-- @import partials/pre-inline-script.html -->
|
<!-- @import partials/pre-inline-script.html -->
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in a new issue