mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-06-08 08:52:32 +02:00
Started filtersVisibility extension
This commit is contained in:
parent
1cf087e5bc
commit
8768f653ac
14
Gruntfile.js
14
Gruntfile.js
|
@ -15,7 +15,7 @@ module.exports = function (grunt) {
|
||||||
src: [
|
src: [
|
||||||
'Gruntfile.js',
|
'Gruntfile.js',
|
||||||
'webpack.config.js',
|
'webpack.config.js',
|
||||||
'src-es6/**/*.js'
|
'src/**/*.js'
|
||||||
],
|
],
|
||||||
options: {
|
options: {
|
||||||
jshintrc: '.jshintrc'
|
jshintrc: '.jshintrc'
|
||||||
|
@ -70,11 +70,11 @@ module.exports = function (grunt) {
|
||||||
dist: webpackConfig.dist,
|
dist: webpackConfig.dist,
|
||||||
build: webpackConfig.build
|
build: webpackConfig.build
|
||||||
// 'dev': {
|
// 'dev': {
|
||||||
// entry: __dirname + '/src-es6/tablefilter.js',
|
// entry: __dirname + '/src/tablefilter.js',
|
||||||
// // entry: {
|
// // entry: {
|
||||||
// // tablefilter: __dirname + '/src-es6/tablefilter.js',
|
// // tablefilter: __dirname + '/src/tablefilter.js',
|
||||||
// // colsVisibility: __dirname +
|
// // colsVisibility: __dirname +
|
||||||
// // '/src-es6/extensions/colsVisibility/colsVisibility.js'
|
// // '/src/extensions/colsVisibility/colsVisibility.js'
|
||||||
// // },
|
// // },
|
||||||
// output: {
|
// output: {
|
||||||
// publicPath: '/src/',
|
// publicPath: '/src/',
|
||||||
|
@ -88,7 +88,7 @@ module.exports = function (grunt) {
|
||||||
// },
|
// },
|
||||||
// module: {
|
// module: {
|
||||||
// loaders: [{
|
// loaders: [{
|
||||||
// test: path.join(__dirname, 'src-es6'),
|
// test: path.join(__dirname, 'src'),
|
||||||
// exclude: /node_modules/,
|
// exclude: /node_modules/,
|
||||||
// query: {
|
// query: {
|
||||||
// compact: false
|
// compact: false
|
||||||
|
@ -103,7 +103,7 @@ module.exports = function (grunt) {
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
app: {
|
app: {
|
||||||
files: ["src-es6/**/*"],
|
files: ["src/**/*"],
|
||||||
tasks: ["dev"],
|
tasks: ["dev"],
|
||||||
options: {
|
options: {
|
||||||
spawn: false
|
spawn: false
|
||||||
|
@ -120,7 +120,7 @@ module.exports = function (grunt) {
|
||||||
dist: {
|
dist: {
|
||||||
files: [{
|
files: [{
|
||||||
expand: true,
|
expand: true,
|
||||||
cwd: 'src-es6',
|
cwd: 'src',
|
||||||
src: ['**/*.js'],
|
src: ['**/*.js'],
|
||||||
dest: 'build/tablefilter'
|
dest: 'build/tablefilter'
|
||||||
}]
|
}]
|
||||||
|
|
3
dist/tablefilter/1-926cf2bd1a254bbaafde.js
vendored
Normal file
3
dist/tablefilter/1-926cf2bd1a254bbaafde.js
vendored
Normal file
File diff suppressed because one or more lines are too long
3
dist/tablefilter/1-9803ed6151473186f605.js
vendored
3
dist/tablefilter/1-9803ed6151473186f605.js
vendored
File diff suppressed because one or more lines are too long
22
dist/tablefilter/filtersVisibility.css
vendored
Normal file
22
dist/tablefilter/filtersVisibility.css
vendored
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
/*====================================================
|
||||||
|
- HTML Table Filter Generator
|
||||||
|
- Filters Row Visibility Manager Extension v1.1
|
||||||
|
- do not hesitate to edit classes below to
|
||||||
|
change extension appearance
|
||||||
|
=====================================================*/
|
||||||
|
|
||||||
|
/* container */
|
||||||
|
span.expClpFlt{ }
|
||||||
|
|
||||||
|
/* icon */
|
||||||
|
span.expClpFlt img{
|
||||||
|
vertical-align:middle;
|
||||||
|
border:1px solid #ccc;
|
||||||
|
padding:1px 1px 1px 1px;
|
||||||
|
margin:1px 1px 1px 1px;
|
||||||
|
background:#f4f4f4;
|
||||||
|
}
|
||||||
|
span.expClpFlt img:hover{ background:#fff; border:1px solid #666; }
|
||||||
|
|
||||||
|
/* button */
|
||||||
|
.btnExpClpFlt{ margin:0 5px 0 5px; }
|
BIN
dist/tablefilter/icn_clp.png
vendored
Normal file
BIN
dist/tablefilter/icn_clp.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 441 B |
BIN
dist/tablefilter/icn_exp.png
vendored
Normal file
BIN
dist/tablefilter/icn_exp.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 469 B |
2
dist/tablefilter/tablefilter.js
vendored
2
dist/tablefilter/tablefilter.js
vendored
File diff suppressed because one or more lines are too long
|
@ -2,8 +2,10 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>HTML Table Filter Generator</title>
|
<title>HTML Table Filter Generator</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../build/tablefilter/tablefilter.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="test"></div>
|
||||||
<table id="demo" cellpadding="0" cellspacing="0">
|
<table id="demo" cellpadding="0" cellspacing="0">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -84,7 +86,6 @@
|
||||||
<button onclick="tf.init();">Reset</button>
|
<button onclick="tf.init();">Reset</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="../build/tablefilter/themes/skyblue/skyblue.css">
|
|
||||||
<script type="text/javascript" src="../build/tablefilter/tablefilter.js"></script>
|
<script type="text/javascript" src="../build/tablefilter/tablefilter.js"></script>
|
||||||
<script>
|
<script>
|
||||||
var table = document.getElementById('demo');
|
var table = document.getElementById('demo');
|
||||||
|
@ -100,7 +101,7 @@
|
||||||
// enable_default_theme: true,
|
// enable_default_theme: true,
|
||||||
// help_instructions: false,
|
// help_instructions: false,
|
||||||
mark_active_columns: true,
|
mark_active_columns: true,
|
||||||
// auto_filter: false,
|
auto_filter: false,
|
||||||
auto_filter_delay: 200,
|
auto_filter_delay: 200,
|
||||||
loader: true,
|
loader: true,
|
||||||
themes: [{ name: 'skyblue'}],
|
themes: [{ name: 'skyblue'}],
|
||||||
|
@ -148,6 +149,14 @@
|
||||||
editable: true,
|
editable: true,
|
||||||
default_selection: 'both',
|
default_selection: 'both',
|
||||||
auto_save: false
|
auto_save: false
|
||||||
|
},{
|
||||||
|
name: 'filtersVisibility',
|
||||||
|
// enable_icon: true,
|
||||||
|
// target_id: 'test',
|
||||||
|
visible_at_start: false
|
||||||
|
// ,
|
||||||
|
// btn_text: 'Filters',
|
||||||
|
// filters_row_index: 0
|
||||||
},{
|
},{
|
||||||
/*** Columns Visibility Manager extension load ***/
|
/*** Columns Visibility Manager extension load ***/
|
||||||
name: 'colsVisibility',
|
name: 'colsVisibility',
|
||||||
|
|
|
@ -1,47 +0,0 @@
|
||||||
/*====================================================
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Columns Visibility Manager Extension
|
|
||||||
- do not hesitate to edit classes below to
|
|
||||||
change extension appearance
|
|
||||||
=====================================================*/
|
|
||||||
|
|
||||||
span.showHideColsSpan{ text-align:left; }
|
|
||||||
|
|
||||||
span.showHideColsSpan a.showHideCols{
|
|
||||||
/* Link */
|
|
||||||
margin:0 5px 0 5px;
|
|
||||||
}
|
|
||||||
div.showHideColsCont{
|
|
||||||
/* Container div */
|
|
||||||
position:absolute;
|
|
||||||
display:none;
|
|
||||||
border:1px solid #ccc;
|
|
||||||
height:auto; width:250px;
|
|
||||||
background:#fff;
|
|
||||||
margin:18px 0 0 0; z-index:10000;
|
|
||||||
padding:10px 10px 10px 10px;
|
|
||||||
text-align:left; font-size:12px;
|
|
||||||
border-radius:4px;
|
|
||||||
-moz-border-radius:4px;
|
|
||||||
-webkit-border-radius:4px;
|
|
||||||
box-shadow:3px 3px 2px #888;
|
|
||||||
-moz-box-shadow:3px 3px 2px #888;
|
|
||||||
-webkit-box-shadow:3px 3px 2px #888;
|
|
||||||
}
|
|
||||||
div.showHideColsCont p{ margin:6px auto 6px auto; }
|
|
||||||
|
|
||||||
ul.cols_checklist{ padding:0; margin:0; list-style: none; }
|
|
||||||
li.cols_checklist_item{ /*check list item*/
|
|
||||||
padding:1px; margin:0; font-size:11px;
|
|
||||||
border-bottom:1px solid #ccc;
|
|
||||||
}
|
|
||||||
li.cols_checklist_item:hover{
|
|
||||||
background-color:#335EA8;
|
|
||||||
color:#fff;
|
|
||||||
}
|
|
||||||
.cols_checklist_slc_item{ /*selected check list item*/
|
|
||||||
background-color:#335EA8;
|
|
||||||
color:#fff;
|
|
||||||
}
|
|
||||||
ul.cols_checklist label{ display:block; }
|
|
||||||
ul.cols_checklist input{ vertical-align:middle; margin:2px 5px 2px 1px; }
|
|
|
@ -1,498 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Columns Visibility Manager Extension v1.4
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
--------------------------------------------------------------------------
|
|
||||||
Copyright (c) 2009-2012 Max Guglielmi
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining
|
|
||||||
a copy of this software and associated documentation files (the
|
|
||||||
"Software"), to deal in the Software without restriction, including
|
|
||||||
without limitation the rights to use, copy, modify, merge, publish,
|
|
||||||
distribute, sublicense, and/or sell copies of the Software, and to
|
|
||||||
permit persons to whom the Software is furnished to do so, subject to
|
|
||||||
the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included
|
|
||||||
in all copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
||||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
||||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
|
||||||
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
|
||||||
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
|
||||||
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
|
||||||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
||||||
------------------------------------------------------------------------
|
|
||||||
- Special credit to:
|
|
||||||
Salman A. Kagzi for active contribution and/or inspiration
|
|
||||||
------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.SetColsVisibility = function(extName)
|
|
||||||
{
|
|
||||||
var o = this, f = o.fObj, ext = (extName) ? o.Ext.list[extName] : o.Ext.list['ColsVisibility'];
|
|
||||||
o.colsVisibility = (f.cols_visibility==undefined) ? true : f.cols_visibility;
|
|
||||||
if(!o.colsVisibility || o.showHideColsExtLoaded) return;
|
|
||||||
|
|
||||||
o.showHideColsExtLoaded = false;
|
|
||||||
o.showHideColsExtName = ext.name;
|
|
||||||
o.showHideColsExtDesc = ext.description;
|
|
||||||
|
|
||||||
o.showHideColsSpanEl = null; //show/hide cols span element
|
|
||||||
o.btnShowHideColsEl = null; //show/hide cols button element
|
|
||||||
o.showHideColsContEl = null; //show/hide cols container div element
|
|
||||||
|
|
||||||
o.showHideColsTickToHide = f.showHide_cols_tick_to_hide!=undefined //tick to hide or show column
|
|
||||||
? f.showHide_cols_tick_to_hide : true;
|
|
||||||
o.showHideColsManager = f.showHide_cols_manager!=undefined //enables/disables cols manager generation
|
|
||||||
? f.showHide_cols_manager : true;
|
|
||||||
o.showHideColsHeadersTbl = f.showHide_cols_headers_table!=undefined //only if external headers
|
|
||||||
? f.showHide_cols_headers_table : null;
|
|
||||||
o.showHideColsHeadersIndex = f.showHide_cols_headers_index!=undefined //only if external headers
|
|
||||||
? f.showHide_cols_headers_index : 1;
|
|
||||||
o.showHideColsContElTgtId = f.showHide_cols_container_target_id!=undefined //id of container element
|
|
||||||
? f.showHide_cols_container_target_id : null;
|
|
||||||
o.showHideColsHeadersText = f.showHide_cols_headers_text!=undefined //alternative headers text
|
|
||||||
? f.showHide_cols_headers_text : null;
|
|
||||||
o.btnShowHideColsTgtId = f.btn_showHide_cols_target_id!=undefined //id of button container element
|
|
||||||
? f.btn_showHide_cols_target_id : null;
|
|
||||||
o.btnShowHideColsText = f.btn_showHide_cols_text!=undefined
|
|
||||||
? f.btn_showHide_cols_text : 'Display columns▼'; //defines show/hide cols text
|
|
||||||
o.btnShowHideColsHtml = f.btn_showHide_cols_html!=undefined
|
|
||||||
? f.btn_showHide_cols_html : null; //defines show/hide cols button innerHtml
|
|
||||||
o.btnShowHideColsCssClass = f.btn_showHide_cols_css_class!=undefined //defines css class for show/hide cols button
|
|
||||||
? f.btn_showHide_cols_css_class :'showHideCols';
|
|
||||||
o.btnShowHideColsCloseText = f.btn_showHide_cols_close_text!=undefined
|
|
||||||
? f.btn_showHide_cols_close_text : 'Close'; //defines close link text
|
|
||||||
o.btnShowHideColsCloseHtml = f.btn_showHide_cols_close_html!=undefined
|
|
||||||
? f.btn_showHide_cols_close_html : null; //defines close button innerHtml
|
|
||||||
o.btnShowHideColsCloseCssClass = f.btn_showHide_cols_close_css_class!=undefined //defines css class for close button
|
|
||||||
? f.btn_showHide_cols_close_css_class :o.btnShowHideColsCssClass;
|
|
||||||
|
|
||||||
o.showHideColsExtPath = (ext.path == undefined) ? 'TFExt_ColsVisibility/' : ext.path;
|
|
||||||
o.showHideColsStylesheet = 'TFExt_ColsVisibility.css';
|
|
||||||
o.prfxShowHideColsSpan = 'showHideCols_'; //span containing show/hide cols button
|
|
||||||
o.showHideColsSpanCss = f.showHide_cols_span_css_class!=undefined //defines css class span containing show/hide cols
|
|
||||||
? f.showHide_cols_span_css_class : 'showHideColsSpan';
|
|
||||||
o.prfxShowHideColsCont = 'showHideColsCont_';
|
|
||||||
o.showHideColsContCss = f.showHide_cols_cont_css_class!=undefined //defines css class div containing show/hide cols
|
|
||||||
? f.showHide_cols_cont_css_class : 'showHideColsCont';
|
|
||||||
o.showHideColsListCss = f.showHide_cols_list_css_class!=undefined //defines css class for cols list (ul)
|
|
||||||
? f.showHide_cols_list_css_class : 'cols_checklist';
|
|
||||||
o.showHideColsListItemCssClass = f.checklist_item_css_class!=undefined //defines css class for list item (li)
|
|
||||||
? f.checklist_item_css_class : 'cols_checklist_item';
|
|
||||||
o.showHideColsListSlcItemCssClass = f.checklist_selected_item_css_class!=undefined //defines css class for selected list item (li)
|
|
||||||
? f.checklist_selected_item_css_class : 'cols_checklist_slc_item';
|
|
||||||
o.showHideColsText = f.showHide_cols_text!=undefined //text preceding columns list
|
|
||||||
? f.showHide_cols_text : 'Hide columns: ';
|
|
||||||
o.showHideColsAtStart = f.showHide_cols_at_start!=undefined
|
|
||||||
? f.showHide_cols_at_start : null;
|
|
||||||
o.showHideColsEnableHover = f.showHide_cols_enable_hover!=undefined
|
|
||||||
? f.showHide_cols_enable_hover : false;
|
|
||||||
o.showHideEnableTickAll = f.showHide_enable_tick_all!=undefined //enables select all option
|
|
||||||
? f.showHide_enable_tick_all : false;
|
|
||||||
o.showHideTickAllText = f.showHide_tick_all_text!=undefined //text preceding columns list
|
|
||||||
? f.showHide_tick_all_text : 'Select all:';
|
|
||||||
o.showHideColsIsOpen = false;
|
|
||||||
o.showHideHiddenCols = []; //array containing hidden columns indexes
|
|
||||||
o.tblHasColTag = (tf_Tag(o.tbl,'col').length > 0) ? true : false;
|
|
||||||
|
|
||||||
/*** Extension events ***/
|
|
||||||
//callback invoked just after cols manager is loaded
|
|
||||||
o.onColsManagerLoaded = tf_IsFn(f.on_cols_manager_loaded) ? f.on_cols_manager_loaded : null;
|
|
||||||
//calls function before cols manager is opened
|
|
||||||
o.onBeforeOpenColsManager = tf_IsFn(f.on_before_open_cols_manager) ? f.on_before_open_cols_manager : null;
|
|
||||||
//calls function after cols manager is opened
|
|
||||||
o.onAfterOpenColsManager = tf_IsFn(f.on_after_open_cols_manager) ? f.on_after_open_cols_manager : null;
|
|
||||||
//calls function before cols manager is closed
|
|
||||||
o.onBeforeCloseColsManager = tf_IsFn(f.on_before_close_cols_manager) ? f.on_before_close_cols_manager : null;
|
|
||||||
//calls function after cols manager is closed
|
|
||||||
o.onAfterCloseColsManager = tf_IsFn(f.on_after_close_cols_manager) ? f.on_after_close_cols_manager : null;
|
|
||||||
|
|
||||||
//calls function before col is hidden
|
|
||||||
o.onBeforeColIsHidden = tf_IsFn(f.on_before_col_is_hidden) ? f.on_before_col_is_hidden : null;
|
|
||||||
//calls function after col is hidden
|
|
||||||
o.onAfterColIsHidden = tf_IsFn(f.on_after_col_is_hidden) ? f.on_after_col_is_hidden : null;
|
|
||||||
//calls function before col is displayed
|
|
||||||
o.onBeforeColIsDisplayed = tf_IsFn(f.on_before_col_is_displayed) ? f.on_before_col_is_displayed : null;
|
|
||||||
//calls function after col is displayed
|
|
||||||
o.onAfterColIsDisplayed = tf_IsFn(f.on_after_col_is_displayed) ? f.on_after_col_is_displayed : null;
|
|
||||||
/*** ***/
|
|
||||||
|
|
||||||
//Grid layout compatibility
|
|
||||||
if(o.gridLayout){
|
|
||||||
o.showHideColsHeadersTbl = o.headTbl; //headers table
|
|
||||||
o.showHideColsHeadersIndex = 0; //headers index
|
|
||||||
o.onAfterColIsDisplayed = function(){};
|
|
||||||
o.onAfterColIsHidden = function(){};
|
|
||||||
}
|
|
||||||
|
|
||||||
//Extension event definition
|
|
||||||
o.Evt.name.colsvisibility = 'ShowColsVisibility'; //event name for TF event manager
|
|
||||||
o.msgShowColsVisibility = 'Show/Hide columns'; //event status message
|
|
||||||
o.Evt._ShowColsVisibility = function(){ o.ShowColsVisibility(); }; //event
|
|
||||||
o.Evt.name.checkitem = 'CheckItem'; //event name for TF event manager
|
|
||||||
o.msgCheckItem = 'Showing/hiding columns'; //event status message
|
|
||||||
o.Evt._CheckItem = function(li){ o.CheckItem(li); }; //event
|
|
||||||
|
|
||||||
//Loads extension stylesheet
|
|
||||||
o.IncludeFile(ext.name+'Style', o.showHideColsExtPath + o.showHideColsStylesheet, null, 'link');
|
|
||||||
|
|
||||||
//Sets button
|
|
||||||
if(o.showHideColsManager) o.SetShowHideColsBtn();
|
|
||||||
o.showHideColsExtLoaded = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.SetShowHideColsBtn = function()
|
|
||||||
/*====================================================
|
|
||||||
- Generates show/hide cols button
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.hasGrid && !this.isFirstLoad) return;
|
|
||||||
if( this.btnShowHideColsEl!=null ) return;
|
|
||||||
var showHideColsSpan = tf_CreateElm('span',['id',this.prfxShowHideColsSpan+this.id]);
|
|
||||||
showHideColsSpan.className = this.showHideColsSpanCss;
|
|
||||||
|
|
||||||
//Container element (rdiv or custom element)
|
|
||||||
if(this.btnShowHideColsTgtId==null) this.SetTopDiv();
|
|
||||||
var targetEl = ( this.btnShowHideColsTgtId==null ) ? this.rDiv : tf_Id( this.btnShowHideColsTgtId );
|
|
||||||
|
|
||||||
if(this.btnShowHideColsTgtId==null)
|
|
||||||
targetEl.firstChild.parentNode.insertBefore(showHideColsSpan,targetEl.firstChild);
|
|
||||||
else
|
|
||||||
targetEl.appendChild(showHideColsSpan);
|
|
||||||
|
|
||||||
if(this.btnShowHideColsHtml==null)
|
|
||||||
{ //Default link
|
|
||||||
var btn = tf_CreateElm( 'a', ['href','javascript:;'] );
|
|
||||||
btn.className = this.btnShowHideColsCssClass;
|
|
||||||
btn.title = this.showHideColsExtDesc;
|
|
||||||
|
|
||||||
btn.innerHTML = this.btnShowHideColsText;
|
|
||||||
showHideColsSpan.appendChild(btn);
|
|
||||||
if(!this.showHideColsEnableHover)
|
|
||||||
btn.onclick = this.Evt._ShowColsVisibility;
|
|
||||||
else{
|
|
||||||
var o = this;
|
|
||||||
btn.onmouseover = this.Evt._ShowColsVisibility;
|
|
||||||
}
|
|
||||||
} else { //Custom html
|
|
||||||
showHideColsSpan.innerHTML = this.btnShowHideColsHtml;
|
|
||||||
var showHideColsEl = showHideColsSpan.firstChild;
|
|
||||||
if(!this.showHideColsEnableHover)
|
|
||||||
showHideColsEl.onclick = this.Evt._ShowColsVisibility;
|
|
||||||
else
|
|
||||||
showHideColsEl.onmouseover = this.Evt._ShowColsVisibility;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.showHideColsSpanEl = showHideColsSpan;
|
|
||||||
this.btnShowHideColsEl = this.showHideColsSpanEl.firstChild;
|
|
||||||
|
|
||||||
this.SetColsVisibilityManager();
|
|
||||||
|
|
||||||
if(this.onColsManagerLoaded) this.onColsManagerLoaded.call(null, this);
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.SetColsVisibilityManager = function()
|
|
||||||
/*====================================================
|
|
||||||
- Generates show/hide cols manager
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.hasGrid && !this.isFirstLoad) return;
|
|
||||||
|
|
||||||
var container = (!this.showHideColsContElTgtId)
|
|
||||||
? tf_CreateElm('div',['id',this.prfxShowHideColsCont+this.id])
|
|
||||||
: tf_Id(this.showHideColsContElTgtId);
|
|
||||||
container.className = this.showHideColsContCss;
|
|
||||||
|
|
||||||
//Extension description
|
|
||||||
var extNameLabel = tf_CreateElm('p');
|
|
||||||
extNameLabel.innerHTML = this.showHideColsText;
|
|
||||||
container.appendChild(extNameLabel);
|
|
||||||
|
|
||||||
//Headers list
|
|
||||||
var ul = tf_CreateElm('ul',['id','ul'+this.showHideColsExtName+'_'+this.id]);
|
|
||||||
ul.className = this.showHideColsListCss;
|
|
||||||
|
|
||||||
var o = this;
|
|
||||||
var tbl = (o.showHideColsHeadersTbl) ? o.showHideColsHeadersTbl : o.tbl;
|
|
||||||
var headerIndex = (o.showHideColsHeadersTbl)
|
|
||||||
? o.showHideColsHeadersIndex : o.GetHeadersRowIndex();
|
|
||||||
var headerRow = tbl.rows[headerIndex];
|
|
||||||
|
|
||||||
//Tick all option
|
|
||||||
if(o.showHideEnableTickAll){
|
|
||||||
var li = tf_CreateCheckItem('col__'+o.id, o.showHideTickAllText, o.showHideTickAllText);
|
|
||||||
tf_AddClass(li,this.showHideColsListItemCssClass);
|
|
||||||
ul.appendChild(li);
|
|
||||||
var isAllTicked = false;
|
|
||||||
li.check.onclick = function(){
|
|
||||||
for(var h=0; h<headerRow.cells.length; h++)
|
|
||||||
{
|
|
||||||
var itm = tf_Id('col_'+h+'_'+o.id);
|
|
||||||
if(!isAllTicked && itm.checked) itm.checked = false;
|
|
||||||
if(isAllTicked && !itm.checked) itm.checked = true;
|
|
||||||
if(itm) itm.click();
|
|
||||||
}
|
|
||||||
isAllTicked = (isAllTicked ? false : true);
|
|
||||||
};
|
|
||||||
if(tf_isIE)
|
|
||||||
{//IE: label looses check capability
|
|
||||||
li.label.onclick = function(){ this.firstChild.click(); };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for(var i=0; i<headerRow.cells.length; i++)
|
|
||||||
{
|
|
||||||
var cell = headerRow.cells[i];
|
|
||||||
var cellText = (o.showHideColsHeadersText && o.showHideColsHeadersText[i])
|
|
||||||
? o.showHideColsHeadersText[i] : tf_GetHeaderText(cell);
|
|
||||||
var li = tf_CreateCheckItem('col_'+i+'_'+o.id, cellText, cellText);
|
|
||||||
tf_AddClass(li,this.showHideColsListItemCssClass);
|
|
||||||
if(!o.showHideColsTickToHide) tf_AddClass(li,this.showHideColsListSlcItemCssClass);
|
|
||||||
ul.appendChild(li);
|
|
||||||
if(!o.showHideColsTickToHide) li.check.checked = true;
|
|
||||||
li.check.onclick = function(){ o.Evt._CheckItem(this.parentNode); };
|
|
||||||
if(tf_isIE)
|
|
||||||
{//IE: label looses check capability
|
|
||||||
li.label.onclick = function(){ this.firstChild.click(); };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//separator
|
|
||||||
var p = tf_CreateElm('p',['align','center']);
|
|
||||||
|
|
||||||
//Close link
|
|
||||||
if(this.btnShowHideColsCloseHtml==null)
|
|
||||||
{
|
|
||||||
var btn = tf_CreateElm( 'a', ['href','javascript:;'] );
|
|
||||||
btn.className = this.btnShowHideColsCloseCssClass;
|
|
||||||
btn.innerHTML = this.btnShowHideColsCloseText;
|
|
||||||
btn.onclick = this.Evt._ShowColsVisibility;
|
|
||||||
p.appendChild(btn);
|
|
||||||
} else {
|
|
||||||
p.innerHTML = this.btnShowHideColsCloseHtml;
|
|
||||||
var btn = p.firstChild;
|
|
||||||
btn.onclick = this.Evt._ShowColsVisibility;
|
|
||||||
}
|
|
||||||
|
|
||||||
container.appendChild(ul);
|
|
||||||
container.appendChild(p);
|
|
||||||
|
|
||||||
//this.showHideColsSpanEl.appendChild(container);
|
|
||||||
this.btnShowHideColsEl.parentNode.insertBefore(container, this.btnShowHideColsEl);
|
|
||||||
this.showHideColsContEl = container;
|
|
||||||
|
|
||||||
//IE6 only: options are not checked if showHideColsTickToHide=false
|
|
||||||
if(tf_isIE && !o.showHideColsTickToHide)
|
|
||||||
for(var i=0; i<headerRow.cells.length; i++)
|
|
||||||
tf_Id('col_'+i+'_'+o.id).checked = true;
|
|
||||||
|
|
||||||
if(this.showHideColsAtStart != null)
|
|
||||||
{
|
|
||||||
var a = this.showHideColsAtStart;
|
|
||||||
for(var k=0; k<a.length; k++)
|
|
||||||
{
|
|
||||||
var itm = tf_Id('col_'+a[k]+'_'+o.id);
|
|
||||||
if(itm) itm.click();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.ShowColsVisibility = function()
|
|
||||||
{
|
|
||||||
this.EvtManager(this.Evt.name.colsvisibility);
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype._ShowColsVisibility = function(o)
|
|
||||||
{
|
|
||||||
var contDisplay = o.showHideColsContEl.style.display;
|
|
||||||
|
|
||||||
if(o.onBeforeOpenColsManager && contDisplay!='inline') o.onBeforeOpenColsManager.call(null,o);
|
|
||||||
if(o.onBeforeCloseColsManager && contDisplay=='inline') o.onBeforeCloseColsManager.call(null,o);
|
|
||||||
|
|
||||||
o.showHideColsContEl.style.display = (contDisplay=='inline') ? 'none' : 'inline';
|
|
||||||
|
|
||||||
if(o.onAfterOpenColsManager && contDisplay!='inline') o.onAfterOpenColsManager.call(null,o);
|
|
||||||
if(o.onAfterCloseColsManager && contDisplay=='inline') o.onAfterCloseColsManager.call(null,o);
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.CheckItem = function(n)
|
|
||||||
{
|
|
||||||
this.EvtManager(this.Evt.name.checkitem,{ lbl:n });
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype._CheckItem = function(o, el)
|
|
||||||
{
|
|
||||||
var li = el.lbl || tf_Tag(el, 'label')[0];
|
|
||||||
if(li == null || li.firstChild == null) return;
|
|
||||||
var isChecked = li.firstChild.checked;
|
|
||||||
var colIndex = li.firstChild.getAttribute('id').split('_')[1];
|
|
||||||
if(isChecked){
|
|
||||||
tf_AddClass(li.parentNode,o.showHideColsListSlcItemCssClass);
|
|
||||||
} else {
|
|
||||||
tf_RemoveClass(li.parentNode,o.showHideColsListSlcItemCssClass);
|
|
||||||
}
|
|
||||||
var hide = ((o.showHideColsTickToHide && isChecked) || (!o.showHideColsTickToHide && !isChecked)) ? true : false;
|
|
||||||
o._ShowHideCol(colIndex, hide);
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype._ShowHideCol = function(colIndex, hide)
|
|
||||||
{
|
|
||||||
var o = this;
|
|
||||||
var col = tf_Tag(o.tbl,'col')[colIndex];
|
|
||||||
//External headers
|
|
||||||
var col1 = (o.showHideColsHeadersTbl)
|
|
||||||
? tf_Tag(o.showHideColsHeadersTbl,'col')[colIndex] : null;
|
|
||||||
|
|
||||||
if(o.onBeforeColIsHidden && hide) o.onBeforeColIsHidden.call(null, o, colIndex);
|
|
||||||
if(o.onBeforeColIsDisplayed && !hide) o.onBeforeColIsDisplayed.call(null, o, colIndex);
|
|
||||||
|
|
||||||
if(o.tblHasColTag && tf_isIE)
|
|
||||||
{//cols can be hidden only under IE
|
|
||||||
var tbl = (o.showHideColsHeadersTbl) ? o.showHideColsHeadersTbl : o.tbl;
|
|
||||||
var filtersRow = tbl.rows[o.GetFiltersRowIndex()];
|
|
||||||
var a1 = o.GetFiltersByType(o.fltTypeSlc,true);
|
|
||||||
var a2 = o.GetFiltersByType(o.fltTypeMulti,true);
|
|
||||||
var a = a1.concat(a2);
|
|
||||||
|
|
||||||
if(col){
|
|
||||||
col.style.display = (hide) ? 'none' : '';
|
|
||||||
//Selects are displayed even if column is hidden under IE6
|
|
||||||
if(a.tf_Has(colIndex))
|
|
||||||
{
|
|
||||||
if(o.showHideColsHeadersTbl == null){
|
|
||||||
filtersRow.cells[colIndex].style.visibility = (hide) ? 'hidden' : 'visible';
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
var flt = tf_Id(o.fltIds[colIndex]);
|
|
||||||
flt.style.visibility = (hide) ? 'hidden' : 'visible';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(col1){ col1.style.display = (hide) ? 'none' : ''; }
|
|
||||||
} else {
|
|
||||||
function hideCells(tbl)
|
|
||||||
{
|
|
||||||
for(var i=0; i<tbl.rows.length; i++)
|
|
||||||
{
|
|
||||||
var row = tbl.rows[i];
|
|
||||||
var cell = row.cells[colIndex];
|
|
||||||
if(cell){
|
|
||||||
cell.style.display = (hide) ? 'none' : '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
hideCells(o.tbl);
|
|
||||||
if(o.showHideColsHeadersTbl) hideCells(o.showHideColsHeadersTbl);
|
|
||||||
}
|
|
||||||
|
|
||||||
if(hide){
|
|
||||||
if(!o.showHideHiddenCols.tf_Has(colIndex)){ o.showHideHiddenCols.push(colIndex); }
|
|
||||||
} else {
|
|
||||||
var itemIndex = o.showHideHiddenCols.tf_IndexByValue(colIndex, true);
|
|
||||||
if(o.showHideHiddenCols.tf_Has(colIndex)){ o.showHideHiddenCols.splice(itemIndex, 1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
if(o.onAfterColIsHidden && hide){
|
|
||||||
//This event is fired just after a column is displayed for grid_layout compatibility
|
|
||||||
if(o.gridLayout){
|
|
||||||
//Returns the removed column widths
|
|
||||||
function getHiddenWidth(){
|
|
||||||
var ths = o.headTbl.rows[o.showHideColsHeadersIndex].cells;
|
|
||||||
var hW = 0;
|
|
||||||
for(var i=0; i<o.nbCells; i++){
|
|
||||||
if(ths[i].style.display == 'none'){
|
|
||||||
var w = parseInt(ths[i].style.width);
|
|
||||||
ths[i].style.width = 0;
|
|
||||||
hW += w;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return hW;
|
|
||||||
}
|
|
||||||
if(tf_isIE || tf_isIE7){
|
|
||||||
o.tbl.style.width = o.headTbl.clientWidth+'px';
|
|
||||||
} else {
|
|
||||||
o.headTbl.style.width = (parseInt(o.headTbl.style.width) - getHiddenWidth()) + 'px';
|
|
||||||
o.tbl.style.width = o.headTbl.style.width;
|
|
||||||
o.gridColElms[colIndex].style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
o.onAfterColIsHidden.call(null, o, colIndex);
|
|
||||||
}
|
|
||||||
if(o.onAfterColIsDisplayed && !hide){
|
|
||||||
//This event is fired just after a column is displayed for grid_layout compatibility
|
|
||||||
if(o.gridLayout && (!tf_isIE && !tf_isIE7)){
|
|
||||||
o.gridColElms[colIndex].style.display = '';
|
|
||||||
var w = parseInt(o.gridColElms[colIndex].style.width);
|
|
||||||
o.crWColsRow.cells[colIndex].style.width = w+'px';
|
|
||||||
o.headTbl.style.width = (parseInt(o.headTbl.style.width)+w) + 'px';
|
|
||||||
o.tbl.style.width = o.headTbl.style.width;
|
|
||||||
}
|
|
||||||
o.onAfterColIsDisplayed.call(null, o, colIndex);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Public methods */
|
|
||||||
TF.prototype.ShowCol = function(colIndex){
|
|
||||||
if(colIndex == undefined) return;
|
|
||||||
if(!this.IsColHidden(colIndex)) return;
|
|
||||||
if(this.showHideColsManager && this.showHideColsContEl){
|
|
||||||
var itm = tf_Id('col_'+colIndex+'_'+this.id);
|
|
||||||
if(itm){ itm.click(); }
|
|
||||||
} else {
|
|
||||||
this._ShowHideCol(colIndex, false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
TF.prototype.HideCol = function(colIndex){
|
|
||||||
if(colIndex == undefined) return;
|
|
||||||
if(this.IsColHidden(colIndex)) return;
|
|
||||||
if(this.showHideColsManager && this.showHideColsContEl){
|
|
||||||
var itm = tf_Id('col_'+colIndex+'_'+this.id);
|
|
||||||
if(itm){ itm.click(); }
|
|
||||||
} else {
|
|
||||||
this._ShowHideCol(colIndex, true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
TF.prototype.IsColHidden = function(colIndex){
|
|
||||||
if(this.showHideHiddenCols.tf_Has(colIndex)){ return true; }
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
TF.prototype.ToggleCol = function(colIndex){
|
|
||||||
if(colIndex == undefined) return;
|
|
||||||
if(this.IsColHidden(colIndex)){
|
|
||||||
this.ShowCol(colIndex);
|
|
||||||
} else {
|
|
||||||
this.HideCol(colIndex);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
TF.prototype.GetHiddenColIndexes = function(){ return this.showHideHiddenCols; }
|
|
||||||
TF.prototype.RemoveColsVisibility = function()
|
|
||||||
{
|
|
||||||
if(!this.btnShowHideColsEl || !this.showHideColsContEl) return;
|
|
||||||
if(tf_Id(this.showHideColsContElTgtId)){
|
|
||||||
tf_Id(this.showHideColsContElTgtId).innerHTML = '';
|
|
||||||
} else {
|
|
||||||
this.showHideColsContEl.innerHTML = '';
|
|
||||||
this.showHideColsContEl.parentNode.removeChild(this.showHideColsContEl);
|
|
||||||
this.showHideColsContEl = null;
|
|
||||||
}
|
|
||||||
this.btnShowHideColsEl.innerHTML = '';
|
|
||||||
this.btnShowHideColsEl.parentNode.removeChild(this.btnShowHideColsEl);
|
|
||||||
this.btnShowHideColsEl = null;
|
|
||||||
this.showHideColsExtLoaded = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
var tf_GetHeaderText = function(cell){
|
|
||||||
if(cell.hasChildNodes){
|
|
||||||
for( var i=0; i<cell.childNodes.length; i++ ){
|
|
||||||
var n = cell.childNodes[i];
|
|
||||||
if(n.nodeType == 3) return n.nodeValue;
|
|
||||||
else if(n.nodeType == 1){
|
|
||||||
if(n['id'] && n.id.indexOf('popUp')!=-1) continue;
|
|
||||||
else return tf_GetNodeText(n);
|
|
||||||
} else continue;
|
|
||||||
} return '';
|
|
||||||
} else { return ''; }
|
|
||||||
}
|
|
|
@ -0,0 +1,22 @@
|
||||||
|
/*====================================================
|
||||||
|
- HTML Table Filter Generator
|
||||||
|
- Filters Row Visibility Manager Extension v1.1
|
||||||
|
- do not hesitate to edit classes below to
|
||||||
|
change extension appearance
|
||||||
|
=====================================================*/
|
||||||
|
|
||||||
|
/* container */
|
||||||
|
span.expClpFlt{ }
|
||||||
|
|
||||||
|
/* icon */
|
||||||
|
span.expClpFlt img{
|
||||||
|
vertical-align:middle;
|
||||||
|
border:1px solid #ccc;
|
||||||
|
padding:1px 1px 1px 1px;
|
||||||
|
margin:1px 1px 1px 1px;
|
||||||
|
background:#f4f4f4;
|
||||||
|
}
|
||||||
|
span.expClpFlt img:hover{ background:#fff; border:1px solid #666; }
|
||||||
|
|
||||||
|
/* button */
|
||||||
|
.btnExpClpFlt{ margin:0 5px 0 5px; }
|
190
libs/TFExt_FiltersRowVisibility/TFExt_FiltersRowVisibility.js
Normal file
190
libs/TFExt_FiltersRowVisibility/TFExt_FiltersRowVisibility.js
Normal file
|
@ -0,0 +1,190 @@
|
||||||
|
/*------------------------------------------------------------------------
|
||||||
|
- HTML Table Filter Generator
|
||||||
|
- Filters Row Visibility Manager Extension v1.1
|
||||||
|
- By Max Guglielmi (tablefilter.free.fr)
|
||||||
|
- Licensed under the MIT License
|
||||||
|
--------------------------------------------------------------------------
|
||||||
|
Copyright (c) 2009 Max Guglielmi
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of this software and associated documentation files (the
|
||||||
|
"Software"), to deal in the Software without restriction, including
|
||||||
|
without limitation the rights to use, copy, modify, merge, publish,
|
||||||
|
distribute, sublicense, and/or sell copies of the Software, and to
|
||||||
|
permit persons to whom the Software is furnished to do so, subject to
|
||||||
|
the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included
|
||||||
|
in all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||||
|
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||||
|
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
||||||
|
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||||
|
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
|
------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
TF.prototype.SetFiltersRowVisibility = function(extName)
|
||||||
|
{
|
||||||
|
var o = this, f = o.fObj, ext = (extName) ? o.Ext.list[extName] : o.Ext.list['FiltersRowVisibility'];
|
||||||
|
o.filtersRowVis = (f!=undefined && f.filters_row_visibility==undefined) ? true : f.filters_row_visibility;
|
||||||
|
if(!o.filtersRowVis) return;
|
||||||
|
if(o.filtersRowVisEl!=null) return;
|
||||||
|
|
||||||
|
//Extension info
|
||||||
|
o.filtersRowVisExtLoaded = false;
|
||||||
|
o.filtersRowVisExtName = ext.name;
|
||||||
|
o.filtersRowVisDesc = ext.description;
|
||||||
|
|
||||||
|
//Paths, filenames
|
||||||
|
o.filtersRowVisExtPath = (ext.path == undefined)
|
||||||
|
? 'TFExt_FiltersRowVisibility/' : ext.path;
|
||||||
|
o.filtersRowVisStylesheet = 'TFExt_FiltersRowVisibility.css';
|
||||||
|
o.icnExpand = 'icn_exp.png'; //expand icon
|
||||||
|
o.icnCollapse = 'icn_clp.png'; //collapse icon
|
||||||
|
|
||||||
|
//Elements, inner code, texts
|
||||||
|
o.filtersRowVisEl = null; //expand/collapse filters span element
|
||||||
|
o.btnFiltersRowVisEl = null; //expand/collapse filters btn element
|
||||||
|
o.icnExpandFiltersHtml = '<img src="'+o.filtersRowVisExtPath+o.icnExpand+'" alt="Expand filters" >';
|
||||||
|
o.icnCollapseFiltersHtml = '<img src="'+o.filtersRowVisExtPath+o.icnCollapse+'" alt="Collapse filters" >';
|
||||||
|
o.filtersRowVisDefaultText = 'Expand/Collapse Filters';
|
||||||
|
|
||||||
|
//id of container element
|
||||||
|
o.filtersRowVisTgtId = f!=undefined && f.filters_row_visibility_target_id!=undefined
|
||||||
|
? f.filters_row_visibility_target_id : null;
|
||||||
|
//enables/disables expand/collapse icon
|
||||||
|
o.filtersRowVisIcon = f!=undefined && f.filters_row_visibility_icon!=undefined
|
||||||
|
? f.filters_row_visibility_icon : true;
|
||||||
|
//defines expand/collapse filters text
|
||||||
|
o.btnFiltersRowVisText = f!=undefined && f.btn_filters_row_visibility_text!=undefined
|
||||||
|
? (o.filtersRowVisIcon ? o.icnCollapseFiltersHtml + f.btn_filters_row_visibility_text :
|
||||||
|
f.btn_filters_row_visibility_text) :
|
||||||
|
(o.filtersRowVisIcon ? o.icnCollapseFiltersHtml : o.filtersRowVisDefaultText);
|
||||||
|
o.btnFiltersRowVisExpText = f!=undefined && f.btn_filters_row_visibility_text!=undefined
|
||||||
|
? (o.filtersRowVisIcon ? o.icnExpandFiltersHtml + f.btn_filters_row_visibility_text :
|
||||||
|
f.btn_filters_row_visibility_text) :
|
||||||
|
(o.filtersRowVisIcon) ? o.icnExpandFiltersHtml : o.filtersRowVisDefaultText;
|
||||||
|
|
||||||
|
//defines expand/collapse filters button innerHtml
|
||||||
|
o.btnFiltersRowVisHtml = f!=undefined && f.btn_filters_row_visibility_html!=undefined
|
||||||
|
? f.btn_filters_row_visibility_html : null;
|
||||||
|
//defines css class for expand/collapse filters button
|
||||||
|
o.btnFiltersRowVisClass = f!=undefined && f.btn_filters_row_visibility_css_class!=undefined
|
||||||
|
? f.btn_filters_row_visibility_css_class :'btnExpClpFlt';
|
||||||
|
//defines css class span containing expand/collapse filters
|
||||||
|
o.filtersRowVisClass = f!=undefined && f.filters_row_visibility_css_class!=undefined
|
||||||
|
? f.filters_row_visibility_css_class : 'expClpFlt';
|
||||||
|
//only if external headers
|
||||||
|
o.filtersRowVisFiltersTbl = f!=undefined && f.filters_row_visibility_filters_table!=undefined
|
||||||
|
? tf_Id(f.filters_row_visibility_filters_table) : null;
|
||||||
|
//only if external headers
|
||||||
|
o.filtersRowVisFiltersIndex = f!=undefined && f.filters_row_visibility_filters_index!=undefined
|
||||||
|
? f.filters_row_visibility_filters_index : 1;
|
||||||
|
|
||||||
|
o.filtersRowVisAtStart = f!=undefined && f.filters_row_visibility_at_start!=undefined
|
||||||
|
? f.filters_row_visibility_at_start : true;
|
||||||
|
|
||||||
|
//prefixes
|
||||||
|
o.prfxFiltersRowVisSpan = 'fltsVis_'; //span containing expand/collapse filters button
|
||||||
|
|
||||||
|
/*** Extension events ***/
|
||||||
|
//calls function before filters row is shown
|
||||||
|
o.onBeforeShowFilters = f!=undefined && tf_isFn(f.on_before_filters_row_is_displayed)
|
||||||
|
? f.on_before_filters_row_is_displayed : null;
|
||||||
|
//calls function after filters row is shown
|
||||||
|
o.onAfterShowFilters = f!=undefined && tf_isFn(f.on_after_filters_row_is_displayed)
|
||||||
|
? f.on_after_filters_row_is_displayed : null;
|
||||||
|
//calls function before filters row is hidden
|
||||||
|
o.onBeforeHideFilters = f!=undefined && tf_isFn(f.on_before_filters_row_is_hidden)
|
||||||
|
? f.on_before_filters_row_is_hidden : null;
|
||||||
|
//calls function after filters row is hidden
|
||||||
|
o.onAfterHideFilters = f!=undefined && tf_isFn(f.on_after_filters_row_is_hidden)
|
||||||
|
? f.on_after_filters_row_is_hidden : null;
|
||||||
|
/*** ***/
|
||||||
|
|
||||||
|
//Extension event definition
|
||||||
|
o.Evt.name.filtersrowvisibility = 'DisplayFiltersRow'; //event name for TF event manager
|
||||||
|
o.msgDisplayFiltersRow = 'Show/Hide filters row'; //event status message
|
||||||
|
o.Evt._DisplayFiltersRow = function(){ o.DisplayFiltersRow(); }; //event
|
||||||
|
|
||||||
|
//Loads extension stylesheet
|
||||||
|
o.IncludeFile(ext.name+'Style', o.filtersRowVisExtPath + o.filtersRowVisStylesheet, null, 'link');
|
||||||
|
|
||||||
|
//Sets button
|
||||||
|
o.SetFiltersRowVisBtn();
|
||||||
|
|
||||||
|
o.filtersRowVisExtLoaded = true;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
TF.prototype.SetFiltersRowVisBtn = function()
|
||||||
|
{
|
||||||
|
if(!this.hasGrid && !this.isFirstLoad) return;
|
||||||
|
if( this.filtersRowVisEl!=null ) return;
|
||||||
|
var span = tf_CreateElm('span',['id',this.prfxFiltersRowVisSpan+this.id]);
|
||||||
|
span.className = this.filtersRowVisClass;
|
||||||
|
|
||||||
|
//Container element (rdiv or custom element)
|
||||||
|
if(this.filtersRowVisTgtId==null) this.SetTopDiv();
|
||||||
|
var targetEl = ( this.filtersRowVisTgtId==null ) ? this.rDiv : tf_Id( this.filtersRowVisTgtId );
|
||||||
|
|
||||||
|
if(this.filtersRowVisTgtId==null)
|
||||||
|
targetEl.firstChild.parentNode.insertBefore(span,targetEl.firstChild);
|
||||||
|
else
|
||||||
|
targetEl.appendChild(span);
|
||||||
|
|
||||||
|
if(this.btnFiltersRowVisHtml==null)
|
||||||
|
{ //Default link
|
||||||
|
var btn = tf_CreateElm( 'a', ['href','javascript:;'] );
|
||||||
|
btn.className = this.btnFiltersRowVisClass;
|
||||||
|
btn.title = this.filtersRowVisDesc;
|
||||||
|
btn.innerHTML = this.btnFiltersRowVisText;
|
||||||
|
span.appendChild(btn);
|
||||||
|
btn.onclick = this.Evt._DisplayFiltersRow;
|
||||||
|
} else { //Custom html
|
||||||
|
span.innerHTML = this.btnFiltersRowVisHtml;
|
||||||
|
var showHideFltsEl = span.firstChild;
|
||||||
|
showHideFltsEl.onclick = this.Evt._DisplayFiltersRow;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.filtersRowVisEl = span;
|
||||||
|
this.btnFiltersRowVisEl = this.filtersRowVisEl.firstChild;
|
||||||
|
|
||||||
|
if(!this.filtersRowVisAtStart) this._DisplayFiltersRow(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
TF.prototype.DisplayFiltersRow = function()
|
||||||
|
{
|
||||||
|
this.EvtManager(this.Evt.name.filtersrowvisibility);
|
||||||
|
}
|
||||||
|
|
||||||
|
TF.prototype._DisplayFiltersRow = function(o)
|
||||||
|
{
|
||||||
|
var tbl = (o.filtersRowVisFiltersTbl) ? o.filtersRowVisFiltersTbl : o.tbl;
|
||||||
|
var fltIndex = (o.filtersRowVisFiltersTbl)
|
||||||
|
? o.filtersRowVisFiltersIndex : o.GetFiltersRowIndex();
|
||||||
|
var fltRow = tbl.rows[fltIndex];
|
||||||
|
var fltRowDisplay = fltRow.style.display;
|
||||||
|
|
||||||
|
if(o.onBeforeShowFilters && fltRowDisplay!='') o.onBeforeShowFilters.call(null,o);
|
||||||
|
if(o.onBeforeHideFilters && fltRowDisplay=='') o.onBeforeHideFilters.call(null,o);
|
||||||
|
|
||||||
|
fltRow.style.display = (fltRowDisplay=='') ? 'none' : '';
|
||||||
|
if(o.filtersRowVisIcon && o.btnFiltersRowVisHtml==null)
|
||||||
|
o.btnFiltersRowVisEl.innerHTML = (fltRowDisplay=='')
|
||||||
|
? o.btnFiltersRowVisExpText : o.btnFiltersRowVisText;
|
||||||
|
|
||||||
|
if(o.onAfterShowFilters && fltRowDisplay!='') o.onAfterShowFilters.call(null,o);
|
||||||
|
if(o.onAfterHideFilters && fltRowDisplay=='') o.onAfterHideFilters.call(null,o);
|
||||||
|
}
|
||||||
|
|
||||||
|
TF.prototype.RemoveFiltersRowVisibility = function()
|
||||||
|
{
|
||||||
|
if(this.filtersRowVisEl==null) return;
|
||||||
|
this.filtersRowVisEl.parentNode.removeChild(this.filtersRowVisEl);
|
||||||
|
this.filtersRowVisEl = null;
|
||||||
|
this.btnFiltersRowVisEl = null;
|
||||||
|
}
|
BIN
libs/TFExt_FiltersRowVisibility/icn_clp.png
Normal file
BIN
libs/TFExt_FiltersRowVisibility/icn_clp.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 441 B |
BIN
libs/TFExt_FiltersRowVisibility/icn_exp.png
Normal file
BIN
libs/TFExt_FiltersRowVisibility/icn_exp.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 469 B |
|
@ -9,18 +9,16 @@ export default class ColsVisibility{
|
||||||
/**
|
/**
|
||||||
* Columns Visibility extension
|
* Columns Visibility extension
|
||||||
* @param {Object} tf TableFilter instance
|
* @param {Object} tf TableFilter instance
|
||||||
|
* @param {Object} f Config
|
||||||
*/
|
*/
|
||||||
constructor(tf, ext={
|
constructor(tf, f){
|
||||||
name:'colsVisibility',
|
|
||||||
description:'Columns visibility manager'}){
|
|
||||||
|
|
||||||
// Configuration object
|
// Configuration object
|
||||||
var f = ext;
|
|
||||||
var cfg = tf.config();
|
var cfg = tf.config();
|
||||||
|
|
||||||
this.initialized = false;
|
this.initialized = false;
|
||||||
this.extName = f.name;
|
this.name = f.name;
|
||||||
this.extDesc = f.description;
|
this.desc = f.description || 'Columns visibility manager';
|
||||||
|
|
||||||
//show/hide cols span element
|
//show/hide cols span element
|
||||||
this.spanEl = null;
|
this.spanEl = null;
|
||||||
|
@ -56,7 +54,7 @@ export default class ColsVisibility{
|
||||||
//defines css class for close button
|
//defines css class for close button
|
||||||
this.btnCloseCssClass = f.btn_close_css_class || this.btnCssClass;
|
this.btnCloseCssClass = f.btn_close_css_class || this.btnCssClass;
|
||||||
|
|
||||||
this.path = f.path || tf.extensionsPath + 'colsVisibility/';
|
// this.path = f.path || tf.extensionsPath + 'colsVisibility/';
|
||||||
this.stylesheet = f.stylesheet || 'colsVisibility.css';
|
this.stylesheet = f.stylesheet || 'colsVisibility.css';
|
||||||
//span containing show/hide cols button
|
//span containing show/hide cols button
|
||||||
this.prfx = 'colVis_';
|
this.prfx = 'colVis_';
|
||||||
|
@ -100,16 +98,16 @@ export default class ColsVisibility{
|
||||||
this.onAfterClose = Types.isFn(f.on_after_close) ?
|
this.onAfterClose = Types.isFn(f.on_after_close) ?
|
||||||
f.on_after_close : null;
|
f.on_after_close : null;
|
||||||
|
|
||||||
//calls function before col is hidden
|
//callback before col is hidden
|
||||||
this.onBeforeColHidden = Types.isFn(f.on_before_col_hidden) ?
|
this.onBeforeColHidden = Types.isFn(f.on_before_col_hidden) ?
|
||||||
f.on_before_col_hidden : null;
|
f.on_before_col_hidden : null;
|
||||||
//calls function after col is hidden
|
//callback after col is hidden
|
||||||
this.onAfterColHidden = Types.isFn(f.on_after_col_hidden) ?
|
this.onAfterColHidden = Types.isFn(f.on_after_col_hidden) ?
|
||||||
f.on_after_col_hidden : null;
|
f.on_after_col_hidden : null;
|
||||||
//calls function before col is displayed
|
//callback before col is displayed
|
||||||
this.onBeforeColDisplayed = Types.isFn(f.on_before_col_displayed) ?
|
this.onBeforeColDisplayed = Types.isFn(f.on_before_col_displayed) ?
|
||||||
f.on_before_col_displayed : null;
|
f.on_before_col_displayed : null;
|
||||||
//calls function after col is displayed
|
//callback after col is displayed
|
||||||
this.onAfterColDisplayed = Types.isFn(f.on_after_col_displayed) ?
|
this.onAfterColDisplayed = Types.isFn(f.on_after_col_displayed) ?
|
||||||
f.on_after_col_displayed : null;
|
f.on_after_col_displayed : null;
|
||||||
|
|
||||||
|
@ -213,7 +211,7 @@ export default class ColsVisibility{
|
||||||
if(!this.btnHtml){
|
if(!this.btnHtml){
|
||||||
var btn = Dom.create('a', ['href','javascript:;']);
|
var btn = Dom.create('a', ['href','javascript:;']);
|
||||||
btn.className = this.btnCssClass;
|
btn.className = this.btnCssClass;
|
||||||
btn.title = this.extDesc;
|
btn.title = this.desc;
|
||||||
|
|
||||||
btn.innerHTML = this.btnText;
|
btn.innerHTML = this.btnText;
|
||||||
span.appendChild(btn);
|
span.appendChild(btn);
|
||||||
|
@ -257,7 +255,7 @@ export default class ColsVisibility{
|
||||||
container.appendChild(extNameLabel);
|
container.appendChild(extNameLabel);
|
||||||
|
|
||||||
//Headers list
|
//Headers list
|
||||||
var ul = Dom.create('ul' ,['id', 'ul'+this.extName+'_'+tf.id]);
|
var ul = Dom.create('ul' ,['id', 'ul'+this.name+'_'+tf.id]);
|
||||||
ul.className = this.listCssClass;
|
ul.className = this.listCssClass;
|
||||||
|
|
||||||
var tbl = this.headersTbl ? this.headersTbl : tf.tbl;
|
var tbl = this.headersTbl ? this.headersTbl : tf.tbl;
|
||||||
|
@ -490,7 +488,7 @@ export default class ColsVisibility{
|
||||||
* Remove the columns manager
|
* Remove the columns manager
|
||||||
*/
|
*/
|
||||||
destroy(){
|
destroy(){
|
||||||
if(!this.btnEl || !this.contEl){
|
if(!this.btnEl && !this.contEl){
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if(Dom.id(this.contElTgtId)){
|
if(Dom.id(this.contElTgtId)){
|
174
src/extensions/filtersVisibility/filtersVisibility.js
Normal file
174
src/extensions/filtersVisibility/filtersVisibility.js
Normal file
|
@ -0,0 +1,174 @@
|
||||||
|
import Dom from '../../dom';
|
||||||
|
import Types from '../../types';
|
||||||
|
import Event from '../../event';
|
||||||
|
|
||||||
|
export default class FiltersVisibility{
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Filters Row Visibility extension
|
||||||
|
* @param {Object} tf TableFilter instance
|
||||||
|
* @param {Object} f Config
|
||||||
|
*/
|
||||||
|
constructor(tf, f){
|
||||||
|
|
||||||
|
this.initialized = false;
|
||||||
|
this.name = f.name;
|
||||||
|
this.desc = f.description || 'Filters row visibility manager';
|
||||||
|
|
||||||
|
// Path and image filenames
|
||||||
|
this.path = f.path || tf.basePath;
|
||||||
|
this.stylesheet = f.stylesheet || 'filtersVisibility.css';
|
||||||
|
this.icnExpand = f.expand_icon_name || 'icn_exp.png';
|
||||||
|
this.icnCollapse = f.collapse_icon_name || 'icn_clp.png';
|
||||||
|
|
||||||
|
//expand/collapse filters span element
|
||||||
|
this.contEl = null;
|
||||||
|
//expand/collapse filters btn element
|
||||||
|
this.btnEl = null;
|
||||||
|
|
||||||
|
this.icnExpandHtml = '<img src="'+ this.path + this.icnExpand +
|
||||||
|
'" alt="Expand filters" >';
|
||||||
|
this.icnCollapseHtml = '<img src="'+ this.path + this.icnCollapse +
|
||||||
|
'" alt="Collapse filters" >';
|
||||||
|
this.defaultText = 'Expand/Collapse filters';
|
||||||
|
|
||||||
|
//id of container element
|
||||||
|
this.targetId = f.target_id || null;
|
||||||
|
//enables/disables expand/collapse icon
|
||||||
|
this.enableIcon = f.enable_icon===false ? false : true;
|
||||||
|
this.btnText = f.btn_text || '';
|
||||||
|
|
||||||
|
//defines expand/collapse filters text
|
||||||
|
this.collapseBtnHtml = this.enableIcon ?
|
||||||
|
this.icnCollapseHtml + this.btnText :
|
||||||
|
this.btnText || this.defaultText;
|
||||||
|
this.expandBtnHtml = this.enableIcon ?
|
||||||
|
this.icnExpandHtml + this.btnText :
|
||||||
|
this.btnText || this.defaultText;
|
||||||
|
|
||||||
|
//defines expand/collapse filters button innerHtml
|
||||||
|
this.btnHtml = f.btn_html || null;
|
||||||
|
//defines css class for expand/collapse filters button
|
||||||
|
this.btnCssClass = f.btn_css_class || 'btnExpClpFlt';
|
||||||
|
//defines css class span containing expand/collapse filters
|
||||||
|
this.contCssClass = f.cont_css_class || 'expClpFlt';
|
||||||
|
this.filtersRowIndex = !Types.isUndef(f.filters_row_index) ?
|
||||||
|
f.filters_row_index : tf.getFiltersRowIndex();
|
||||||
|
|
||||||
|
this.visibleAtStart = !Types.isUndef(f.visible_at_start) ?
|
||||||
|
Boolean(f.visible_at_start) : true;
|
||||||
|
|
||||||
|
// Prefix
|
||||||
|
this.prfx = 'fltsVis_';
|
||||||
|
|
||||||
|
//callback before filters row is shown
|
||||||
|
this.onBeforeShow = Types.isFn(f.on_before_show) ?
|
||||||
|
f.on_before_show : null;
|
||||||
|
//callback after filters row is shown
|
||||||
|
this.onAfterShow = Types.isFn(f.on_after_show) ?
|
||||||
|
f.on_after_show : null;
|
||||||
|
//callback before filters row is hidden
|
||||||
|
this.onBeforeHide = Types.isFn(f.on_before_hide) ?
|
||||||
|
f.on_before_hide : null;
|
||||||
|
//callback after filters row is hidden
|
||||||
|
this.onAfterHide = Types.isFn(f.on_after_hide) ? f.on_after_hide : null;
|
||||||
|
|
||||||
|
//Loads extension stylesheet
|
||||||
|
tf.import(
|
||||||
|
f.name+'Style', tf.basePath + this.stylesheet, null, 'link');
|
||||||
|
|
||||||
|
this.tf = tf;
|
||||||
|
}
|
||||||
|
|
||||||
|
init(){
|
||||||
|
if(this.initialized){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.buildUI();
|
||||||
|
this.initialized = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
buildUI(){
|
||||||
|
let tf = this.tf;
|
||||||
|
let span = Dom.create('span',['id', this.prfx+tf.id]);
|
||||||
|
span.className = this.contCssClass;
|
||||||
|
|
||||||
|
//Container element (rdiv or custom element)
|
||||||
|
if(this.targetId){
|
||||||
|
tf.setToolbar();
|
||||||
|
}
|
||||||
|
let targetEl = !this.targetId ? tf.rDiv : Dom.id(this.targetId);
|
||||||
|
|
||||||
|
if(!this.targetId){
|
||||||
|
let firstChild = targetEl.firstChild;
|
||||||
|
firstChild.parentNode.insertBefore(span, firstChild);
|
||||||
|
} else {
|
||||||
|
targetEl.appendChild(span);
|
||||||
|
}
|
||||||
|
|
||||||
|
let btn;
|
||||||
|
if(!this.btnHtml){
|
||||||
|
btn = Dom.create('a', ['href', 'javascript:void(0);']);
|
||||||
|
btn.className = this.btnCssClass;
|
||||||
|
btn.title = this.btnText || this.defaultText;
|
||||||
|
btn.innerHTML = this.collapseBtnHtml;
|
||||||
|
span.appendChild(btn);
|
||||||
|
Event.add(btn, 'click', ()=> this.toggle());
|
||||||
|
} else { //Custom html
|
||||||
|
span.innerHTML = this.btnHtml;
|
||||||
|
btn = span.firstChild;
|
||||||
|
Event.add(btn, 'click', ()=> this.toggle());
|
||||||
|
}
|
||||||
|
|
||||||
|
this.contEl = span;
|
||||||
|
this.btnEl = btn;
|
||||||
|
|
||||||
|
if(!this.visibleAtStart){
|
||||||
|
this.toggle();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle(){
|
||||||
|
let tf = this.tf;
|
||||||
|
let tbl = tf.gridLayout? tf.Cpt.gridLayout.headTbl : tf.tbl;
|
||||||
|
let fltRow = tbl.rows[this.filtersRowIndex];
|
||||||
|
let fltRowDisplay = fltRow.style.display;
|
||||||
|
|
||||||
|
if(this.onBeforeShow && fltRowDisplay!=''){
|
||||||
|
this.onBeforeShow.call(this, this);
|
||||||
|
}
|
||||||
|
if(this.onBeforeHide && fltRowDisplay===''){
|
||||||
|
this.onBeforeHide.call(null, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
fltRow.style.display = fltRowDisplay==='' ? 'none' : '';
|
||||||
|
if(this.enableIcon && !this.btnHtml){
|
||||||
|
this.btnEl.innerHTML = fltRowDisplay==='' ?
|
||||||
|
this.expandBtnHtml : this.collapseBtnHtml;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.onAfterShow && fltRowDisplay!=''){
|
||||||
|
this.onAfterShow.call(null, this);
|
||||||
|
}
|
||||||
|
if(this.onAfterHide && fltRowDisplay===''){
|
||||||
|
this.onAfterHide.call(null, this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy(){
|
||||||
|
if(!this.btnEl && !this.contEl){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.btnEl.innerHTML = '';
|
||||||
|
this.btnEl.parentNode.removeChild(this.btnEl);
|
||||||
|
this.btnEl = null;
|
||||||
|
|
||||||
|
this.contEl.innerHTML = '';
|
||||||
|
this.contEl.parentNode.removeChild(this.contEl);
|
||||||
|
this.contEl = null;
|
||||||
|
this.initialized = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -198,7 +198,7 @@ export class GridLayout{
|
||||||
// this.headTbl.style.width = tbl.style.width;
|
// this.headTbl.style.width = tbl.style.width;
|
||||||
|
|
||||||
//content table without headers needs col widths to be reset
|
//content table without headers needs col widths to be reset
|
||||||
tf.setColWidths();
|
tf.setColWidths(0, this.headTbl);
|
||||||
|
|
||||||
//Headers container width
|
//Headers container width
|
||||||
this.headTblCont.style.width = this.tblCont.clientWidth+'px';
|
this.headTblCont.style.width = this.tblCont.clientWidth+'px';
|
||||||
|
@ -271,26 +271,24 @@ export class GridLayout{
|
||||||
|
|
||||||
//Col elements are enough to keep column widths after sorting and
|
//Col elements are enough to keep column widths after sorting and
|
||||||
//filtering
|
//filtering
|
||||||
var createColTags = function(o){
|
var createColTags = function(){
|
||||||
if(!o){
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
for(var k=(tf.nbCells-1); k>=0; k--){
|
for(var k=(tf.nbCells-1); k>=0; k--){
|
||||||
var col = Dom.create('col', ['id', tf.id+'_col_'+k]);
|
var col = Dom.create('col', ['id', tf.id+'_col_'+k]);
|
||||||
tbl.firstChild.parentNode.insertBefore(col, tbl.firstChild);
|
tbl.insertBefore(col, tbl.firstChild);
|
||||||
col.style.width = tf.colWidths[k];
|
col.style.width = tf.colWidths[k];
|
||||||
o.gridColElms[k] = col;
|
this.gridColElms[k] = col;
|
||||||
}
|
}
|
||||||
o.tblHasColTag = true;
|
this.tblHasColTag = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
if(!this.tblHasColTag){
|
if(!this.tblHasColTag){
|
||||||
createColTags(this);
|
createColTags.call(this);
|
||||||
} else {
|
} else {
|
||||||
var cols = Dom.tag(tbl, 'col');
|
var cols = Dom.tag(tbl, 'col');
|
||||||
for(var ii=0; ii<tf.nbCells; ii++){
|
for(var ii=0; ii<tf.nbCells; ii++){
|
||||||
cols[ii].setAttribute('id', tf.id+'_col_'+ii);
|
cols[ii].setAttribute('id', tf.id+'_col_'+ii);
|
||||||
cols[ii].style.width = tf.colWidths[ii];
|
cols[ii].style.width = tf.colWidths[ii];
|
||||||
o.gridColElms.push(cols[ii]);
|
this.gridColElms.push(cols[ii]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1222,21 +1222,7 @@ export class TableFilter{
|
||||||
}
|
}
|
||||||
let rows = this.tbl.rows,
|
let rows = this.tbl.rows,
|
||||||
Cpt = this.Cpt;
|
Cpt = this.Cpt;
|
||||||
// if(this.paging){
|
|
||||||
// Cpt.paging.destroy();
|
|
||||||
// }
|
|
||||||
// if(this.statusBar){
|
|
||||||
// Cpt.statusBar.destroy();
|
|
||||||
// }
|
|
||||||
// if(this.rowsCounter){
|
|
||||||
// Cpt.rowsCounter.destroy();
|
|
||||||
// }
|
|
||||||
// if(this.btnReset){
|
|
||||||
// Cpt.clearButton.destroy();
|
|
||||||
// }
|
|
||||||
// if(this.helpInstructions){
|
|
||||||
// Cpt.help.destroy();
|
|
||||||
// }
|
|
||||||
if(this.isExternalFlt && !this.popUpFilters){
|
if(this.isExternalFlt && !this.popUpFilters){
|
||||||
this.removeExternalFlts();
|
this.removeExternalFlts();
|
||||||
}
|
}
|
||||||
|
@ -1246,12 +1232,6 @@ export class TableFilter{
|
||||||
if(this.highlightKeywords){
|
if(this.highlightKeywords){
|
||||||
Cpt.highlightKeyword.unhighlightAll();
|
Cpt.highlightKeyword.unhighlightAll();
|
||||||
}
|
}
|
||||||
// if(this.loader){
|
|
||||||
// Cpt.loader.destroy();
|
|
||||||
// }
|
|
||||||
// if(this.popUpFilters){
|
|
||||||
// Cpt.popupFilter.destroy();
|
|
||||||
// }
|
|
||||||
if(this.markActiveColumns){
|
if(this.markActiveColumns){
|
||||||
this.clearActiveColumns();
|
this.clearActiveColumns();
|
||||||
}
|
}
|
||||||
|
@ -1288,9 +1268,8 @@ export class TableFilter{
|
||||||
this.fltGridEl = rows[this.filtersRowIndex];
|
this.fltGridEl = rows[this.filtersRowIndex];
|
||||||
this.tbl.deleteRow(this.filtersRowIndex);
|
this.tbl.deleteRow(this.filtersRowIndex);
|
||||||
}
|
}
|
||||||
// if(this.gridLayout){
|
|
||||||
// Cpt.gridLayout.destroy();
|
// Destroy extensions
|
||||||
// }
|
|
||||||
Object.keys(Cpt).forEach(function(key) {
|
Object.keys(Cpt).forEach(function(key) {
|
||||||
var feature = Cpt[key];
|
var feature = Cpt[key];
|
||||||
if(feature && Types.isFn(feature.destroy)){
|
if(feature && Types.isFn(feature.destroy)){
|
||||||
|
@ -1375,6 +1354,14 @@ export class TableFilter{
|
||||||
}
|
}
|
||||||
this.infDiv.parentNode.removeChild(this.infDiv);
|
this.infDiv.parentNode.removeChild(this.infDiv);
|
||||||
this.infDiv = null;
|
this.infDiv = null;
|
||||||
|
|
||||||
|
let tbl = this.tbl;
|
||||||
|
let captions = Dom.tag(tbl, 'caption');
|
||||||
|
if(captions.length > 0){
|
||||||
|
[].forEach.call(captions, function(elm) {
|
||||||
|
tbl.removeChild(elm);
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -2422,8 +2409,8 @@ export class TableFilter{
|
||||||
let sarg = searcharg.split(' '+this.orOperator+' ');
|
let sarg = searcharg.split(' '+this.orOperator+' ');
|
||||||
let lisNb = Dom.tag(slc,'li').length;
|
let lisNb = Dom.tag(slc,'li').length;
|
||||||
|
|
||||||
slc.setAttribute('value','');
|
slc.setAttribute('value', '');
|
||||||
slc.setAttribute('indexes','');
|
slc.setAttribute('indexes', '');
|
||||||
|
|
||||||
for(let k=0; k<lisNb; k++){
|
for(let k=0; k<lisNb; k++){
|
||||||
let li = Dom.tag(slc,'li')[k],
|
let li = Dom.tag(slc,'li')[k],
|
||||||
|
@ -2446,18 +2433,21 @@ export class TableFilter{
|
||||||
/**
|
/**
|
||||||
* Set them columns' widths as per configuration
|
* Set them columns' widths as per configuration
|
||||||
* @param {Number} rowIndex Optional row index to apply the widths to
|
* @param {Number} rowIndex Optional row index to apply the widths to
|
||||||
|
* @param {Element} tbl DOM element
|
||||||
*/
|
*/
|
||||||
setColWidths(rowIndex){
|
setColWidths(rowIndex, tbl){
|
||||||
if(!this.fltGrid || !this.hasColWidths){
|
if(!this.fltGrid || !this.hasColWidths){
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
tbl = tbl || this.tbl;
|
||||||
let rIndex;
|
let rIndex;
|
||||||
if(rowIndex===undefined){
|
if(rowIndex===undefined){
|
||||||
rIndex = this.tbl.rows[0].style.display!='none' ? 0 : 1;
|
rIndex = tbl.rows[0].style.display!='none' ? 0 : 1;
|
||||||
} else{
|
} else{
|
||||||
rIndex = rowIndex;
|
rIndex = rowIndex;
|
||||||
}
|
}
|
||||||
setWidths.call(this, this.tbl.rows[rIndex]);
|
|
||||||
|
setWidths.call(this, tbl.rows[rIndex]);
|
||||||
|
|
||||||
function setWidths(row){
|
function setWidths(row){
|
||||||
/*jshint validthis:true */
|
/*jshint validthis:true */
|
||||||
|
@ -2467,10 +2457,23 @@ export class TableFilter{
|
||||||
throw new Error('Columns number mismatch!');
|
throw new Error('Columns number mismatch!');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let colTags = Dom.tag(tbl, 'col');
|
||||||
|
let tblHasColTag = colTags.length > 0;
|
||||||
|
let frag = !tblHasColTag ? doc.createDocumentFragment() : null;
|
||||||
for(let k=0; k<nbCols; k++){
|
for(let k=0; k<nbCols; k++){
|
||||||
row.cells[k].style.width = colWidths[k];
|
// row.cells[k].style.width = colWidths[k];
|
||||||
|
let col;
|
||||||
|
if(tblHasColTag){
|
||||||
|
col = colTags[k];
|
||||||
|
} else {
|
||||||
|
col = Dom.create('col', ['id', this.id+'_col_'+k]);
|
||||||
|
frag.appendChild(col);
|
||||||
|
}
|
||||||
|
col.style.width = colWidths[k];
|
||||||
|
}
|
||||||
|
if(!tblHasColTag){
|
||||||
|
tbl.insertBefore(frag, tbl.firstChild);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
26
static/style/filtersVisibility.css
Normal file
26
static/style/filtersVisibility.css
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
/*====================================================
|
||||||
|
- HTML Table Filter Generator
|
||||||
|
- Filters Row Visibility Manager Extension v1.1
|
||||||
|
- do not hesitate to edit classes below to
|
||||||
|
change extension appearance
|
||||||
|
=====================================================*/
|
||||||
|
|
||||||
|
/* container */
|
||||||
|
span.expClpFlt{ }
|
||||||
|
|
||||||
|
/* icon */
|
||||||
|
span.expClpFlt img{
|
||||||
|
vertical-align:middle;
|
||||||
|
border:0;
|
||||||
|
/*border:1px solid #ccc;*/
|
||||||
|
padding:1px 1px 1px 1px;
|
||||||
|
margin:1px 1px 1px 1px;
|
||||||
|
/*background:#f4f4f4;*/
|
||||||
|
}
|
||||||
|
span.expClpFlt img:hover{
|
||||||
|
background:#fff;
|
||||||
|
/*border:1px solid #666; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* button */
|
||||||
|
.btnExpClpFlt{ margin:0 5px 0 5px; }
|
BIN
static/style/icn_clp.png
Normal file
BIN
static/style/icn_clp.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 441 B |
BIN
static/style/icn_exp.png
Normal file
BIN
static/style/icn_exp.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 469 B |
|
@ -4,7 +4,7 @@ var Clean = require('clean-webpack-plugin');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
build: {
|
build: {
|
||||||
entry: path.join(__dirname, '/src-es6/tablefilter.js'),
|
entry: path.join(__dirname, '/src/tablefilter.js'),
|
||||||
output: {
|
output: {
|
||||||
publicPath: '/build/tablefilter/',
|
publicPath: '/build/tablefilter/',
|
||||||
path: path.join(__dirname, '/build/tablefilter'),
|
path: path.join(__dirname, '/build/tablefilter'),
|
||||||
|
@ -23,7 +23,7 @@ module.exports = {
|
||||||
// exprContextRegExp: /$^/,
|
// exprContextRegExp: /$^/,
|
||||||
// exprContextCritical: true,
|
// exprContextCritical: true,
|
||||||
loaders: [{
|
loaders: [{
|
||||||
test: path.join(__dirname, 'src-es6'),
|
test: path.join(__dirname, 'src'),
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
query: {
|
query: {
|
||||||
compact: false
|
compact: false
|
||||||
|
@ -45,9 +45,9 @@ module.exports = {
|
||||||
debug: true
|
debug: true
|
||||||
},
|
},
|
||||||
dist: {
|
dist: {
|
||||||
entry: path.join(__dirname, '/src-es6/tablefilter.js'),
|
entry: path.join(__dirname, '/src/tablefilter.js'),
|
||||||
// entry: {
|
// entry: {
|
||||||
// tablefilter: __dirname + '/src-es6/tablefilter.js',
|
// tablefilter: __dirname + '/src/tablefilter.js',
|
||||||
// sortabletable: __dirname + '/libs/sortabletable.js'
|
// sortabletable: __dirname + '/libs/sortabletable.js'
|
||||||
// },
|
// },
|
||||||
output: {
|
output: {
|
||||||
|
@ -74,7 +74,7 @@ module.exports = {
|
||||||
// exprContextRegExp: /$^/,
|
// exprContextRegExp: /$^/,
|
||||||
// exprContextCritical: true,
|
// exprContextCritical: true,
|
||||||
loaders: [{
|
loaders: [{
|
||||||
test: path.join(__dirname, 'src-es6'),
|
test: path.join(__dirname, 'src'),
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
query: {
|
query: {
|
||||||
compact: false
|
compact: false
|
||||||
|
|
Loading…
Reference in a new issue