deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-11 02:46:41 +02:00
Code Issues Releases Wiki Activity

Added columns visibility extension demo

Browse source
This commit is contained in:
Max Guglielmi 2015-06-14 00:46:42 +10:00
parent a0b2de403b
commit c083dc517e
19 changed files with 14805 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2243
dist/tablefilter/1-1624429a94932563c8ae.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

8
dist/tablefilter/1-303232cf9e9dfa428c1b.js vendored
View file

File diff suppressed because one or more lines are too long

7170
dist/tablefilter/tablefilter.js vendored
View file

File diff suppressed because one or more lines are too long

2
examples/auto-filter.html
View file

@ -7,7 +7,7 @@
body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
padding: 1em;
padding: 0 1em;
}
pre{
margin: auto 1em 1em 1em;

2644
examples/columns-visibility.html Normal file
View file

File diff suppressed because it is too large Load diff

2638
examples/colums-visibility.html Normal file
View file

File diff suppressed because it is too large Load diff

2
examples/data-types.html
View file

@ -7,7 +7,7 @@
body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
padding: 1em;
padding: 0 1em;
}
pre{
margin: auto 1em 1em 1em;

2
examples/demo.html
View file

@ -7,7 +7,7 @@
body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
padding: 1em;
padding: 0 1em;
}
pre{
margin: auto 1em 1em 1em;

6
examples/external-filters.html
View file

@ -7,7 +7,7 @@
body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
padding: 1em;
padding: 0 1em;
}
pre{
margin: auto 1em 1em 1em;
@ -13076,6 +13076,8 @@ var tfConfig = {
col_2: "checklist",
col_4: "none",
col_8: "none",
/* external filters */
external_flt_grid: true,
external_flt_grid_ids: [
'slcCountry',
@ -13084,7 +13086,7 @@ var tfConfig = {
'inpPop'
],
/* Sorting feature */
/* sorting feature */
extensions: [{ name: 'sort' }]
};

2
examples/filter-images.html
View file

@ -7,7 +7,7 @@
body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
padding: 1em;
padding: 0 1em;
}
pre{
margin: auto 1em 1em 1em;

2
examples/grid-layout.html
View file

@ -7,7 +7,7 @@
body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
padding: 1em;
padding: 0 1em;
}
pre{
margin: auto 1em 1em 1em;

2
examples/linked-filters-disabled.html
View file

@ -7,7 +7,7 @@
body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
padding: 1em;
padding: 0 1em;
}
pre{
margin: auto 1em 1em 1em;

40
examples/linked-filters.html
View file

@ -7,7 +7,7 @@
body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
padding: 1em;
padding: 0 1em;
}
pre{
margin: auto 1em 1em 1em;
@ -2590,25 +2590,27 @@
<script src="../dist/tablefilter/tablefilter.js"></script>
<script data-config>
var filtersConfig = {
base_path: '../dist/tablefilter/',
linked_filters: true,
col_1: 'multiple',
col_2: 'checklist',
btn_reset: true,
display_all_text: '< Clear >',
alternate_rows: true,
rows_counter: true,
enable_default_theme: true,
extensions:[{
name: 'sort',
types: ['number', 'string', 'string', 'US', 'none', 'string']
}]
};
var tf = new TableFilter('demo', filtersConfig);
tf.init();
var filtersConfig = {
base_path: '../dist/tablefilter/',
linked_filters: true,
col_1: 'multiple',
col_2: 'checklist',
btn_reset: true,
display_all_text: '< Clear >',
alternate_rows: true,
rows_counter: true,
enable_default_theme: true,
extensions:[{
name: 'sort',
types: [
'number', 'string', 'string',
'US', 'none', 'string'
]
}]
};
var tf = new TableFilter('demo', filtersConfig);
tf.init();
</script>
<script>
var configs = document.querySelectorAll('script[data-config]');

2
examples/pagination.html
View file

@ -7,7 +7,7 @@
body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
padding: 1em;
padding: 0 1em;
}
pre{
margin: auto 1em 1em 1em;

109
src/tablefilter.js
View file

@ -784,7 +784,6 @@ export class TableFilter{
Event.add(slc, 'change',
this.Evt.onSlcChange.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
//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
* @param {Number} colIndex Column's index
@ -1476,12 +1440,6 @@ export class TableFilter{
opt = Dom.createOpt(s[j],s[j],true);
slc.appendChild(opt);
this.hasStoredValues = true;
// IE multiple selection work-around
// if(hlp.isIE()){
// this.__deferMultipleSelection(slc,j,false);
// hasStoredValues = false;
// }
}
}// if multiFltsIndex
}
@ -2138,7 +2096,7 @@ export class TableFilter{
* @return {String}
*/
getCellData(i, cell){
if(i===undefined || !cell){
if(Types.isUndef(i) || !cell){
return '';
}
//First checks for customCellData event
@ -2297,7 +2255,7 @@ export class TableFilter{
* @param {Number} index Column's index
* @param {String} searcharg Search term
*/
setFilterValue(index, searcharg=''/*, doFilter*/){
setFilterValue(index, searcharg=''){
if((!this.fltGrid && !this.isFirstLoad) ||
!this.getFilterElement(index)){
return;
@ -2324,17 +2282,6 @@ export class TableFilter{
}
if(option.value!=='' &&
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;
}//if
}//for j
@ -2615,21 +2562,6 @@ export class TableFilter{
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){
Dom.addClass(this.tbl, this.prfxTf);
}
@ -2892,43 +2824,6 @@ TableFilter.Paging = Paging;
// TableFilter.Help = Help;
// 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
- Calls TF Constructor and generates grid bar

2
static/partials/style.html
View file

@ -3,7 +3,7 @@
body{
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
padding: 1em;
padding: 0 1em;
}
pre{
margin: auto 1em 1em 1em;

61
static/templates/columns-visibility.html Normal file
View 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>

4
static/templates/external-filters.html
View file

@ -99,6 +99,8 @@ var tfConfig = {
col_2: "checklist",
col_4: "none",
col_8: "none",
/* external filters */
external_flt_grid: true,
external_flt_grid_ids: [
'slcCountry',
@ -107,7 +109,7 @@ var tfConfig = {
'inpPop'
],
/* Sorting feature */
/* sorting feature */
extensions: [{ name: 'sort' }]
};

38
static/templates/linked-filters.html
View file

@ -18,25 +18,27 @@
<!-- @import partials/tablefilter-script.html -->
<script data-config>
var filtersConfig = {
base_path: '../dist/tablefilter/',
linked_filters: true,
col_1: 'multiple',
col_2: 'checklist',
btn_reset: true,
display_all_text: '< Clear >',
alternate_rows: true,
rows_counter: true,
enable_default_theme: true,
extensions:[{
name: 'sort',
types: ['number', 'string', 'string', 'US', 'none', 'string']
}]
};
var tf = new TableFilter('demo', filtersConfig);
tf.init();
var filtersConfig = {
base_path: '../dist/tablefilter/',
linked_filters: true,
col_1: 'multiple',
col_2: 'checklist',
btn_reset: true,
display_all_text: '< Clear >',
alternate_rows: true,
rows_counter: true,
enable_default_theme: true,
extensions:[{
name: 'sort',
types: [
'number', 'string', 'string',
'US', 'none', 'string'
]
}]
};
var tf = new TableFilter('demo', filtersConfig);
tf.init();
</script>
<!-- @import partials/pre-inline-script.html -->
</body>