4
.gitignore
vendored
|
@ -1,4 +1,6 @@
|
||||||
# Dependency directory
|
|
||||||
node_modules
|
node_modules
|
||||||
npm-debug.log
|
npm-debug.log
|
||||||
|
build
|
||||||
|
*.js.map
|
||||||
.codio
|
.codio
|
||||||
|
.settings
|
||||||
|
|
31
.jshintrc
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
{
|
||||||
|
// ["xxx"] is better written in dot notation
|
||||||
|
"-W069": true,
|
||||||
|
// Script URL
|
||||||
|
"-W107": true,
|
||||||
|
// Eval can be harmful
|
||||||
|
"-W061": true,
|
||||||
|
"-W041": true,
|
||||||
|
// Wrap the /regexp/ literal in parens to disambiguate the slash operator
|
||||||
|
"-W092": true,
|
||||||
|
// Reserved words
|
||||||
|
"-W024": true,
|
||||||
|
"curly": true,
|
||||||
|
"indent": 4,
|
||||||
|
//"eqeqeq": true,
|
||||||
|
"es3": true,
|
||||||
|
"esnext": true,
|
||||||
|
"unused": true,
|
||||||
|
"maxlen" : 80,
|
||||||
|
"globals": {
|
||||||
|
"Object": true,
|
||||||
|
"module": true,
|
||||||
|
"require": true,
|
||||||
|
"define": true,
|
||||||
|
"window": true,
|
||||||
|
"document": true,
|
||||||
|
"escape": true,
|
||||||
|
"unescape": true,
|
||||||
|
"navigator": true
|
||||||
|
}
|
||||||
|
}
|
291
Gruntfile.js
|
@ -1,99 +1,244 @@
|
||||||
module.exports = function (grunt) {
|
module.exports = function (grunt) {
|
||||||
// Initializes the Grunt tasks with the following settings
|
|
||||||
|
var webpack = require('webpack');
|
||||||
|
var webpackConfig = require('./webpack.config.js');
|
||||||
|
var fs = require('fs');
|
||||||
|
var path = require('path');
|
||||||
|
var testDir = 'test';
|
||||||
|
var testHost = 'http://localhost:8000/';
|
||||||
|
var pkg = grunt.file.readJSON('package.json');
|
||||||
|
|
||||||
grunt.initConfig({
|
grunt.initConfig({
|
||||||
|
|
||||||
pkg: grunt.file.readJSON('package.json'),
|
|
||||||
|
|
||||||
version: 'v1.0',
|
|
||||||
dist_folder: 'dist/',
|
|
||||||
source_folder: 'src/',
|
|
||||||
|
|
||||||
// A list of files, which will be syntax-checked by JSHint
|
|
||||||
jshint: {
|
jshint: {
|
||||||
src: ['Gruntfile.js'/*, '<%= source_folder %>tablefilter_all.js'*/],
|
src: [
|
||||||
|
'Gruntfile.js',
|
||||||
|
'webpack.config.js',
|
||||||
|
'src/**/*.js'
|
||||||
|
],
|
||||||
options: {
|
options: {
|
||||||
// '-W069': true, // ['xxx'] is better written in dot notation
|
jshintrc: '.jshintrc'
|
||||||
// '-W099': true, // Mixed spaces and tabs
|
|
||||||
// '-W004': true, // 'i' is already defined
|
|
||||||
// '-W014': true, // Bad line breaking before '&&'
|
|
||||||
// '-W083': true, // Don't make functions within a loop
|
|
||||||
// '-W086': true, // Expected a 'break' statement before 'default'
|
|
||||||
// '-W049': true, // Unexpected escaped character '<' in regular expression
|
|
||||||
// '-W100': true, // This character may get silently deleted by one or more browsers
|
|
||||||
'-W041': true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
concat: {
|
qunit: {
|
||||||
js: {
|
all: {
|
||||||
files: [{
|
options: {
|
||||||
src: ['<%= source_folder %>tablefilter_all.js'],
|
urls: getTestFiles(testDir, testHost)
|
||||||
dest: '<%= dist_folder %>tablefilter_all.js'
|
}
|
||||||
}]
|
|
||||||
},
|
},
|
||||||
css: {
|
only: {
|
||||||
files: [{
|
options: {
|
||||||
src: ['<%= source_folder %>filtergrid.css'],
|
urls: []
|
||||||
dest: '<%= dist_folder %>filtergrid.css'
|
}
|
||||||
}]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// and minified (source and destination files)
|
connect: {
|
||||||
uglify: {
|
server: {
|
||||||
|
|
||||||
options: {
|
options: {
|
||||||
banner: '/*------------------------------------------------------------------------ \n' +
|
port: 8000,
|
||||||
'\t- TableFilter <%= version %> by Max Guglielmi \n' +
|
base: '.'
|
||||||
'\t- build date: <%= grunt.template.today() %> \n' +
|
|
||||||
'\t- http://tablefilter.free.fr \n' +
|
|
||||||
'\t- Copyright (c) 2014, Licensed under the MIT License \n' +
|
|
||||||
'------------------------------------------------------------------------*/ \n'
|
|
||||||
},
|
|
||||||
|
|
||||||
js: {
|
|
||||||
src: ['<%= concat.js.files[0].dest %>'],
|
|
||||||
dest: '<%= concat.js.files[0].dest %>'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
cssmin: {
|
|
||||||
combine: {
|
|
||||||
options: {
|
|
||||||
banner: '/*------------------------------------------------------------------------ \n' +
|
|
||||||
'\t- TableFilter stylesheet by Max Guglielmi \n' +
|
|
||||||
'\t- (build date: <%= grunt.template.today() %>) \n' +
|
|
||||||
'\t- Edit below for your projects\' needs \n' +
|
|
||||||
'------------------------------------------------------------------------*/ \n'
|
|
||||||
},
|
|
||||||
files: {
|
|
||||||
'<%= concat.css.files[0].dest %>': ['<%= concat.css.files[0].dest %>']
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
copy: {
|
copy: {
|
||||||
main: {
|
dist: {
|
||||||
files: [
|
src: ['**'],
|
||||||
{ src: ['<%= source_folder %>tablefilter_all.js'], dest: '<%= dist_folder %>tablefilter_all-uncompressed.js' },
|
cwd: 'static/style',
|
||||||
{ src: ['<%= source_folder %>tablefilter.js'], dest: '<%= dist_folder %>tablefilter-uncompressed.js' },
|
dest: 'dist/tablefilter/style',
|
||||||
{ src: ['<%= source_folder %>filtergrid.css'], dest: '<%= dist_folder %>filtergrid-uncompressed.css' },
|
expand: true
|
||||||
{ src: ['**'], cwd: '<%= source_folder %>TF_Modules/', dest: '<%= dist_folder %>TF_Modules/', expand: true },
|
},
|
||||||
{ src: ['**'], cwd: '<%= source_folder %>TF_Themes/', dest: '<%= dist_folder %>TF_Themes/', expand: true }
|
templates: {
|
||||||
|
src: ['**'],
|
||||||
|
cwd: 'static/templates',
|
||||||
|
dest: 'demos',
|
||||||
|
expand: true
|
||||||
|
},
|
||||||
|
assets: {
|
||||||
|
src: ['**'],
|
||||||
|
cwd: 'static/demos-assets',
|
||||||
|
dest: 'demos/assets',
|
||||||
|
expand: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'string-replace': {
|
||||||
|
demos: {
|
||||||
|
files: { 'demos/': 'demos/*.html' },
|
||||||
|
options: {
|
||||||
|
replacements: [
|
||||||
|
{
|
||||||
|
pattern: /{NAME}/ig,
|
||||||
|
replacement: pkg.name
|
||||||
|
},{
|
||||||
|
pattern: /{VERSION}/ig,
|
||||||
|
replacement: pkg.version
|
||||||
|
},{
|
||||||
|
pattern: /<!-- @import (.*?) -->/ig,
|
||||||
|
replacement: function (match, p1) {
|
||||||
|
return grunt.file.read('static/' + p1);
|
||||||
|
}
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'webpack-dev-server': {
|
||||||
|
options: {
|
||||||
|
webpack: webpack.dev,
|
||||||
|
publicPath: '/dist/'
|
||||||
|
},
|
||||||
|
start: {
|
||||||
|
keepAlive: true,
|
||||||
|
webpack: {
|
||||||
|
devtool: 'eval',
|
||||||
|
debug: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
webpack: {
|
||||||
|
options: webpackConfig,
|
||||||
|
build: webpackConfig.build,
|
||||||
|
dev: webpackConfig.dev
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
app: {
|
||||||
|
files: ['src/**/*', 'static/style/**/*'],
|
||||||
|
tasks: ['dev'],
|
||||||
|
options: {
|
||||||
|
spawn: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
templates: {
|
||||||
|
files: ['static/templates/**/*', 'static/partials/**/*'],
|
||||||
|
tasks: ['build-demos'],
|
||||||
|
options: {
|
||||||
|
spawn: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
babel: {
|
||||||
|
options: {
|
||||||
|
sourceMap: true,
|
||||||
|
modules: 'amd',
|
||||||
|
compact: false
|
||||||
|
},
|
||||||
|
dist: {
|
||||||
|
files: [{
|
||||||
|
expand: true,
|
||||||
|
cwd: 'src',
|
||||||
|
src: ['**/*.js'],
|
||||||
|
dest: 'dist/tablefilter'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-qunit');
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-copy');
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||||
|
grunt.loadNpmTasks('grunt-string-replace');
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-connect');
|
||||||
|
grunt.loadNpmTasks('grunt-webpack');
|
||||||
|
grunt.loadNpmTasks('grunt-babel');
|
||||||
|
|
||||||
|
grunt.registerTask('default',
|
||||||
|
['jshint', 'webpack:build', 'copy:dist', 'test', 'build-demos']);
|
||||||
|
|
||||||
|
// Development server
|
||||||
|
grunt.registerTask('server', ['webpack-dev-server:start']);
|
||||||
|
|
||||||
|
// Dev dev/build/watch cycle
|
||||||
|
grunt.registerTask('dev',
|
||||||
|
['jshint', 'webpack:dev', 'copy:dist', 'watch:app']);
|
||||||
|
|
||||||
|
// Production build
|
||||||
|
grunt.registerTask('build',
|
||||||
|
['jshint', 'webpack:build', 'copy:dist']);
|
||||||
|
|
||||||
|
// Build demos
|
||||||
|
grunt.registerTask('dev-demos', ['build-demos', 'watch:templates']);
|
||||||
|
grunt.registerTask('build-demos',
|
||||||
|
['copy:templates', 'copy:assets', 'string-replace:demos']);
|
||||||
|
|
||||||
|
// Transpile with Babel
|
||||||
|
grunt.registerTask('dev-modules', ['babel', 'copy:dist']);
|
||||||
|
|
||||||
|
// Tests
|
||||||
|
grunt.registerTask('test', ['connect', 'qunit:all']);
|
||||||
|
|
||||||
|
// Custom task running QUnit tests for specified files.
|
||||||
|
// Usage example: grunt test-only:test.html,test-help.html
|
||||||
|
grunt.registerTask('test-only',
|
||||||
|
'A task that runs only specified tests.',
|
||||||
|
function(tests) {
|
||||||
|
if(!tests) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
tests = tests.split(',');
|
||||||
|
var res = [];
|
||||||
|
|
||||||
|
tests.forEach(function(itm) {
|
||||||
|
var filePath = path.resolve(testDir, itm);
|
||||||
|
var parts = filePath.split(path.sep);
|
||||||
|
res.push(buildTestUrl(testHost, testDir, parts));
|
||||||
|
});
|
||||||
|
|
||||||
|
grunt.task.run('connect');
|
||||||
|
grunt.config('qunit.only.options.urls', res);
|
||||||
|
grunt.task.run('qunit:only');
|
||||||
|
});
|
||||||
|
|
||||||
|
function isTestFile(pth) {
|
||||||
|
var allowedExts = ['.html', '.htm'];
|
||||||
|
for(var i=0, len=allowedExts.length; i<len; i++){
|
||||||
|
var ext = allowedExts[i];
|
||||||
|
if(pth.indexOf(ext) !== -1){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildTestUrl(host, testDir, parts) {
|
||||||
|
var idx = parts.indexOf(testDir);
|
||||||
|
var fileIdx = parts.length;
|
||||||
|
var relParts = parts.slice(idx, fileIdx);
|
||||||
|
return host.concat(relParts.join('/'));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Returns the list of test files from the test folder for qunit task
|
||||||
|
function getTestFiles(testDir, host) {
|
||||||
|
|
||||||
|
var getFiles = function(dir, host) {
|
||||||
|
var res = [];
|
||||||
|
var items = fs.readdirSync(dir);
|
||||||
|
|
||||||
|
items.forEach(function(itm){
|
||||||
|
var fileOrDir = path.resolve(dir, itm);
|
||||||
|
if(isTestFile(fileOrDir)) {
|
||||||
|
var parts = fileOrDir.split(path.sep);
|
||||||
|
res.push(buildTestUrl(host, testDir, parts));
|
||||||
|
} else {
|
||||||
|
if(fs.lstatSync(fileOrDir).isDirectory()) {
|
||||||
|
res = res.concat(getFiles(fileOrDir, host));
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Load the plugins that provide the tasks we specified in package.json.
|
return res;
|
||||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
};
|
||||||
grunt.loadNpmTasks('grunt-contrib-concat');
|
|
||||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
|
||||||
grunt.loadNpmTasks('grunt-contrib-cssmin');
|
|
||||||
grunt.loadNpmTasks('grunt-contrib-copy');
|
|
||||||
|
|
||||||
// This is the default task being executed if Grunt
|
return getFiles(testDir, host);
|
||||||
// is called without any further parameter.
|
}
|
||||||
grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'cssmin', 'copy']);
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
22
LICENSE.md
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
#The MIT License (MIT)
|
||||||
|
|
||||||
|
##Copyright (c) 2009-2015 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.
|
99
README.md
|
@ -1,4 +1,99 @@
|
||||||
TableFilter
|
TableFilter
|
||||||
===========
|
===========================
|
||||||
|
|
||||||
|
A Javascript library making HTML tables filterable
|
||||||
|
|
||||||
|
TableFilter is a modernised version of the [HTML Table Filter generator](http://tablefilter.free.fr) javascript plugin.
|
||||||
|
This library adds to any html table a "filter by column" feature that enables
|
||||||
|
users to filter and limit the data displayed within a long table. By default, the script automatically adds a filter grid bar at the top of the desired table.
|
||||||
|
|
||||||
|
##Features
|
||||||
|
* Convert a regular HTML table into an advanced grid component providing:
|
||||||
|
* Advanced columns filtering model
|
||||||
|
* Sorting and pagination facilities
|
||||||
|
* Complete selection model ([ezEditTable](http://codecanyon.net/item/ezedittable-enhance-html-tables/2425123) extension)
|
||||||
|
* Extended keyboard navigation ([ezEditTable](http://codecanyon.net/item/ezedittable-enhance-html-tables/2425123) extension)
|
||||||
|
* Inline cell or row editing ([ezEditTable](http://codecanyon.net/item/ezedittable-enhance-html-tables/2425123) extension)
|
||||||
|
* Row insertion or deleting ([ezEditTable](http://codecanyon.net/item/ezedittable-enhance-html-tables/2425123) extension)
|
||||||
|
* And even more behaviors...
|
||||||
|
* Attach to an existing HTML table
|
||||||
|
* Integration with any server-side technology as this is a pure client-side
|
||||||
|
solution
|
||||||
|
* Callbacks for all events, and delegates for most actions
|
||||||
|
* Exhaustive documentation and API
|
||||||
|
* Valuable support provided under a Premium request
|
||||||
|
|
||||||
|
##Setup
|
||||||
|
Copy the ``tablefilter`` directory under ``dist`` and place it at desired location in your project. Then include the bundle js file in your page:
|
||||||
|
```shell
|
||||||
|
<script src="path/to/my/scripts/tablefilter/tablefilter.js"></script>
|
||||||
|
```
|
||||||
|
Place the following snippet just under the HTML table and always define a ``base_path`` property in the configuration object to reflect the path to the script
|
||||||
|
```shell
|
||||||
|
<script>
|
||||||
|
var tf = new TableFilter('my-table-id', {
|
||||||
|
base_path: 'path/to/my/scripts/tablefilter/'
|
||||||
|
});
|
||||||
|
tf.init();
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
If the ``base_path`` property is not specified, it will default to ``/tablefilter`` directory:
|
||||||
|
```shell
|
||||||
|
your-page.html
|
||||||
|
|-- tablefilter
|
||||||
|
```
|
||||||
|
|
||||||
|
##Development
|
||||||
|
If you are not familiar with ``Grunt`` visit this page: [gruntjs.com/getting-started](http://gruntjs.com/getting-started). Once ``Grunt`` is sorted out you can follow the instructions below.
|
||||||
|
Start by installing any dependencies.
|
||||||
|
|
||||||
|
```shell
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
Use the Grunt ``dev`` task to launch a build / watch cycle and start the local
|
||||||
|
sever on port ``8080``:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
grunt dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Use the ``build`` task to generate a production build:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
grunt build
|
||||||
|
```
|
||||||
|
|
||||||
|
The ``default`` Grunt task will create a production build and also run the
|
||||||
|
tests:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
grunt
|
||||||
|
```
|
||||||
|
|
||||||
|
To run all the tests:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
grunt test
|
||||||
|
```
|
||||||
|
|
||||||
|
and to run specific test(s):
|
||||||
|
|
||||||
|
```shell
|
||||||
|
grunt test-only:test.html
|
||||||
|
grunt test-only:test.html,test-sort.html
|
||||||
|
```
|
||||||
|
|
||||||
|
## Documentation
|
||||||
|
Find the complete documentation in the [WIKI](https://github.com/koalyptus/TableFilter/wiki) section.
|
||||||
|
|
||||||
|
## Support
|
||||||
|
* GitHub for reporting bugs and feature requests.
|
||||||
|
|
||||||
|
## License
|
||||||
|
[MIT](LICENSE.md)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Filter HTML tables content easily
|
|
||||||
|
|
BIN
demos/assets/img_best-price.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
demos/assets/img_great-deal.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
BIN
demos/assets/img_maintenance.jpg
Normal file
After Width: | Height: | Size: 32 KiB |
BIN
demos/assets/img_new-edition.png
Normal file
After Width: | Height: | Size: 2.2 KiB |
BIN
demos/assets/img_sold-out.png
Normal file
After Width: | Height: | Size: 1.4 KiB |
13028
demos/auto-filter.html
Normal file
2645
demos/columns-visibility.html
Normal file
1037
demos/data-types.html
Normal file
13054
demos/demo.html
Normal file
2632
demos/external-filters-visibility-commad.html
Normal file
13109
demos/external-filters.html
Normal file
454
demos/filter-images.html
Normal file
|
@ -0,0 +1,454 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>TableFilter v0.0.0 - Filter and Sort Images Demo</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../dist/tablefilter/style/tablefilter.css">
|
||||||
|
<style type="text/css">
|
||||||
|
body{
|
||||||
|
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||||
|
clean, sans-serif;
|
||||||
|
padding: 0 1em;
|
||||||
|
}
|
||||||
|
pre{
|
||||||
|
margin: auto 1em 1em 1em;
|
||||||
|
padding: 0 1em 1em 1em;
|
||||||
|
float: right;
|
||||||
|
line-height: 1.45;
|
||||||
|
background-color: #F7F7F7;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.panel{
|
||||||
|
float: left;
|
||||||
|
background: #F7F7F7 none repeat scroll 0% 0%;
|
||||||
|
width: 250px;
|
||||||
|
margin-right: 2em;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>TableFilter v0.0.0</h1>
|
||||||
|
<h2>Filter and sort images demo</h2>
|
||||||
|
<p>
|
||||||
|
This demo shows how to filter and sort a column containing images by using
|
||||||
|
the <code>custom_cell_data</code> delegate and the
|
||||||
|
<code>data-tf-sortKey</code> attribute.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<pre></pre>
|
||||||
|
|
||||||
|
|
||||||
|
<table id="demo">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th colspan="3">Book</th>
|
||||||
|
<th>Price</th>
|
||||||
|
<th colspan="2">Delivery Items</th>
|
||||||
|
<th> </th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th width="50"> </th>
|
||||||
|
<th width="210">Title</th>
|
||||||
|
<th width="150">Author</th>
|
||||||
|
<th width="50">$</th>
|
||||||
|
<th width="30">In store</th>
|
||||||
|
<th width="70">Shipping</th>
|
||||||
|
<th width="100">Publication Date</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="new edition">
|
||||||
|
<img src="assets/img_new-edition.png" alt="new edition" />
|
||||||
|
</td>
|
||||||
|
<td>Boris Godunov</td>
|
||||||
|
<td>Alexandr Pushkin</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">7.15</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">1 Hour</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">01/01/1999</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="sold out">
|
||||||
|
<img src="assets/img_sold-out.png" alt="sold out" />
|
||||||
|
</td>
|
||||||
|
<td>The Rainmaker</td>
|
||||||
|
<td>John Grisham</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">7.99</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="0">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="48">2 Days</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">12/01/2001</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="best price">
|
||||||
|
<img src="assets/img_best-price.png" alt="best price" />
|
||||||
|
</td>
|
||||||
|
<td>The Green Mile</td>
|
||||||
|
<td>Stephen King</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">11.10</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="24">24 Hours</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">01/01/1992</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="great deal">
|
||||||
|
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||||
|
</td>
|
||||||
|
<td>Misery</td>
|
||||||
|
<td>Stephen King</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">7.70</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="na">na</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">01/01/2003</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="great deal">
|
||||||
|
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||||
|
</td>
|
||||||
|
<td>The Dark Half</td>
|
||||||
|
<td>Stephen King</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">0</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="48">2 Days</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">10/30/1999</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="sold out">
|
||||||
|
<img src="assets/img_sold-out.png" alt="sold out" />
|
||||||
|
</td>
|
||||||
|
<td>The Partner</td>
|
||||||
|
<td>John Grisham</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">12.99</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="0">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="24">24 Hours</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">01/01/2005</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="sold out">
|
||||||
|
<img src="assets/img_sold-out.png" alt="sold out" />
|
||||||
|
</td>
|
||||||
|
<td>It</td>
|
||||||
|
<td>Stephen King</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">9.70</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="0">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="12">12 Hours</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">10/15/2001</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="great deal">
|
||||||
|
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||||
|
</td>
|
||||||
|
<td>Cousin Bette</td>
|
||||||
|
<td>Honore de Balzac</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">0</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">1 Hour</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">12/01/1991</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="great deal">
|
||||||
|
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||||
|
</td>
|
||||||
|
<td>The Testament</td>
|
||||||
|
<td>John Grisham</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">19.10</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="48">2 Days</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">12/17/1999</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="new edition">
|
||||||
|
<img src="assets/img_new-edition.png" alt="new edition" />
|
||||||
|
</td>
|
||||||
|
<td>Eugene Onegin</td>
|
||||||
|
<td>Alexandr Pushkin</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">11.20</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="0">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="24">24 Hours</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">09/27/2005</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="best price">
|
||||||
|
<img src="assets/img_best-price.png" alt="best price" />
|
||||||
|
</td>
|
||||||
|
<td>Dark Avenues</td>
|
||||||
|
<td>Ivan Bunin</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">14.96</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">1 Hour</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">10/01/2008</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="great deal">
|
||||||
|
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||||
|
</td>
|
||||||
|
<td>Father Goriot</td>
|
||||||
|
<td>Honore de Balzac</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">9.99</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="0">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="48">2 Days</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">06/06/2010</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="sold out">
|
||||||
|
<img src="assets/img_sold-out.png" alt="sold out" />
|
||||||
|
</td>
|
||||||
|
<td>The Captain's Daughter</td>
|
||||||
|
<td>Alexandr Pushkin</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">10.21</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="0">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="48">2 Days</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">03/01/2001</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="sold out">
|
||||||
|
<img src="assets/img_sold-out.png" alt="sold out" />
|
||||||
|
</td>
|
||||||
|
<td>Hamlet</td>
|
||||||
|
<td>William Shakespeare</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">5.99</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="0">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">1 Hour</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">04/15/2003</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="best price">
|
||||||
|
<img src="assets/img_best-price.png" alt="best price" />
|
||||||
|
</td>
|
||||||
|
<td>The Village</td>
|
||||||
|
<td>Ivan Bunin</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">11.66</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="24">24 Hours</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">01/02/2010</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="new edition">
|
||||||
|
<img src="assets/img_new-edition.png" alt="new edition" />
|
||||||
|
</td>
|
||||||
|
<td>The Winter's Tale</td>
|
||||||
|
<td>William Shakespeare</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">19.31</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">1 Hour</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">02/12/2010</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="great deal">
|
||||||
|
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||||
|
</td>
|
||||||
|
<td>The Black Sheep</td>
|
||||||
|
<td>Honore de Balzac</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">16.00</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="0">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">1 Hour</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">08/28/1976</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-tf-sortKey="new edition">
|
||||||
|
<img src="assets/img_new-edition.png" alt="new edition" />
|
||||||
|
</td>
|
||||||
|
<td>Lost Illusions</td>
|
||||||
|
<td>Honore de Balzac</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">8.0</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="na">na</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">07/10/2010</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<script src="../dist/tablefilter/tablefilter.js"></script>
|
||||||
|
<script data-config>
|
||||||
|
var tfConfig = {
|
||||||
|
base_path: '../dist/tablefilter/',
|
||||||
|
filters_row_index: 2,
|
||||||
|
headers_row_index: 1,
|
||||||
|
col_number_format: [
|
||||||
|
null, null, null,
|
||||||
|
'US', null, null, null
|
||||||
|
],
|
||||||
|
col_date_type: [
|
||||||
|
null, null, null,
|
||||||
|
null, null, null, 'mdy'
|
||||||
|
],
|
||||||
|
rows_counter: true,
|
||||||
|
rows_counter_text: 'Books: ',
|
||||||
|
alternate_rows: true,
|
||||||
|
btn_reset: true,
|
||||||
|
|
||||||
|
/* filter types*/
|
||||||
|
col_0: 'select',
|
||||||
|
col_4: 'select',
|
||||||
|
col_5: 'select',
|
||||||
|
|
||||||
|
/* custom_cell_data delegate used for filtering
|
||||||
|
images in a column */
|
||||||
|
custom_cell_data_cols: [0, 4],
|
||||||
|
custom_cell_data: function(o, cell, colIndex){
|
||||||
|
if(colIndex === 0){
|
||||||
|
var img = cell.getElementsByTagName('img')[0];
|
||||||
|
if(!img){
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
return img.alt;
|
||||||
|
} else if(colIndex === 4){
|
||||||
|
var chk = cell.getElementsByTagName('input')[0];
|
||||||
|
if(chk.checked){
|
||||||
|
return 'yes';
|
||||||
|
} else {
|
||||||
|
return 'no';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/* Custom options for 'Shipping' column */
|
||||||
|
custom_options: {
|
||||||
|
cols: [5],
|
||||||
|
texts: [
|
||||||
|
[
|
||||||
|
'1 Hour', '12 Hours', '24 Hours',
|
||||||
|
'2 Days', 'na'
|
||||||
|
]
|
||||||
|
],
|
||||||
|
values: [
|
||||||
|
[
|
||||||
|
'1 Hour', '12 Hours', '24 Hours',
|
||||||
|
'2 Days', 'na'
|
||||||
|
]
|
||||||
|
],
|
||||||
|
sorts: [false]
|
||||||
|
},
|
||||||
|
|
||||||
|
/* SkyBlue theme */
|
||||||
|
themes: [{ name: 'skyblue'}],
|
||||||
|
|
||||||
|
/* Sorting feature */
|
||||||
|
extensions: [{ name: 'sort' }]
|
||||||
|
};
|
||||||
|
|
||||||
|
var tf = new TableFilter('demo', 2, tfConfig);
|
||||||
|
tf.init();
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
var configs = document.querySelectorAll('script[data-config]');
|
||||||
|
var pre = document.body.getElementsByTagName('pre')[0];
|
||||||
|
|
||||||
|
[].forEach.call(configs, function(config) {
|
||||||
|
if(pre){
|
||||||
|
pre.innerHTML +=
|
||||||
|
config.innerHTML.replace('<', '<').replace('>', '>');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
2628
demos/filters-visibility.html
Normal file
13035
demos/grid-layout.html
Normal file
9363
demos/grouped-headers.html
Normal file
2639
demos/linked-filters-disabled.html
Normal file
2628
demos/linked-filters.html
Normal file
13029
demos/load-filters-on-demand.html
Normal file
13047
demos/old/demo.html
Normal file
179
demos/old/dev-complex.html
Normal file
|
@ -0,0 +1,179 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>HTML Table Filter Generator</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div style="width: 500px;">
|
||||||
|
<table id="demo" cellpadding="0" cellspacing="0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>From</th>
|
||||||
|
<th>Destination</th>
|
||||||
|
<th>Road Distance (km)</th>
|
||||||
|
<th>By Air (hrs)</th>
|
||||||
|
<th>By Rail (hrs)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<!-- <tfoot>
|
||||||
|
<tr>
|
||||||
|
<td>Tot:</td>
|
||||||
|
<td></td>
|
||||||
|
<td id="sum1"></td>
|
||||||
|
<td id="sum2"></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</tfoot> -->
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Adelaide</td>
|
||||||
|
<td>1412</td>
|
||||||
|
<td>1.4</td>
|
||||||
|
<td>25.3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Brisbane</td>
|
||||||
|
<td>982</td>
|
||||||
|
<td>1.5</td>
|
||||||
|
<td>16</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Canberra</td>
|
||||||
|
<td>286</td>
|
||||||
|
<td>.6</td>
|
||||||
|
<td>4.3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Melbourne</td>
|
||||||
|
<td>872</td>
|
||||||
|
<td>1.1</td>
|
||||||
|
<td>10.5</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Adelaide</strong></td>
|
||||||
|
<td>Perth</td>
|
||||||
|
<td>2781</td>
|
||||||
|
<td>3.1</td>
|
||||||
|
<td>38</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Adelaide</strong></td>
|
||||||
|
<td>Alice Springs</td>
|
||||||
|
<td>1533</td>
|
||||||
|
<td>2</td>
|
||||||
|
<td>20.25</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Adelaide</strong></td>
|
||||||
|
<td>Brisbane</td>
|
||||||
|
<td>2045</td>
|
||||||
|
<td>2.15</td>
|
||||||
|
<td>40</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../build/tablefilter/tablefilter.js"></script>
|
||||||
|
<script>
|
||||||
|
// var table = document.getElementById('demo');
|
||||||
|
// var totRowIndex = table.getElementsByTagName("tr").length;
|
||||||
|
|
||||||
|
var tf = new TableFilter("demo", {
|
||||||
|
col_0: 'select',
|
||||||
|
col_2: 'multiple',
|
||||||
|
col_3: 'checklist',
|
||||||
|
base_path: '../build/tablefilter/',
|
||||||
|
loader: true,
|
||||||
|
rows_counter: true,
|
||||||
|
enable_default_theme: true,
|
||||||
|
// slc_filling_method: 'innerhtml',
|
||||||
|
sort: true,
|
||||||
|
sort_config: {
|
||||||
|
sort_types: ['string','string','number','number','number']
|
||||||
|
},
|
||||||
|
paging: false,
|
||||||
|
paging_length: 4,
|
||||||
|
// page_selector_type: 'input',
|
||||||
|
results_per_page: ['Results per page', [2,4,6]],
|
||||||
|
remember_grid_values: true,
|
||||||
|
// remember_page_number: true,
|
||||||
|
// remember_page_length: true,
|
||||||
|
fill_slc_on_demand: false,
|
||||||
|
linked_filters: false,
|
||||||
|
popup_filters: false,
|
||||||
|
alternate_rows: true,
|
||||||
|
highlight_keywords: true,
|
||||||
|
match_case: false,
|
||||||
|
btn_reset: true,
|
||||||
|
status_bar: true,
|
||||||
|
watermark: [null, 'Filter column...', null, null, 'Helo'],
|
||||||
|
selectable: false,
|
||||||
|
editable: false,
|
||||||
|
ezEditTable_config:{
|
||||||
|
default_selection: 'both',
|
||||||
|
loadStylesheet: true
|
||||||
|
},
|
||||||
|
grid_layout: true,
|
||||||
|
grid_width: '600px',
|
||||||
|
// grid_height: '200px',
|
||||||
|
on_before_show_msg: function(tf){
|
||||||
|
// console.log('on_before_show_msg');
|
||||||
|
},
|
||||||
|
|
||||||
|
// rows_always_visible: [totRowIndex],
|
||||||
|
// col_operation: {
|
||||||
|
// id: ["sum1", "sum2"],
|
||||||
|
// col: [2, 3],
|
||||||
|
// operation: ["sum", "mean"],
|
||||||
|
// write_method: ["innerhtml", 'innerhtml'],
|
||||||
|
// exclude_row: [totRowIndex],
|
||||||
|
// decimal_precision: [0, 2],
|
||||||
|
// tot_row_index: [totRowIndex, totRowIndex]
|
||||||
|
// },
|
||||||
|
extensions: [{
|
||||||
|
/*** Columns Visibility Manager extension load ***/
|
||||||
|
name: 'colsVisibility',
|
||||||
|
description: 'Columns visibility manager',
|
||||||
|
// manager: true,
|
||||||
|
tick_to_hide: true,
|
||||||
|
// headers_table: true,
|
||||||
|
// container_target_id: 'test_cont',
|
||||||
|
// headers_text: ['1','2','3','4','5','6'],
|
||||||
|
// btn_target_id: 'test_cont',
|
||||||
|
// btn_text: 'Hola',
|
||||||
|
// btn_html: '<button>Columns</button>',
|
||||||
|
// btn_css_class: 'test',
|
||||||
|
// btn_close_text: 'jj',
|
||||||
|
// btn_close_html: '<button>close</button>',
|
||||||
|
// btn_close_css_class: 'test',
|
||||||
|
// stylesheet: 'hola.css',
|
||||||
|
// cont_css_class: 'test',
|
||||||
|
// checklist_item_css_class: 'test',
|
||||||
|
// at_start: [0,1,2,3,4],
|
||||||
|
// enable_hover: true,
|
||||||
|
enable_tick_all: true
|
||||||
|
// ,
|
||||||
|
// tick_all_text: 'Hola',
|
||||||
|
// text: 'tutu',
|
||||||
|
// on_loaded: function(){ console.log(arguments); },
|
||||||
|
// on_before_open: function(){ console.log('on_before_open', arguments); },
|
||||||
|
// on_after_open: function(){ console.log('on_after_open',arguments); },
|
||||||
|
// on_before_close: function(){ console.log('on_before_close',arguments); },
|
||||||
|
// on_after_close: function(){ console.log('on_after_close',arguments); },
|
||||||
|
// on_before_col_hidden: function(){ console.log('on_before_col_hidden',arguments); },
|
||||||
|
// on_after_col_hidden: function(){ console.log('on_after_col_hidden',arguments); },
|
||||||
|
// on_before_col_displayed: function(){ console.log('on_before_col_displayed',arguments); },
|
||||||
|
// on_after_col_displayed: function(){ console.log('on_after_col_displayed',arguments); }
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
|
||||||
|
tf.init();
|
||||||
|
</script>
|
||||||
|
<button onclick="javascript:tf.ExtRegistry.colsVisibility.toggleCol(2);">Toggle col 2</button>
|
||||||
|
</body>
|
||||||
|
</html>
|
214
demos/old/dev.html
Normal file
|
@ -0,0 +1,214 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>HTML Table Filter Generator</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../dist/tablefilter/style/tablefilter.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="test"></div>
|
||||||
|
<table id="demo" cellpadding="0" cellspacing="0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>From</th>
|
||||||
|
<th>Destination</th>
|
||||||
|
<th>Road Distance (km)</th>
|
||||||
|
<th>By Air (hrs)</th>
|
||||||
|
<th>By Rail (hrs)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td>Tot:</td>
|
||||||
|
<td></td>
|
||||||
|
<td id="sum1"></td>
|
||||||
|
<td id="sum2"></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Adelaide</td>
|
||||||
|
<td>1412</td>
|
||||||
|
<td>1.4</td>
|
||||||
|
<td>25.3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Brisbane</td>
|
||||||
|
<td>982</td>
|
||||||
|
<td>1.5</td>
|
||||||
|
<td>16</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Canberra</td>
|
||||||
|
<td>286</td>
|
||||||
|
<td>.6</td>
|
||||||
|
<td>4.3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Melbourne</td>
|
||||||
|
<td>872</td>
|
||||||
|
<td>1.1</td>
|
||||||
|
<td>10.5</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Adelaide</strong></td>
|
||||||
|
<td>Perth</td>
|
||||||
|
<td>2781</td>
|
||||||
|
<td>3.1</td>
|
||||||
|
<td>38</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Adelaide</strong></td>
|
||||||
|
<td>Alice Springs</td>
|
||||||
|
<td>1533</td>
|
||||||
|
<td>2</td>
|
||||||
|
<td>20.25</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Adelaide</strong></td>
|
||||||
|
<td>Brisbane</td>
|
||||||
|
<td>2045</td>
|
||||||
|
<td>2.15</td>
|
||||||
|
<td>40</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button onclick="tf.ExtRegistry.advancedGrid.destroy();">Remove ezEditTable</button>
|
||||||
|
<button onclick="tf.ExtRegistry.advancedGrid.reset();">Reset ezEditTable</button>
|
||||||
|
|
||||||
|
<button onclick="tf.destroy();">Remove</button>
|
||||||
|
<button onclick="tf.init();">Reset</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../dist/tablefilter/tablefilter.js"></script>
|
||||||
|
<script>
|
||||||
|
var table = document.getElementById('demo');
|
||||||
|
var totRowIndex = table.getElementsByTagName("tr").length;
|
||||||
|
|
||||||
|
var tf = new TableFilter("demo", {
|
||||||
|
col_0: 'select',
|
||||||
|
col_2: 'checklist',
|
||||||
|
col_3: 'select',
|
||||||
|
base_path: '../../dist/tablefilter/',
|
||||||
|
// fill_slc_on_demand: true,
|
||||||
|
rows_counter: true,
|
||||||
|
// enable_default_theme: true,
|
||||||
|
// help_instructions: false,
|
||||||
|
mark_active_columns: true,
|
||||||
|
auto_filter: false,
|
||||||
|
auto_filter_delay: 200,
|
||||||
|
loader: true,
|
||||||
|
// enter_key: false,
|
||||||
|
// themes: [{ name: 'skyblue'}],
|
||||||
|
// popup_filters: true,
|
||||||
|
paging: true,
|
||||||
|
paging_length: 3,
|
||||||
|
alternate_rows: true,
|
||||||
|
highlight_keywords: true,
|
||||||
|
match_case: false,
|
||||||
|
remember_grid_values: true,
|
||||||
|
col_widths: ['150px','150px','150px','200px','150px'],
|
||||||
|
btn_reset: true,
|
||||||
|
grid_layout: false,
|
||||||
|
rows_always_visible: [totRowIndex],
|
||||||
|
custom_options: {
|
||||||
|
cols: [3],
|
||||||
|
texts: [['0-0.5', '0.5-1', '1-2', '>2']],
|
||||||
|
values: [['>0 && <=0.5', '>0.5 && <=1', '>1 && <=2', '>2']],
|
||||||
|
sorts: [false]
|
||||||
|
},
|
||||||
|
// col_operation: {
|
||||||
|
// id: ["sum1", "sum2"],
|
||||||
|
// col: [2, 3],
|
||||||
|
// operation: ["sum", "mean"],
|
||||||
|
// write_method: ["innerhtml", 'innerhtml'],
|
||||||
|
// exclude_row: [totRowIndex],
|
||||||
|
// decimal_precision: [0, 2],
|
||||||
|
// tot_row_index: [totRowIndex, totRowIndex]
|
||||||
|
// },
|
||||||
|
// selectable: true,
|
||||||
|
// editable: true,
|
||||||
|
// ezEditTable_config: {
|
||||||
|
// path: '../libs/ezEditTable/ezEditTable.js',
|
||||||
|
// default_selection: 'both',
|
||||||
|
// auto_save: false
|
||||||
|
// },
|
||||||
|
extensions: [
|
||||||
|
{
|
||||||
|
name: 'sort',
|
||||||
|
types: ['string', 'string', 'number', 'number', 'number']
|
||||||
|
},{
|
||||||
|
name: 'advancedGrid',
|
||||||
|
// vendor_path: '../../libs/ezEditTable/',
|
||||||
|
filename: 'ezEditTable_min.js',
|
||||||
|
vendor_path: 'http://edittable.free.fr/ezEditTable/',
|
||||||
|
selectable: true,
|
||||||
|
editable: true,
|
||||||
|
default_selection: 'both',
|
||||||
|
// load_stylesheet: true,
|
||||||
|
auto_save: false
|
||||||
|
},{
|
||||||
|
name: 'colOps',
|
||||||
|
id: ["sum1", "sum2"],
|
||||||
|
col: [2, 3],
|
||||||
|
operation: ["sum", "mean"],
|
||||||
|
write_method: ["innerhtml", 'innerhtml'],
|
||||||
|
exclude_row: [totRowIndex],
|
||||||
|
decimal_precision: [0, 2],
|
||||||
|
tot_row_index: [totRowIndex, totRowIndex]
|
||||||
|
},{
|
||||||
|
name: 'filtersVisibility',
|
||||||
|
// enable_icon: true,
|
||||||
|
// target_id: 'test',
|
||||||
|
visible_at_start: false
|
||||||
|
// ,
|
||||||
|
// btn_text: 'Filters',
|
||||||
|
// filters_row_index: 0
|
||||||
|
}, {
|
||||||
|
/*** Columns Visibility Manager extension load ***/
|
||||||
|
name: 'colsVisibility',
|
||||||
|
description: 'Columns visibility manager',
|
||||||
|
// manager: true,
|
||||||
|
tick_to_hide: true,
|
||||||
|
// headers_table: true,
|
||||||
|
// container_target_id: 'test_cont',
|
||||||
|
// headers_text: ['1','2','3','4','5','6'],
|
||||||
|
// btn_target_id: 'test_cont',
|
||||||
|
// btn_text: 'Hola',
|
||||||
|
// btn_html: '<button>Columns</button>',
|
||||||
|
// btn_css_class: 'test',
|
||||||
|
// btn_close_text: 'jj',
|
||||||
|
// btn_close_html: '<button>close</button>',
|
||||||
|
// btn_close_css_class: 'test',
|
||||||
|
// stylesheet: 'hola.css',
|
||||||
|
// cont_css_class: 'test',
|
||||||
|
// checklist_item_css_class: 'test',
|
||||||
|
// at_start: [0,1,2,3,4],
|
||||||
|
// enable_hover: true,
|
||||||
|
enable_tick_all: true
|
||||||
|
// ,
|
||||||
|
// tick_all_text: 'Hola',
|
||||||
|
// text: 'tutu',
|
||||||
|
// on_loaded: function(){ console.log(arguments); },
|
||||||
|
// on_before_open: function(){ console.log('on_before_open', arguments); },
|
||||||
|
// on_after_open: function(){ console.log('on_after_open',arguments); },
|
||||||
|
// on_before_close: function(){ console.log('on_before_close',arguments); },
|
||||||
|
// on_after_close: function(){ console.log('on_after_close',arguments); },
|
||||||
|
// on_before_col_hidden: function(){ console.log('on_before_col_hidden',arguments); },
|
||||||
|
// on_after_col_hidden: function(){ console.log('on_after_col_hidden',arguments); },
|
||||||
|
// on_before_col_displayed: function(){ console.log('on_before_col_displayed',arguments); },
|
||||||
|
// on_after_col_displayed: function(){ console.log('on_after_col_displayed',arguments); }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
tf.init();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
179
demos/old/dist-complex.html
Normal file
|
@ -0,0 +1,179 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>HTML Table Filter Generator</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div style="width: 500px;">
|
||||||
|
<table id="demo" cellpadding="0" cellspacing="0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>From</th>
|
||||||
|
<th>Destination</th>
|
||||||
|
<th>Road Distance (km)</th>
|
||||||
|
<th>By Air (hrs)</th>
|
||||||
|
<th>By Rail (hrs)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<!-- <tfoot>
|
||||||
|
<tr>
|
||||||
|
<td>Tot:</td>
|
||||||
|
<td></td>
|
||||||
|
<td id="sum1"></td>
|
||||||
|
<td id="sum2"></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</tfoot> -->
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Adelaide</td>
|
||||||
|
<td>1412</td>
|
||||||
|
<td>1.4</td>
|
||||||
|
<td>25.3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Brisbane</td>
|
||||||
|
<td>982</td>
|
||||||
|
<td>1.5</td>
|
||||||
|
<td>16</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Canberra</td>
|
||||||
|
<td>286</td>
|
||||||
|
<td>.6</td>
|
||||||
|
<td>4.3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Melbourne</td>
|
||||||
|
<td>872</td>
|
||||||
|
<td>1.1</td>
|
||||||
|
<td>10.5</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Adelaide</strong></td>
|
||||||
|
<td>Perth</td>
|
||||||
|
<td>2781</td>
|
||||||
|
<td>3.1</td>
|
||||||
|
<td>38</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Adelaide</strong></td>
|
||||||
|
<td>Alice Springs</td>
|
||||||
|
<td>1533</td>
|
||||||
|
<td>2</td>
|
||||||
|
<td>20.25</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Adelaide</strong></td>
|
||||||
|
<td>Brisbane</td>
|
||||||
|
<td>2045</td>
|
||||||
|
<td>2.15</td>
|
||||||
|
<td>40</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../dist/tablefilter/tablefilter.js"></script>
|
||||||
|
<script>
|
||||||
|
// var table = document.getElementById('demo');
|
||||||
|
// var totRowIndex = table.getElementsByTagName("tr").length;
|
||||||
|
|
||||||
|
var tf = new TableFilter("demo", {
|
||||||
|
col_0: 'select',
|
||||||
|
col_2: 'multiple',
|
||||||
|
col_3: 'checklist',
|
||||||
|
base_path: '../dist/',
|
||||||
|
loader: true,
|
||||||
|
rows_counter: true,
|
||||||
|
enable_default_theme: true,
|
||||||
|
// slc_filling_method: 'innerhtml',
|
||||||
|
sort: true,
|
||||||
|
sort_config: {
|
||||||
|
sort_types: ['string','string','number','number','number']
|
||||||
|
},
|
||||||
|
paging: false,
|
||||||
|
paging_length: 4,
|
||||||
|
// page_selector_type: 'input',
|
||||||
|
results_per_page: ['Results per page', [2,4,6]],
|
||||||
|
remember_grid_values: true,
|
||||||
|
// remember_page_number: true,
|
||||||
|
// remember_page_length: true,
|
||||||
|
fill_slc_on_demand: false,
|
||||||
|
linked_filters: false,
|
||||||
|
popup_filters: false,
|
||||||
|
alternate_rows: true,
|
||||||
|
highlight_keywords: true,
|
||||||
|
match_case: false,
|
||||||
|
btn_reset: true,
|
||||||
|
status_bar: true,
|
||||||
|
watermark: [null, 'Filter column...', null, null, 'Helo'],
|
||||||
|
selectable: false,
|
||||||
|
editable: false,
|
||||||
|
ezEditTable_config:{
|
||||||
|
default_selection: 'both',
|
||||||
|
loadStylesheet: true
|
||||||
|
},
|
||||||
|
grid_layout: true,
|
||||||
|
grid_width: '600px',
|
||||||
|
// grid_height: '200px',
|
||||||
|
on_before_show_msg: function(tf){
|
||||||
|
// console.log('on_before_show_msg');
|
||||||
|
},
|
||||||
|
|
||||||
|
// rows_always_visible: [totRowIndex],
|
||||||
|
// col_operation: {
|
||||||
|
// id: ["sum1", "sum2"],
|
||||||
|
// col: [2, 3],
|
||||||
|
// operation: ["sum", "mean"],
|
||||||
|
// write_method: ["innerhtml", 'innerhtml'],
|
||||||
|
// exclude_row: [totRowIndex],
|
||||||
|
// decimal_precision: [0, 2],
|
||||||
|
// tot_row_index: [totRowIndex, totRowIndex]
|
||||||
|
// },
|
||||||
|
extensions: [{
|
||||||
|
/*** Columns Visibility Manager extension load ***/
|
||||||
|
name: 'colsVisibility',
|
||||||
|
description: 'Columns visibility manager',
|
||||||
|
// manager: true,
|
||||||
|
tick_to_hide: true,
|
||||||
|
// headers_table: true,
|
||||||
|
// container_target_id: 'test_cont',
|
||||||
|
// headers_text: ['1','2','3','4','5','6'],
|
||||||
|
// btn_target_id: 'test_cont',
|
||||||
|
// btn_text: 'Hola',
|
||||||
|
// btn_html: '<button>Columns</button>',
|
||||||
|
// btn_css_class: 'test',
|
||||||
|
// btn_close_text: 'jj',
|
||||||
|
// btn_close_html: '<button>close</button>',
|
||||||
|
// btn_close_css_class: 'test',
|
||||||
|
// stylesheet: 'hola.css',
|
||||||
|
// cont_css_class: 'test',
|
||||||
|
// checklist_item_css_class: 'test',
|
||||||
|
// at_start: [0,1,2,3,4],
|
||||||
|
// enable_hover: true,
|
||||||
|
enable_tick_all: true
|
||||||
|
// ,
|
||||||
|
// tick_all_text: 'Hola',
|
||||||
|
// text: 'tutu',
|
||||||
|
// on_loaded: function(){ console.log(arguments); },
|
||||||
|
// on_before_open: function(){ console.log('on_before_open', arguments); },
|
||||||
|
// on_after_open: function(){ console.log('on_after_open',arguments); },
|
||||||
|
// on_before_close: function(){ console.log('on_before_close',arguments); },
|
||||||
|
// on_after_close: function(){ console.log('on_after_close',arguments); },
|
||||||
|
// on_before_col_hidden: function(){ console.log('on_before_col_hidden',arguments); },
|
||||||
|
// on_after_col_hidden: function(){ console.log('on_after_col_hidden',arguments); },
|
||||||
|
// on_before_col_displayed: function(){ console.log('on_before_col_displayed',arguments); },
|
||||||
|
// on_after_col_displayed: function(){ console.log('on_after_col_displayed',arguments); }
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
|
||||||
|
tf.init();
|
||||||
|
</script>
|
||||||
|
<button onclick="javascript:tf.ExtRegistry.colsVisibility.toggleCol(2);">Toggle col 2</button>
|
||||||
|
</body>
|
||||||
|
</html>
|
152
demos/old/dist.html
Normal file
|
@ -0,0 +1,152 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>HTML Table Filter Generator</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<table id="demo" cellpadding="0" cellspacing="0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>From</th>
|
||||||
|
<th>Destination</th>
|
||||||
|
<th>Road Distance (km)</th>
|
||||||
|
<th>By Air (hrs)</th>
|
||||||
|
<th width="15%">By Rail (hrs)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td>Tot:</td>
|
||||||
|
<td></td>
|
||||||
|
<td id="sum1"></td>
|
||||||
|
<td id="sum2"></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Adelaide</td>
|
||||||
|
<td>1412</td>
|
||||||
|
<td>1.4</td>
|
||||||
|
<td>25.3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Brisbane</td>
|
||||||
|
<td>982</td>
|
||||||
|
<td>1.5</td>
|
||||||
|
<td>16</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Canberra</td>
|
||||||
|
<td>286</td>
|
||||||
|
<td>.6</td>
|
||||||
|
<td>4.3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Sydney</strong></td>
|
||||||
|
<td>Melbourne</td>
|
||||||
|
<td>872</td>
|
||||||
|
<td>1.1</td>
|
||||||
|
<td>10.5</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Adelaide</strong></td>
|
||||||
|
<td>Perth</td>
|
||||||
|
<td>2781</td>
|
||||||
|
<td>3.1</td>
|
||||||
|
<td>38</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Adelaide</strong></td>
|
||||||
|
<td>Alice Springs</td>
|
||||||
|
<td>1533</td>
|
||||||
|
<td>2</td>
|
||||||
|
<td>20.25</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Adelaide</strong></td>
|
||||||
|
<td>Brisbane</td>
|
||||||
|
<td>2045</td>
|
||||||
|
<td>2.15</td>
|
||||||
|
<td>40</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../dist/tablefilter/tablefilter.js"></script>
|
||||||
|
<script>
|
||||||
|
var table = document.getElementById('demo');
|
||||||
|
var totRowIndex = table.getElementsByTagName("tr").length;
|
||||||
|
|
||||||
|
var tf = new TableFilter("demo", {
|
||||||
|
col_0: 'select',
|
||||||
|
col_3: 'checklist',
|
||||||
|
base_path: '../dist/tablefilter/',
|
||||||
|
rows_counter: true,
|
||||||
|
// enable_default_theme: true,
|
||||||
|
themes: [{ path: '../dist/tablefilter/themes/mytheme/mytheme.css' }],
|
||||||
|
paging: false,
|
||||||
|
alternate_rows: true,
|
||||||
|
highlight_keywords: true,
|
||||||
|
match_case: false,
|
||||||
|
remember_grid_values: true,
|
||||||
|
btn_reset: true,
|
||||||
|
grid_layout: true,
|
||||||
|
sort: true,
|
||||||
|
sort_config: {
|
||||||
|
sort_types: ['string','string','number','number','number']
|
||||||
|
},
|
||||||
|
|
||||||
|
rows_always_visible: [totRowIndex],
|
||||||
|
col_operation: {
|
||||||
|
id: ["sum1", "sum2"],
|
||||||
|
col: [2, 3],
|
||||||
|
operation: ["sum", "mean"],
|
||||||
|
write_method: ["innerhtml", 'innerhtml'],
|
||||||
|
exclude_row: [totRowIndex],
|
||||||
|
decimal_precision: [0, 2],
|
||||||
|
tot_row_index: [totRowIndex, totRowIndex]
|
||||||
|
}/*,
|
||||||
|
extensions: [{
|
||||||
|
name: 'colsVisibility',
|
||||||
|
description: 'Columns visibility manager',
|
||||||
|
// manager: true,
|
||||||
|
tick_to_hide: true,
|
||||||
|
// headers_table: true,
|
||||||
|
// container_target_id: 'test_cont',
|
||||||
|
// headers_text: ['1','2','3','4','5','6'],
|
||||||
|
// btn_target_id: 'test_cont',
|
||||||
|
// btn_text: 'Hola',
|
||||||
|
// btn_html: '<button>Columns</button>',
|
||||||
|
// btn_css_class: 'test',
|
||||||
|
// btn_close_text: 'jj',
|
||||||
|
// btn_close_html: '<button>close</button>',
|
||||||
|
// btn_close_css_class: 'test',
|
||||||
|
// stylesheet: 'hola.css',
|
||||||
|
// cont_css_class: 'test',
|
||||||
|
// checklist_item_css_class: 'test',
|
||||||
|
// at_start: [0,1,2,3,4],
|
||||||
|
// enable_hover: true,
|
||||||
|
enable_tick_all: true
|
||||||
|
// ,
|
||||||
|
// tick_all_text: 'Hola',
|
||||||
|
// text: 'tutu',
|
||||||
|
// on_loaded: function(){ console.log(arguments); },
|
||||||
|
// on_before_open: function(){ console.log('on_before_open', arguments); },
|
||||||
|
// on_after_open: function(){ console.log('on_after_open',arguments); },
|
||||||
|
// on_before_close: function(){ console.log('on_before_close',arguments); },
|
||||||
|
// on_after_close: function(){ console.log('on_after_close',arguments); },
|
||||||
|
// on_before_col_hidden: function(){ console.log('on_before_col_hidden',arguments); },
|
||||||
|
// on_after_col_hidden: function(){ console.log('on_after_col_hidden',arguments); },
|
||||||
|
// on_before_col_displayed: function(){ console.log('on_before_col_displayed',arguments); },
|
||||||
|
// on_after_col_displayed: function(){ console.log('on_after_col_displayed',arguments); }
|
||||||
|
}]*/
|
||||||
|
});
|
||||||
|
|
||||||
|
tf.init();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
13054
demos/pagination.html
Normal file
2652
demos/requirejs-dev.html
Normal file
2636
demos/requirejs.html
Normal file
409
demos/theme-roller.html
Normal file
|
@ -0,0 +1,409 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>TableFilter v0.0.0 - Theme Roller Demo</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../dist/tablefilter/style/tablefilter.css">
|
||||||
|
<style type="text/css">
|
||||||
|
body{
|
||||||
|
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||||
|
clean, sans-serif;
|
||||||
|
padding: 0 1em;
|
||||||
|
}
|
||||||
|
pre{
|
||||||
|
margin: auto 1em 1em 1em;
|
||||||
|
padding: 0 1em 1em 1em;
|
||||||
|
float: right;
|
||||||
|
line-height: 1.45;
|
||||||
|
background-color: #F7F7F7;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.panel{
|
||||||
|
float: left;
|
||||||
|
background: #F7F7F7 none repeat scroll 0% 0%;
|
||||||
|
width: 250px;
|
||||||
|
margin-right: 2em;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>TableFilter v0.0.0</h1>
|
||||||
|
<h2>Theme roller demo</h2>
|
||||||
|
<p>
|
||||||
|
This demo shows how to implement a theme roller.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<pre></pre>
|
||||||
|
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Theme:
|
||||||
|
<select onchange="javascript:changeTheme(this.value);">
|
||||||
|
<option value="default" selected="selected">default</option>
|
||||||
|
<option value="mytheme">mytheme</option>
|
||||||
|
<option value="skyblue">skyblue</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table id="books">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th colspan="2">Book</th>
|
||||||
|
<th>Price</th>
|
||||||
|
<th colspan="2">Delivery Items</th>
|
||||||
|
<th> </th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th width="210">Title</th>
|
||||||
|
<th width="150">Author</th>
|
||||||
|
<th width="50">$</th>
|
||||||
|
<th width="30">In store</th>
|
||||||
|
<th width="70">Shipping</th>
|
||||||
|
<th width="100">Publication Date</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Boris Godunov</td>
|
||||||
|
<td>Alexandr Pushkin</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">7.15</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">1 Hour</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">01/01/1999</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>The Rainmaker</td>
|
||||||
|
<td>John Grisham</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">7.99</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="0">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="48">2 Days</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">12/01/2001</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>The Green Mile</td>
|
||||||
|
<td>Stephen King</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">11.10</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="24">24 Hours</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">01/01/1992</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Misery</td>
|
||||||
|
<td>Stephen King</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">7.70</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="na">na</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">01/01/2003</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>The Dark Half</td>
|
||||||
|
<td>Stephen King</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">0</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="48">2 Days</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">10/30/1999</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>The Partner</td>
|
||||||
|
<td>John Grisham</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">12.99</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="0">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="24">24 Hours</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">01/01/2005</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>It</td>
|
||||||
|
<td>Stephen King</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">9.70</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="0">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="12">12 Hours</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">10/15/2001</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cousin Bette</td>
|
||||||
|
<td>Honore de Balzac</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">0</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">1 Hour</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">12/01/1991</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>The Testament</td>
|
||||||
|
<td>John Grisham</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">19.10</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="48">2 Days</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">12/17/1999</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Eugene Onegin</td>
|
||||||
|
<td>Alexandr Pushkin</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">11.20</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="0">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="24">24 Hours</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">09/27/2005</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Dark Avenues</td>
|
||||||
|
<td>Ivan Bunin</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">14.96</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">1 Hour</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">10/01/2008</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Father Goriot</td>
|
||||||
|
<td>Honore de Balzac</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">9.99</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="0">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="48">2 Days</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">06/06/2010</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>The Captain's Daughter</td>
|
||||||
|
<td>Alexandr Pushkin</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">10.21</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="0">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="48">2 Days</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">03/01/2001</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hamlet</td>
|
||||||
|
<td>William Shakespeare</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">5.99</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="0">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">1 Hour</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">04/15/2003</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>The Village</td>
|
||||||
|
<td>Ivan Bunin</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">11.66</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="24">24 Hours</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">01/02/2010</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>The Winter's Tale</td>
|
||||||
|
<td>William Shakespeare</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">19.31</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">1 Hour</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">02/12/2010</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>The Black Sheep</td>
|
||||||
|
<td>Honore de Balzac</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">16.00</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="0">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">1 Hour</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">08/28/1976</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Lost Illusions</td>
|
||||||
|
<td>Honore de Balzac</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">8.0</div>
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="1">
|
||||||
|
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||||
|
</td>
|
||||||
|
<td data-tf-sortKey="na">na</td>
|
||||||
|
<td>
|
||||||
|
<div align="right">07/10/2010</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<script src="../dist/tablefilter/tablefilter.js"></script>
|
||||||
|
<script data-config>
|
||||||
|
var tfConfig = {
|
||||||
|
base_path: '../dist/tablefilter/',
|
||||||
|
filters_row_index: 2,
|
||||||
|
headers_row_index: 1,
|
||||||
|
sort: true,
|
||||||
|
col_number_format: [
|
||||||
|
null, null, 'US',
|
||||||
|
null, null, null
|
||||||
|
],
|
||||||
|
col_date_type: [
|
||||||
|
null, null, null,
|
||||||
|
null, null, 'mdy'
|
||||||
|
],
|
||||||
|
rows_counter: true,
|
||||||
|
rows_counter_text: 'Books: ',
|
||||||
|
alternate_rows: true,
|
||||||
|
btn_reset: true,
|
||||||
|
mark_active_columns: true,
|
||||||
|
|
||||||
|
/* Filter types*/
|
||||||
|
col_3: 'select',
|
||||||
|
col_4: 'select',
|
||||||
|
|
||||||
|
/* delegate for filtering 'In store' column */
|
||||||
|
custom_cell_data_cols: [3],
|
||||||
|
custom_cell_data: function(o, cell, colIndex){
|
||||||
|
if(colIndex === 3){
|
||||||
|
var chk = cell.getElementsByTagName('input')[0];
|
||||||
|
if(!chk){
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
if(chk.checked){
|
||||||
|
return 'yes';
|
||||||
|
} else {
|
||||||
|
return 'no';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/* Custom options for 'Shipping' column */
|
||||||
|
custom_options: {
|
||||||
|
cols: [4],
|
||||||
|
texts: [
|
||||||
|
['1 Hour','12 Hours','24 Hours','2 Days','na']
|
||||||
|
],
|
||||||
|
values: [
|
||||||
|
['1 Hour','12 Hours','24 Hours','2 Days','na']
|
||||||
|
],
|
||||||
|
sorts: [false]
|
||||||
|
},
|
||||||
|
|
||||||
|
/* theme */
|
||||||
|
themes: [{ name: 'default' }],
|
||||||
|
|
||||||
|
extensions: [{ name: 'sort' }]
|
||||||
|
};
|
||||||
|
|
||||||
|
var tf = new TableFilter('books', tfConfig, 2);
|
||||||
|
tf.init();
|
||||||
|
|
||||||
|
// TableFilter themes
|
||||||
|
var THEMES = {
|
||||||
|
'default': tf.themesPath + 'default/default.css',
|
||||||
|
'mytheme': tf.themesPath + 'mytheme/mytheme.css',
|
||||||
|
'skyblue': tf.themesPath + 'skyblue/skyblue.css'
|
||||||
|
};
|
||||||
|
|
||||||
|
function changeTheme(name){
|
||||||
|
var stylesheet = tf.getStylesheet('default');
|
||||||
|
stylesheet.href = THEMES[name];
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var configs = document.querySelectorAll('script[data-config]');
|
||||||
|
var pre = document.body.getElementsByTagName('pre')[0];
|
||||||
|
|
||||||
|
[].forEach.call(configs, function(config) {
|
||||||
|
if(pre){
|
||||||
|
pre.innerHTML +=
|
||||||
|
config.innerHTML.replace('<', '<').replace('>', '>');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
71
dist/TF_Modules/tf_alternateRows.js
vendored
|
@ -1,71 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Alternating rows color feature v1.0
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.SetRowBg = function(rIndex,index)
|
|
||||||
/*====================================================
|
|
||||||
- sets row background color
|
|
||||||
- Params:
|
|
||||||
- rIndex: row index (numeric value)
|
|
||||||
- index: valid row collection index needed to
|
|
||||||
calculate bg color
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.alternateBgs || isNaN(rIndex)) return;
|
|
||||||
var rows = this.tbl.rows;
|
|
||||||
var i = (index==undefined) ? rIndex : index;
|
|
||||||
this.RemoveRowBg(rIndex);
|
|
||||||
tf_AddClass(
|
|
||||||
rows[rIndex],
|
|
||||||
(i%2) ? this.rowBgEvenCssClass : this.rowBgOddCssClass
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.RemoveRowBg = function(index)
|
|
||||||
/*====================================================
|
|
||||||
- removes row background color
|
|
||||||
- Params:
|
|
||||||
- index: row index (numeric value)
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(isNaN(index)) return;
|
|
||||||
var rows = this.tbl.rows;
|
|
||||||
tf_RemoveClass(rows[index],this.rowBgOddCssClass);
|
|
||||||
tf_RemoveClass(rows[index],this.rowBgEvenCssClass);
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.SetAlternateRows = function()
|
|
||||||
/*====================================================
|
|
||||||
- alternates row colors for better readability
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if( !this.hasGrid && !this.isFirstLoad ) return;
|
|
||||||
var rows = this.tbl.rows;
|
|
||||||
var noValidRowsIndex = this.validRowsIndex==null;
|
|
||||||
var beginIndex = (noValidRowsIndex) ? this.refRow : 0; //1st index
|
|
||||||
var indexLen = (noValidRowsIndex) // nb indexes
|
|
||||||
? (this.nbFilterableRows+beginIndex) : this.validRowsIndex.length;
|
|
||||||
|
|
||||||
var idx = 0;
|
|
||||||
for(var j=beginIndex; j<indexLen; j++)//alternates bg color
|
|
||||||
{
|
|
||||||
var rIndex = (noValidRowsIndex) ? j : this.validRowsIndex[j];
|
|
||||||
this.SetRowBg(rIndex,idx);
|
|
||||||
idx++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.RemoveAlternateRows = function()
|
|
||||||
/*====================================================
|
|
||||||
- removes alternate row colors
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.hasGrid) return;
|
|
||||||
var row = this.tbl.rows;
|
|
||||||
for(var i=this.refRow; i<this.nbRows; i++)
|
|
||||||
this.RemoveRowBg(i);
|
|
||||||
this.isStartBgAlternate = true;
|
|
||||||
}
|
|
271
dist/TF_Modules/tf_colOps.js
vendored
|
@ -1,271 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Columns Operations feature v1.0
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
- Special credit to Nuovella Williams
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.SetColOperation = function()
|
|
||||||
/*====================================================
|
|
||||||
- Calculates values of a column
|
|
||||||
- params are stored in 'colOperation' table's
|
|
||||||
attribute
|
|
||||||
- colOperation['id'] contains ids of elements
|
|
||||||
showing result (array)
|
|
||||||
- colOperation['col'] contains index of
|
|
||||||
columns (array)
|
|
||||||
- colOperation['operation'] contains operation
|
|
||||||
type (array, values: sum, mean)
|
|
||||||
- colOperation['write_method'] array defines
|
|
||||||
which method to use for displaying the
|
|
||||||
result (innerHTML, setValue, createTextNode).
|
|
||||||
Note that innerHTML is the default value.
|
|
||||||
- colOperation['tot_row_index'] defines in
|
|
||||||
which row results are displayed (integers array)
|
|
||||||
|
|
||||||
- changes made by nuovella:
|
|
||||||
(1) optimized the routine (now it will only
|
|
||||||
process each column once),
|
|
||||||
(2) added calculations for the median, lower and
|
|
||||||
upper quartile.
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if( !this.isFirstLoad && !this.hasGrid ) return;
|
|
||||||
|
|
||||||
if(this.onBeforeOperation) this.onBeforeOperation.call(null,this);
|
|
||||||
|
|
||||||
var labelId = this.colOperation['id'];
|
|
||||||
var colIndex = this.colOperation['col'];
|
|
||||||
var operation = this.colOperation['operation'];
|
|
||||||
var outputType = this.colOperation['write_method'];
|
|
||||||
var totRowIndex = this.colOperation['tot_row_index'];
|
|
||||||
var excludeRow = this.colOperation['exclude_row'];
|
|
||||||
var decimalPrecision = this.colOperation['decimal_precision']!=undefined
|
|
||||||
? this.colOperation['decimal_precision'] : 2;
|
|
||||||
|
|
||||||
//nuovella: determine unique list of columns to operate on
|
|
||||||
var ucolIndex =[];
|
|
||||||
var ucolMax=0;
|
|
||||||
|
|
||||||
ucolIndex[ucolMax]=colIndex[0];
|
|
||||||
|
|
||||||
for(var i=1; i<colIndex.length; i++)
|
|
||||||
{
|
|
||||||
saved=0;
|
|
||||||
//see if colIndex[i] is already in the list of unique indexes
|
|
||||||
for(var j=0; j<=ucolMax; j++ )
|
|
||||||
{
|
|
||||||
if (ucolIndex[j]==colIndex[i])
|
|
||||||
saved=1;
|
|
||||||
}
|
|
||||||
if (saved==0)
|
|
||||||
{//if not saved then, save the index;
|
|
||||||
ucolMax++;
|
|
||||||
ucolIndex[ucolMax]=colIndex[i];
|
|
||||||
}
|
|
||||||
}// for i
|
|
||||||
|
|
||||||
if( (typeof labelId).tf_LCase()=='object'
|
|
||||||
&& (typeof colIndex).tf_LCase()=='object'
|
|
||||||
&& (typeof operation).tf_LCase()=='object' )
|
|
||||||
{
|
|
||||||
var row = this.tbl.rows;
|
|
||||||
var colvalues = [];
|
|
||||||
|
|
||||||
for(var ucol=0; ucol<=ucolMax; ucol++)
|
|
||||||
{
|
|
||||||
//this retrieves col values
|
|
||||||
//use ucolIndex because we only want to pass through this loop once for each column
|
|
||||||
//get the values in this unique column
|
|
||||||
colvalues.push( this.GetColValues(ucolIndex[ucol],true,excludeRow) );
|
|
||||||
|
|
||||||
//next: calculate all operations for this column
|
|
||||||
var result, nbvalues=0, temp;
|
|
||||||
var meanValue=0, sumValue=0, minValue=null, maxValue=null, q1Value=null, medValue=null, q3Value=null;
|
|
||||||
var meanFlag=0, sumFlag=0, minFlag=0, maxFlag=0, q1Flag=0, medFlag=0, q3Flag=0;
|
|
||||||
var theList=[];
|
|
||||||
var opsThisCol=[], decThisCol=[], labThisCol=[], oTypeThisCol=[];
|
|
||||||
var mThisCol=-1;
|
|
||||||
|
|
||||||
for(var i=0; i<colIndex.length; i++)
|
|
||||||
{
|
|
||||||
if (colIndex[i]==ucolIndex[ucol])
|
|
||||||
{
|
|
||||||
mThisCol++;
|
|
||||||
opsThisCol[mThisCol]=operation[i].tf_LCase();
|
|
||||||
decThisCol[mThisCol]=decimalPrecision[i];
|
|
||||||
labThisCol[mThisCol]=labelId[i];
|
|
||||||
oTypeThisCol = (outputType != undefined && (typeof outputType).tf_LCase()=='object')
|
|
||||||
? outputType[i] : null;
|
|
||||||
|
|
||||||
switch( opsThisCol[mThisCol] )
|
|
||||||
{
|
|
||||||
case 'mean':
|
|
||||||
meanFlag=1;
|
|
||||||
break;
|
|
||||||
case 'sum':
|
|
||||||
sumFlag=1;
|
|
||||||
break;
|
|
||||||
case 'min':
|
|
||||||
minFlag=1;
|
|
||||||
break;
|
|
||||||
case 'max':
|
|
||||||
maxFlag=1;
|
|
||||||
break;
|
|
||||||
case 'median':
|
|
||||||
medFlag=1;
|
|
||||||
break;
|
|
||||||
case 'q1':
|
|
||||||
q1Flag=1;
|
|
||||||
break;
|
|
||||||
case 'q3':
|
|
||||||
q3Flag=1;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for(var j=0; j<colvalues[ucol].length; j++ )
|
|
||||||
{
|
|
||||||
if ((q1Flag==1)||(q3Flag==1) || (medFlag==1))
|
|
||||||
{//sort the list for calculation of median and quartiles
|
|
||||||
if (j<colvalues[ucol].length -1)
|
|
||||||
{
|
|
||||||
for(k=j+1;k<colvalues[ucol].length; k++) {
|
|
||||||
|
|
||||||
if( eval(colvalues[ucol][k]) < eval(colvalues[ucol][j]))
|
|
||||||
{
|
|
||||||
temp = colvalues[ucol][j];
|
|
||||||
colvalues[ucol][j] = colvalues[ucol][k];
|
|
||||||
colvalues[ucol][k] = temp;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var cvalue = parseFloat(colvalues[ucol][j]);
|
|
||||||
theList[j]=parseFloat( cvalue );
|
|
||||||
|
|
||||||
if( !isNaN(cvalue) )
|
|
||||||
{
|
|
||||||
nbvalues++;
|
|
||||||
if ((sumFlag==1)|| (meanFlag==1)) sumValue += parseFloat( cvalue );
|
|
||||||
if (minFlag==1)
|
|
||||||
{
|
|
||||||
if (minValue==null)
|
|
||||||
{
|
|
||||||
minValue = parseFloat( cvalue );
|
|
||||||
}
|
|
||||||
else minValue= parseFloat( cvalue )<minValue? parseFloat( cvalue ): minValue;
|
|
||||||
}
|
|
||||||
if (maxFlag==1) {
|
|
||||||
if (maxValue==null)
|
|
||||||
{maxValue = parseFloat( cvalue );}
|
|
||||||
else {maxValue= parseFloat( cvalue )>maxValue? parseFloat( cvalue ): maxValue;}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}//for j
|
|
||||||
if (meanFlag==1) meanValue = sumValue/nbvalues;
|
|
||||||
if (medFlag==1)
|
|
||||||
{
|
|
||||||
var aux = 0;
|
|
||||||
if(nbvalues%2 == 1)
|
|
||||||
{
|
|
||||||
aux = Math.floor(nbvalues/2);
|
|
||||||
medValue = theList[aux];
|
|
||||||
}
|
|
||||||
else medValue = (theList[nbvalues/2]+theList[((nbvalues/2)-1)])/2;
|
|
||||||
}
|
|
||||||
if (q1Flag==1)
|
|
||||||
{
|
|
||||||
var posa=0.0;
|
|
||||||
posa = Math.floor(nbvalues/4);
|
|
||||||
if (4*posa == nbvalues) {q1Value = (theList[posa-1] + theList[posa])/2;}
|
|
||||||
else {q1Value = theList[posa];}
|
|
||||||
}
|
|
||||||
if (q3Flag==1)
|
|
||||||
{
|
|
||||||
var posa=0.0;
|
|
||||||
var posb=0.0;
|
|
||||||
posa = Math.floor(nbvalues/4);
|
|
||||||
if (4*posa == nbvalues)
|
|
||||||
{
|
|
||||||
posb = 3*posa;
|
|
||||||
q3Value = (theList[posb] + theList[posb-1])/2;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
q3Value = theList[nbvalues-posa-1];
|
|
||||||
}
|
|
||||||
|
|
||||||
for(var i=0; i<=mThisCol; i++ )
|
|
||||||
{
|
|
||||||
switch( opsThisCol[i] )
|
|
||||||
{
|
|
||||||
case 'mean':
|
|
||||||
result=meanValue;
|
|
||||||
break;
|
|
||||||
case 'sum':
|
|
||||||
result=sumValue;
|
|
||||||
break;
|
|
||||||
case 'min':
|
|
||||||
result=minValue;
|
|
||||||
break;
|
|
||||||
case 'max':
|
|
||||||
result=maxValue;
|
|
||||||
break;
|
|
||||||
case 'median':
|
|
||||||
result=medValue;
|
|
||||||
break;
|
|
||||||
case 'q1':
|
|
||||||
result=q1Value;
|
|
||||||
break;
|
|
||||||
case 'q3':
|
|
||||||
result=q3Value;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
var precision = decThisCol[i]!=undefined && !isNaN( decThisCol[i] )
|
|
||||||
? decThisCol[i] : 2;
|
|
||||||
|
|
||||||
if(oTypeThisCol!=null && result)
|
|
||||||
{//if outputType is defined
|
|
||||||
result = result.toFixed( precision );
|
|
||||||
if( tf_Id( labThisCol[i] )!=undefined )
|
|
||||||
{
|
|
||||||
switch( oTypeThisCol.tf_LCase() )
|
|
||||||
{
|
|
||||||
case 'innerhtml':
|
|
||||||
if (isNaN(result) || !isFinite(result) || (nbvalues==0))
|
|
||||||
tf_Id( labThisCol[i] ).innerHTML = '.';
|
|
||||||
else
|
|
||||||
tf_Id( labThisCol[i] ).innerHTML = result;
|
|
||||||
break;
|
|
||||||
case 'setvalue':
|
|
||||||
tf_Id( labThisCol[i] ).value = result;
|
|
||||||
break;
|
|
||||||
case 'createtextnode':
|
|
||||||
var oldnode = tf_Id( labThisCol[i] ).firstChild;
|
|
||||||
var txtnode = tf_CreateText( result );
|
|
||||||
tf_Id( labThisCol[i] ).replaceChild( txtnode,oldnode );
|
|
||||||
break;
|
|
||||||
}//switch
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
try
|
|
||||||
{
|
|
||||||
if (isNaN(result) || !isFinite(result) || (nbvalues==0))
|
|
||||||
tf_Id( labThisCol[i] ).innerHTML = '.';
|
|
||||||
else
|
|
||||||
tf_Id( labThisCol[i] ).innerHTML = result.toFixed( precision );
|
|
||||||
} catch(e){ }//catch
|
|
||||||
}//else
|
|
||||||
}//for i
|
|
||||||
//eventual row(s) with result are always visible
|
|
||||||
if(totRowIndex!=undefined && row[totRowIndex[ucol]])
|
|
||||||
row[totRowIndex[ucol]].style.display = '';
|
|
||||||
}//for ucol
|
|
||||||
}//if typeof
|
|
||||||
|
|
||||||
if(this.onAfterOperation) this.onAfterOperation.call(null,this);
|
|
||||||
}
|
|
||||||
|
|
163
dist/TF_Modules/tf_cookies.js
vendored
|
@ -1,163 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Remember values features (cookies) v1.1
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.RememberFiltersValue = function( name )
|
|
||||||
/*==============================================
|
|
||||||
- stores filters' values in a cookie
|
|
||||||
when Filter() method is called
|
|
||||||
- Params:
|
|
||||||
- name: cookie name (string)
|
|
||||||
- credits to Florent Hirchy
|
|
||||||
===============================================*/
|
|
||||||
{
|
|
||||||
var flt_values = [];
|
|
||||||
for(var i=0; i<this.fltIds.length; i++)
|
|
||||||
{//creates an array with filters' values
|
|
||||||
value = this.GetFilterValue(i);
|
|
||||||
if (value == '') value = ' ';
|
|
||||||
flt_values.push(value);
|
|
||||||
}
|
|
||||||
flt_values.push(this.fltIds.length); //adds array size
|
|
||||||
tf_WriteCookie(
|
|
||||||
name,
|
|
||||||
flt_values.join(this.separator),
|
|
||||||
this.cookieDuration
|
|
||||||
); //writes cookie
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.RememberPageNb = function( name )
|
|
||||||
/*==============================================
|
|
||||||
- stores page number value in a cookie
|
|
||||||
when ChangePage method is called
|
|
||||||
- Params:
|
|
||||||
- name: cookie name (string)
|
|
||||||
===============================================*/
|
|
||||||
{
|
|
||||||
tf_WriteCookie(
|
|
||||||
name,
|
|
||||||
this.currentPageNb,
|
|
||||||
this.cookieDuration
|
|
||||||
); //writes cookie
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.RememberPageLength = function( name )
|
|
||||||
/*==============================================
|
|
||||||
- stores page length value in a cookie
|
|
||||||
when ChangePageLength method is called
|
|
||||||
- Params:
|
|
||||||
- name: cookie name (string)
|
|
||||||
===============================================*/
|
|
||||||
{
|
|
||||||
tf_WriteCookie(
|
|
||||||
name,
|
|
||||||
this.resultsPerPageSlc.selectedIndex,
|
|
||||||
this.cookieDuration
|
|
||||||
); //writes cookie
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.ResetValues = function()
|
|
||||||
{
|
|
||||||
this.EvtManager(this.Evt.name.resetvalues);
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype._ResetValues = function()
|
|
||||||
/*==============================================
|
|
||||||
- re-sets grid values when page is
|
|
||||||
re-loaded. It invokes ResetGridValues,
|
|
||||||
ResetPage and ResetPageLength methods
|
|
||||||
- Params:
|
|
||||||
- name: cookie name (string)
|
|
||||||
===============================================*/
|
|
||||||
{
|
|
||||||
if(this.rememberGridValues && this.fillSlcOnDemand) //only fillSlcOnDemand
|
|
||||||
this.ResetGridValues(this.fltsValuesCookie);
|
|
||||||
if(this.rememberPageLen) this.ResetPageLength( this.pgLenCookie );
|
|
||||||
if(this.rememberPageNb) this.ResetPage( this.pgNbCookie );
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.ResetGridValues = function( name )
|
|
||||||
/*==============================================
|
|
||||||
- re-sets filters' values when page is
|
|
||||||
re-loaded if load on demand is enabled
|
|
||||||
- Params:
|
|
||||||
- name: cookie name (string)
|
|
||||||
- credits to Florent Hirchy
|
|
||||||
===============================================*/
|
|
||||||
{
|
|
||||||
if(!this.fillSlcOnDemand) return;
|
|
||||||
var flts = tf_ReadCookie(name); //reads the cookie
|
|
||||||
var reg = new RegExp(this.separator,'g');
|
|
||||||
var flts_values = flts.split(reg); //creates an array with filters' values
|
|
||||||
var slcFltsIndex = this.GetFiltersByType(this.fltTypeSlc, true);
|
|
||||||
var multiFltsIndex = this.GetFiltersByType(this.fltTypeMulti, true);
|
|
||||||
|
|
||||||
if(flts_values[(flts_values.length-1)] == this.fltIds.length)
|
|
||||||
{//if the number of columns is the same as before page reload
|
|
||||||
for(var i=0; i<(flts_values.length - 1); i++)
|
|
||||||
{
|
|
||||||
if (flts_values[i]==' ') continue;
|
|
||||||
if(this['col'+i]==this.fltTypeSlc || this['col'+i]==this.fltTypeMulti)
|
|
||||||
{// if fillSlcOnDemand, drop-down needs to contain stored value(s) for filtering
|
|
||||||
var slc = tf_Id( this.fltIds[i] );
|
|
||||||
slc.options[0].selected = false;
|
|
||||||
|
|
||||||
if( slcFltsIndex.tf_Has(i) )
|
|
||||||
{//selects
|
|
||||||
var opt = tf_CreateOpt(flts_values[i],flts_values[i],true);
|
|
||||||
slc.appendChild(opt);
|
|
||||||
this.hasStoredValues = true;
|
|
||||||
}
|
|
||||||
if(multiFltsIndex.tf_Has(i))
|
|
||||||
{//multiple select
|
|
||||||
var s = flts_values[i].split(' '+this.orOperator+' ');
|
|
||||||
for(j=0; j<s.length; j++)
|
|
||||||
{
|
|
||||||
if(s[j]=='') continue;
|
|
||||||
var opt = tf_CreateOpt(s[j],s[j],true);
|
|
||||||
slc.appendChild(opt);
|
|
||||||
this.hasStoredValues = true;
|
|
||||||
|
|
||||||
if(tf_isIE)
|
|
||||||
{// IE multiple selection work-around
|
|
||||||
this.__deferMultipleSelection(slc,j,false);
|
|
||||||
hasStoredValues = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}// if multiFltsIndex
|
|
||||||
}
|
|
||||||
else if(this['col'+i]==this.fltTypeCheckList)
|
|
||||||
{
|
|
||||||
var divChk = this.checkListDiv[i];
|
|
||||||
divChk.title = divChk.innerHTML;
|
|
||||||
divChk.innerHTML = '';
|
|
||||||
|
|
||||||
var ul = tf_CreateElm('ul',['id',this.fltIds[i]],['colIndex',i]);
|
|
||||||
ul.className = this.checkListCssClass;
|
|
||||||
|
|
||||||
var li0 = tf_CreateCheckItem(this.fltIds[i]+'_0', '', this.displayAllText);
|
|
||||||
li0.className = this.checkListItemCssClass;
|
|
||||||
ul.appendChild(li0);
|
|
||||||
|
|
||||||
divChk.appendChild(ul);
|
|
||||||
|
|
||||||
var s = flts_values[i].split(' '+this.orOperator+' ');
|
|
||||||
for(j=0; j<s.length; j++)
|
|
||||||
{
|
|
||||||
if(s[j]=='') continue;
|
|
||||||
var li = tf_CreateCheckItem(this.fltIds[i]+'_'+(j+1), s[j], s[j]);
|
|
||||||
li.className = this.checkListItemCssClass;
|
|
||||||
ul.appendChild(li);
|
|
||||||
li.check.checked = true;
|
|
||||||
this.__setCheckListValues(li.check);
|
|
||||||
this.hasStoredValues = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}//end for
|
|
||||||
|
|
||||||
if(!this.hasStoredValues && this.paging) this.SetPagingInfo();
|
|
||||||
}//end if
|
|
||||||
}
|
|
53
dist/TF_Modules/tf_extensions.js
vendored
|
@ -1,53 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Extensions loading feature v1.0
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.LoadExtensions = function()
|
|
||||||
{
|
|
||||||
if(!this.Ext){
|
|
||||||
/*** TF extensions ***/
|
|
||||||
var o = this;
|
|
||||||
this.Ext = {
|
|
||||||
list: {},
|
|
||||||
add: function(extName, extDesc, extPath, extCallBack)
|
|
||||||
{
|
|
||||||
var file = extPath.split('/')[extPath.split('/').length-1];
|
|
||||||
var re = new RegExp(file);
|
|
||||||
var path = extPath.replace(re,'');
|
|
||||||
o.Ext.list[extName] = {
|
|
||||||
name: extName,
|
|
||||||
description: extDesc,
|
|
||||||
file: file,
|
|
||||||
path: path,
|
|
||||||
callback: extCallBack
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
this.EvtManager(this.Evt.name.loadextensions);
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype._LoadExtensions = function()
|
|
||||||
/*====================================================
|
|
||||||
- loads TF extensions
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.hasExtensions) return;
|
|
||||||
if(tf_IsArray(this.extensions.name) && tf_IsArray(this.extensions.src)){
|
|
||||||
var ext = this.extensions;
|
|
||||||
for(var e=0; e<ext.name.length; e++){
|
|
||||||
var extPath = ext.src[e];
|
|
||||||
var extName = ext.name[e];
|
|
||||||
var extInit = (ext.initialize && ext.initialize[e]) ? ext.initialize[e] : null;
|
|
||||||
var extDesc = (ext.description && ext.description[e] ) ? ext.description[e] : null;
|
|
||||||
|
|
||||||
//Registers extension
|
|
||||||
this.Ext.add(extName, extDesc, extPath, extInit);
|
|
||||||
if(tf_IsImported(extPath)) extInit.call(null,this);
|
|
||||||
else this.IncludeFile(extName, extPath, extInit);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
253
dist/TF_Modules/tf_ezEditTable.js
vendored
|
@ -1,253 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- ezEditTable Adapter v1.1
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.SetEditable = function()
|
|
||||||
/*====================================================
|
|
||||||
- Sets selection or edition features by loading
|
|
||||||
ezEditTable script by Max Guglielmi
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.selectable && !this.editable){ return; }
|
|
||||||
var f = this.fObj;
|
|
||||||
this.ezEditTableConfig = f.ezEditTable_config!=undefined ? f.ezEditTable_config : {};
|
|
||||||
this.ezEditTableConfig.name = this.ezEditTableConfig['name']!=undefined ? f.ezEditTable_config.name : 'ezedittable';
|
|
||||||
this.ezEditTableConfig.src = this.ezEditTableConfig['src']!=undefined ? f.ezEditTable_config.src : this.basePath+'ezEditTable/ezEditTable.js';
|
|
||||||
//ezEditTable stylesheet not imported by default as filtergrid.css applies
|
|
||||||
this.ezEditTableConfig.loadStylesheet = this.ezEditTableConfig['loadStylesheet']!=undefined ? f.ezEditTable_config.loadStylesheet : false;
|
|
||||||
this.ezEditTableConfig.stylesheet = this.ezEditTableConfig['stylesheet']!=undefined ? f.ezEditTable_config.stylesheet : this.basePath+'ezEditTable/ezEditTable.css';
|
|
||||||
this.ezEditTableConfig.stylesheetName = this.ezEditTableConfig['stylesheetName']!=undefined ? f.ezEditTable_config.stylesheetName : 'ezEditTableCss';
|
|
||||||
this.ezEditTableConfig.err = 'Failed to instantiate EditTable object.\n"ezEditTable" module may not be available.';
|
|
||||||
|
|
||||||
if(tf_IsImported(this.ezEditTableConfig.src)){
|
|
||||||
this._EnableEditable();
|
|
||||||
} else {
|
|
||||||
this.IncludeFile(
|
|
||||||
this.ezEditTableConfig.name,
|
|
||||||
this.ezEditTableConfig.src,
|
|
||||||
this._EnableEditable
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if(this.ezEditTableConfig.loadStylesheet && !tf_IsImported(this.ezEditTableConfig.stylesheet, 'link')){
|
|
||||||
this.IncludeFile(
|
|
||||||
this.ezEditTableConfig.stylesheetName,
|
|
||||||
this.ezEditTableConfig.stylesheet,
|
|
||||||
null, 'link'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.RemoveEditable = function()
|
|
||||||
/*====================================================
|
|
||||||
- Removes selection or edition features
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(this.ezEditTable){
|
|
||||||
if(this.selectable){
|
|
||||||
this.ezEditTable.Selection.ClearSelections();
|
|
||||||
this.ezEditTable.Selection.Remove();
|
|
||||||
}
|
|
||||||
if(this.editable) this.ezEditTable.Editable.Remove();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.ResetEditable = function()
|
|
||||||
/*====================================================
|
|
||||||
- Resets selection or edition features after
|
|
||||||
removal
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(this.ezEditTable){
|
|
||||||
if(this.selectable) this.ezEditTable.Selection.Set();
|
|
||||||
if(this.editable) this.ezEditTable.Editable.Set();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype._EnableEditable = function(o)
|
|
||||||
{
|
|
||||||
if(!o) o = this;
|
|
||||||
//start row for EditTable constructor needs to be calculated
|
|
||||||
var startRow;
|
|
||||||
var thead = tf_Tag(o.tbl,'thead');
|
|
||||||
//if thead exists and startRow not specified, startRow is calculated automatically by EditTable
|
|
||||||
if(thead.length > 0 && !o.ezEditTableConfig.startRow) startRow = undefined;
|
|
||||||
//otherwise startRow config property if any or TableFilter refRow
|
|
||||||
else startRow = o.ezEditTableConfig.startRow || o.refRow;
|
|
||||||
|
|
||||||
//Enables scroll into view feature if not defined
|
|
||||||
o.ezEditTableConfig.scroll_into_view = o.ezEditTableConfig.scroll_into_view!=undefined ? o.ezEditTableConfig.scroll_into_view : true;
|
|
||||||
o.ezEditTableConfig.base_path = o.ezEditTableConfig.base_path!=undefined ? o.ezEditTableConfig.base_path : o.basePath + 'ezEditTable/';
|
|
||||||
o.ezEditTableConfig.editable = o.editable;
|
|
||||||
o.ezEditTableConfig.selection = o.selectable;
|
|
||||||
if(o.selectable)
|
|
||||||
o.ezEditTableConfig.default_selection = o.ezEditTableConfig.default_selection!=undefined ? o.ezEditTableConfig.default_selection : 'row';
|
|
||||||
//CSS Styles
|
|
||||||
o.ezEditTableConfig.active_cell_css = o.ezEditTableConfig.active_cell_css!=undefined ? o.ezEditTableConfig.active_cell_css : 'ezETSelectedCell';
|
|
||||||
|
|
||||||
o._lastValidRowIndex = 0;
|
|
||||||
o._lastRowIndex = 0;
|
|
||||||
|
|
||||||
if(o.selectable){
|
|
||||||
//Row navigation needs to be calculated according to TableFilter's validRowsIndex array
|
|
||||||
function onAfterSelection(et, selecteElm, e){
|
|
||||||
if(!o.validRowsIndex) return; //table is not filtered
|
|
||||||
var row = et.defaultSelection != 'row' ? selecteElm.parentNode : selecteElm;
|
|
||||||
var cell = selecteElm.nodeName=='TD' ? selecteElm : null; //cell for default_selection = 'both' or 'cell'
|
|
||||||
var keyCode = e != undefined ? et.Event.GetKey(e) : 0;
|
|
||||||
var isRowValid = o.validRowsIndex.tf_Has(row.rowIndex);
|
|
||||||
var nextRowIndex;
|
|
||||||
var d = (keyCode == 34 || keyCode == 33 ? (o.pagingLength || et.nbRowsPerPage) : 1); //pgup/pgdown keys
|
|
||||||
|
|
||||||
//If next row is not valid, next valid filtered row needs to be calculated
|
|
||||||
if(!isRowValid){
|
|
||||||
//Selection direction up/down
|
|
||||||
if(row.rowIndex>o._lastRowIndex){
|
|
||||||
if(row.rowIndex >= o.validRowsIndex[o.validRowsIndex.length-1]) //last row
|
|
||||||
nextRowIndex = o.validRowsIndex[o.validRowsIndex.length-1];
|
|
||||||
else{
|
|
||||||
var calcRowIndex = (o._lastValidRowIndex + d);
|
|
||||||
if(calcRowIndex > (o.validRowsIndex.length-1))
|
|
||||||
nextRowIndex = o.validRowsIndex[o.validRowsIndex.length-1];
|
|
||||||
else nextRowIndex = o.validRowsIndex[calcRowIndex];
|
|
||||||
}
|
|
||||||
} else{
|
|
||||||
if(row.rowIndex < o.validRowsIndex[0]) nextRowIndex = o.validRowsIndex[0];//first row
|
|
||||||
else{
|
|
||||||
var v = o.validRowsIndex[o._lastValidRowIndex - d];
|
|
||||||
nextRowIndex = v ? v : o.validRowsIndex[0];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
o._lastRowIndex = row.rowIndex;
|
|
||||||
DoSelection(nextRowIndex);
|
|
||||||
} else{
|
|
||||||
//If filtered row is valid, special calculation for pgup/pgdown keys
|
|
||||||
if(keyCode!=34 && keyCode!=33){
|
|
||||||
o._lastValidRowIndex = o.validRowsIndex.tf_IndexByValue(row.rowIndex);
|
|
||||||
o._lastRowIndex = row.rowIndex;
|
|
||||||
} else {
|
|
||||||
if(keyCode == 34){ //pgdown
|
|
||||||
if((o._lastValidRowIndex + d) <= (o.validRowsIndex.length-1)) //last row
|
|
||||||
nextRowIndex = o.validRowsIndex[o._lastValidRowIndex + d];
|
|
||||||
else nextRowIndex = o.validRowsIndex[o.validRowsIndex.length-1];
|
|
||||||
} else { //pgup
|
|
||||||
if((o._lastValidRowIndex - d) < (o.validRowsIndex[0])) //first row
|
|
||||||
nextRowIndex = o.validRowsIndex[0];
|
|
||||||
else nextRowIndex = o.validRowsIndex[o._lastValidRowIndex - d];
|
|
||||||
}
|
|
||||||
o._lastRowIndex = nextRowIndex;
|
|
||||||
o._lastValidRowIndex = o.validRowsIndex.tf_IndexByValue(nextRowIndex);
|
|
||||||
DoSelection(nextRowIndex);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//Next valid filtered row needs to be selected
|
|
||||||
function DoSelection(nextRowIndex){
|
|
||||||
if(et.defaultSelection == 'row'){
|
|
||||||
et.Selection.SelectRowByIndex(nextRowIndex);
|
|
||||||
} else {
|
|
||||||
et.ClearSelections();
|
|
||||||
var cellIndex = selecteElm.cellIndex;
|
|
||||||
var row = o.tbl.rows[nextRowIndex];
|
|
||||||
if(et.defaultSelection == 'both') et.Selection.SelectRowByIndex(nextRowIndex);
|
|
||||||
if(row) et.Selection.SelectCell(row.cells[cellIndex]);
|
|
||||||
}
|
|
||||||
//Table is filtered
|
|
||||||
if(o.validRowsIndex.length != o.GetRowsNb()){
|
|
||||||
var row = o.tbl.rows[nextRowIndex];
|
|
||||||
if(row) row.scrollIntoView(false);
|
|
||||||
if(cell){
|
|
||||||
if(cell.cellIndex==(o.GetCellsNb()-1) && o.gridLayout) o.tblCont.scrollLeft = 100000000;
|
|
||||||
else if(cell.cellIndex==0 && o.gridLayout) o.tblCont.scrollLeft = 0;
|
|
||||||
else cell.scrollIntoView(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//Page navigation has to be enforced whenever selected row is out of the current page range
|
|
||||||
function onBeforeSelection(et, selecteElm, e){
|
|
||||||
var row = et.defaultSelection != 'row' ? selecteElm.parentNode : selecteElm;
|
|
||||||
if(o.paging){
|
|
||||||
if(o.nbPages>1){
|
|
||||||
et.nbRowsPerPage = o.pagingLength; //page length is re-assigned in case it has changed
|
|
||||||
var pagingEndRow = parseInt(o.startPagingRow) + parseInt(o.pagingLength);
|
|
||||||
var rowIndex = row.rowIndex;
|
|
||||||
if((rowIndex == o.validRowsIndex[o.validRowsIndex.length-1]) && o.currentPageNb!=o.nbPages) o.SetPage('last');
|
|
||||||
else if((rowIndex == o.validRowsIndex[0]) && o.currentPageNb!=1) o.SetPage('first');
|
|
||||||
else if(rowIndex > o.validRowsIndex[pagingEndRow-1] && rowIndex < o.validRowsIndex[o.validRowsIndex.length-1]) o.SetPage('next');
|
|
||||||
else if(rowIndex < o.validRowsIndex[o.startPagingRow] && rowIndex > o.validRowsIndex[0]) o.SetPage('previous');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//Selected row needs to be visible when paging is activated
|
|
||||||
if(o.paging){
|
|
||||||
o.onAfterChangePage = function(tf, i){
|
|
||||||
var row = tf.ezEditTable.Selection.GetActiveRow();
|
|
||||||
if(row) row.scrollIntoView(false);
|
|
||||||
var cell = tf.ezEditTable.Selection.GetActiveCell();
|
|
||||||
if(cell) cell.scrollIntoView(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//Rows navigation when rows are filtered is performed with the EditTable row selection callback events
|
|
||||||
if(o.ezEditTableConfig.default_selection=='row'){
|
|
||||||
var fnB = o.ezEditTableConfig.on_before_selected_row;
|
|
||||||
o.ezEditTableConfig.on_before_selected_row = function(){
|
|
||||||
onBeforeSelection(arguments[0], arguments[1], arguments[2]);
|
|
||||||
if(fnB) fnB.call(null, arguments[0], arguments[1], arguments[2]);
|
|
||||||
};
|
|
||||||
var fnA = o.ezEditTableConfig.on_after_selected_row;
|
|
||||||
o.ezEditTableConfig.on_after_selected_row = function(){
|
|
||||||
onAfterSelection(arguments[0], arguments[1], arguments[2]);
|
|
||||||
if(fnA) fnA.call(null, arguments[0], arguments[1], arguments[2]);
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
var fnB = o.ezEditTableConfig.on_before_selected_cell;
|
|
||||||
o.ezEditTableConfig.on_before_selected_cell = function(){
|
|
||||||
onBeforeSelection(arguments[0], arguments[1], arguments[2]);
|
|
||||||
if(fnB) fnB.call(null, arguments[0], arguments[1], arguments[2]);
|
|
||||||
};
|
|
||||||
var fnA = o.ezEditTableConfig.on_after_selected_cell;
|
|
||||||
o.ezEditTableConfig.on_after_selected_cell = function(){
|
|
||||||
onAfterSelection(arguments[0], arguments[1], arguments[2]);
|
|
||||||
if(fnA) fnA.call(null, arguments[0], arguments[1], arguments[2]);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(o.editable){
|
|
||||||
//Added or removed rows, TF rows number needs to be re-calculated
|
|
||||||
var fnC = o.ezEditTableConfig.on_added_dom_row;
|
|
||||||
o.ezEditTableConfig.on_added_dom_row = function(){
|
|
||||||
o.nbFilterableRows++;
|
|
||||||
if(!o.paging){ o.RefreshNbRows(); }
|
|
||||||
else {
|
|
||||||
o.nbRows++; o.nbVisibleRows++; o.nbFilterableRows++;
|
|
||||||
o.paging=false; o.RemovePaging(); o.AddPaging(false);
|
|
||||||
}
|
|
||||||
if(o.alternateBgs) o.SetAlternateRows();
|
|
||||||
if(fnC) fnC.call(null, arguments[0], arguments[1], arguments[2]);
|
|
||||||
};
|
|
||||||
if(o.ezEditTableConfig.actions && o.ezEditTableConfig.actions['delete']){
|
|
||||||
var fnD = o.ezEditTableConfig.actions['delete'].on_after_submit;
|
|
||||||
o.ezEditTableConfig.actions['delete'].on_after_submit = function(){
|
|
||||||
o.nbFilterableRows--;
|
|
||||||
if(!o.paging){ o.RefreshNbRows(); }
|
|
||||||
else {
|
|
||||||
o.nbRows--; o.nbVisibleRows--; o.nbFilterableRows--;
|
|
||||||
o.paging=false; o.RemovePaging(); o.AddPaging(false);
|
|
||||||
}
|
|
||||||
if(o.alternateBgs) o.SetAlternateRows();
|
|
||||||
if(fnD) fnD.call(null, arguments[0], arguments[1]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
try{
|
|
||||||
o.ezEditTable = new EditTable(o.id, o.ezEditTableConfig, startRow);
|
|
||||||
o.ezEditTable.Init();
|
|
||||||
} catch(e) { alert(o.ezEditTableConfig.err); }
|
|
||||||
}
|
|
95
dist/TF_Modules/tf_fixedHeaders.js
vendored
|
@ -1,95 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Fixed headers feature v1.0 - Deprecated!
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.SetFixedHeaders = function()
|
|
||||||
/*====================================================
|
|
||||||
- CSS solution making headers fixed
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if((!this.hasGrid && !this.isFirstLoad) || !this.fixedHeaders) return;
|
|
||||||
if(this.contDiv) return;
|
|
||||||
var thead = tf_Tag(this.tbl,'thead');
|
|
||||||
if( thead.length==0 ) return;
|
|
||||||
var tbody = tf_Tag(this.tbl,'tbody');
|
|
||||||
if( tbody[0].clientHeight!=0 )
|
|
||||||
{//firefox returns tbody height
|
|
||||||
//previous values
|
|
||||||
this.prevTBodyH = tbody[0].clientHeight;
|
|
||||||
this.prevTBodyOverflow = tbody[0].style.overflow;
|
|
||||||
this.prevTBodyOverflowX = tbody[0].style.overflowX;
|
|
||||||
|
|
||||||
tbody[0].style.height = this.tBodyH+'px';
|
|
||||||
tbody[0].style.overflow = 'auto';
|
|
||||||
tbody[0].style.overflowX = 'hidden';
|
|
||||||
} else { //IE returns 0
|
|
||||||
// cont div is added to emulate fixed headers behaviour
|
|
||||||
var contDiv = tf_CreateElm( 'div',['id',this.prfxContentDiv+this.id] );
|
|
||||||
contDiv.className = this.contDivCssClass;
|
|
||||||
this.tbl.parentNode.insertBefore(contDiv, this.tbl);
|
|
||||||
contDiv.appendChild(this.tbl);
|
|
||||||
this.contDiv = tf_Id(this.prfxContentDiv+this.id);
|
|
||||||
//prevents headers moving during window scroll (IE)
|
|
||||||
this.contDiv.style.position = 'relative';
|
|
||||||
|
|
||||||
var theadH = 0;
|
|
||||||
var theadTr = tf_Tag(thead[0],'tr');
|
|
||||||
for(var i=0; i<theadTr.length; i++)
|
|
||||||
{//css below emulates fixed headers on IE<=6
|
|
||||||
theadTr[i].style.cssText += 'position:relative; ' +
|
|
||||||
'top:expression(offsetParent.scrollTop);';
|
|
||||||
theadH += parseInt(theadTr[i].clientHeight);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.contDiv.style.height = (this.tBodyH+theadH)+'px';
|
|
||||||
|
|
||||||
var tfoot = tf_Tag(this.tbl,'tfoot');
|
|
||||||
if( tfoot.length==0 ) return;
|
|
||||||
|
|
||||||
var tfootTr = tf_Tag(tfoot[0],'tr');
|
|
||||||
|
|
||||||
for(var j=0; j<tfootTr.length; j++)//css below emulates fixed footer on IE<=6
|
|
||||||
tfootTr[j].style.cssText += 'position:relative; overflow-x: hidden; ' +
|
|
||||||
'top: expression(parentNode.parentNode.offsetHeight >= ' +
|
|
||||||
'offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + '+
|
|
||||||
'offsetParent.offsetHeight + offsetParent.scrollTop : 0);';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.RemoveFixedHeaders = function()
|
|
||||||
/*====================================================
|
|
||||||
- Removes fixed headers
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.hasGrid || !this.fixedHeaders ) return;
|
|
||||||
if( this.contDiv )//IE additional div
|
|
||||||
{
|
|
||||||
this.contDiv.parentNode.insertBefore(this.tbl, this.contDiv);
|
|
||||||
this.contDiv.parentNode.removeChild( this.contDiv );
|
|
||||||
this.contDiv = null;
|
|
||||||
var thead = tf_Tag(this.tbl,'thead');
|
|
||||||
if( thead.length==0 ) return;
|
|
||||||
var theadTr = tf_Tag(thead[0],'tr');
|
|
||||||
if( theadTr.length==0 ) return;
|
|
||||||
for(var i=0; i<theadTr.length; i++)
|
|
||||||
theadTr[i].style.cssText = '';
|
|
||||||
var tfoot = tf_Tag(this.tbl,'tfoot');
|
|
||||||
if( tfoot.length==0 ) return;
|
|
||||||
var tfootTr = tf_Tag(tfoot[0],'tr');
|
|
||||||
for(var j=0; j<tfootTr.length; j++)
|
|
||||||
{
|
|
||||||
tfootTr[j].style.position = 'relative';
|
|
||||||
tfootTr[j].style.top = '';
|
|
||||||
tfootTr[j].style.overeflowX = '';
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
var tbody = tf_Tag(this.tbl,'tbody');
|
|
||||||
if( tbody.length==0 ) return;
|
|
||||||
tbody[0].style.height = this.prevTBodyH+'px';
|
|
||||||
tbody[0].style.overflow = this.prevTBodyOverflow;
|
|
||||||
tbody[0].style.overflowX = this.prevTBodyOverflowX;
|
|
||||||
}
|
|
||||||
}
|
|
307
dist/TF_Modules/tf_gridLayout.js
vendored
|
@ -1,307 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Grid Layout feature v1.2
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.SetGridLayout = function()
|
|
||||||
/*====================================================
|
|
||||||
- generates a grid with fixed headers
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.gridLayout) return;
|
|
||||||
var f = this.fObj;
|
|
||||||
this.gridWidth = f.grid_width!=undefined ? f.grid_width : null; //defines grid width
|
|
||||||
this.gridHeight = f.grid_height!=undefined ? f.grid_height : null; //defines grid height
|
|
||||||
this.gridMainContCssClass = f.grid_cont_css_class!=undefined //defines css class for main container
|
|
||||||
? f.grid_cont_css_class : 'grd_Cont';
|
|
||||||
this.gridContCssClass = f.grid_tbl_cont_css_class!=undefined //defines css class for div containing table
|
|
||||||
? f.grid_tbl_cont_css_class : 'grd_tblCont';
|
|
||||||
this.gridHeadContCssClass = f.grid_tblHead_cont_css_class!=undefined //defines css class for div containing headers' table
|
|
||||||
? f.grid_tblHead_cont_css_class : 'grd_headTblCont';
|
|
||||||
this.gridInfDivCssClass = f.grid_inf_grid_css_class!=undefined //defines css class for div containing rows counter, paging etc.
|
|
||||||
? f.grid_inf_grid_css_class : 'grd_inf';
|
|
||||||
this.gridHeadRowIndex = f.grid_headers_row_index!=undefined //defines which row contains column headers
|
|
||||||
? f.grid_headers_row_index : 0;
|
|
||||||
this.gridHeadRows = f.grid_headers_rows!=undefined //array of headers row indexes to be placed in header table
|
|
||||||
? f.grid_headers_rows : [0];
|
|
||||||
this.gridEnableFilters = f.grid_enable_default_filters!=undefined
|
|
||||||
? f.grid_enable_default_filters : true; //generate filters in table headers
|
|
||||||
this.gridDefaultColWidth = f.grid_default_col_width!=undefined
|
|
||||||
? f.grid_default_col_width : '100px'; //default col width
|
|
||||||
this.gridEnableColResizer = f.grid_enable_cols_resizer!=undefined
|
|
||||||
? f.grid_enable_cols_resizer : true; //enables/disables columns resizer
|
|
||||||
this.gridColResizerPath = f.grid_cont_col_resizer_path!=undefined //defines col resizer script path
|
|
||||||
? f.grid_cont_col_resizer_path : this.basePath+'TFExt_ColsResizer/TFExt_ColsResizer.js';
|
|
||||||
|
|
||||||
if(!this.hasColWidth){// in case column widths are not set default width 100px
|
|
||||||
this.colWidth = [];
|
|
||||||
for(var k=0; k<this.nbCells; k++){
|
|
||||||
var colW, cell = this.tbl.rows[this.gridHeadRowIndex].cells[k];
|
|
||||||
if(cell.width!='') colW = cell.width;
|
|
||||||
else if(cell.style.width!='') colW = parseInt(cell.style.width);
|
|
||||||
else colW = this.gridDefaultColWidth;
|
|
||||||
this.colWidth[k] = colW;
|
|
||||||
}
|
|
||||||
this.hasColWidth = true;
|
|
||||||
}
|
|
||||||
this.SetColWidths(this.gridHeadRowIndex);
|
|
||||||
|
|
||||||
var tblW;//initial table width
|
|
||||||
if(this.tbl.width!='') tblW = this.tbl.width;
|
|
||||||
else if(this.tbl.style.width!='') tblW = parseInt(this.tbl.style.width);
|
|
||||||
else tblW = this.tbl.clientWidth;
|
|
||||||
|
|
||||||
//Main container: it will contain all the elements
|
|
||||||
this.tblMainCont = tf_CreateElm('div',['id', this.prfxMainTblCont + this.id]);
|
|
||||||
this.tblMainCont.className = this.gridMainContCssClass;
|
|
||||||
if(this.gridWidth) this.tblMainCont.style.width = this.gridWidth;
|
|
||||||
this.tbl.parentNode.insertBefore(this.tblMainCont, this.tbl);
|
|
||||||
|
|
||||||
//Table container: div wrapping content table
|
|
||||||
this.tblCont = tf_CreateElm('div',['id', this.prfxTblCont + this.id]);
|
|
||||||
this.tblCont.className = this.gridContCssClass;
|
|
||||||
if(this.gridWidth) this.tblCont.style.width = this.gridWidth;
|
|
||||||
if(this.gridHeight) this.tblCont.style.height = this.gridHeight;
|
|
||||||
this.tbl.parentNode.insertBefore(this.tblCont, this.tbl);
|
|
||||||
var t = this.tbl.parentNode.removeChild(this.tbl);
|
|
||||||
this.tblCont.appendChild(t);
|
|
||||||
|
|
||||||
//In case table width is expressed in %
|
|
||||||
if(this.tbl.style.width == '')
|
|
||||||
this.tbl.style.width = (this.__containsStr('%',tblW)
|
|
||||||
? this.tbl.clientWidth : tblW) + 'px';
|
|
||||||
|
|
||||||
var d = this.tblCont.parentNode.removeChild(this.tblCont);
|
|
||||||
this.tblMainCont.appendChild(d);
|
|
||||||
|
|
||||||
//Headers table container: div wrapping headers table
|
|
||||||
this.headTblCont = tf_CreateElm('div',['id', this.prfxHeadTblCont + this.id]);
|
|
||||||
this.headTblCont.className = this.gridHeadContCssClass;
|
|
||||||
if(this.gridWidth) this.headTblCont.style.width = this.gridWidth;
|
|
||||||
|
|
||||||
//Headers table
|
|
||||||
this.headTbl = tf_CreateElm('table',['id', this.prfxHeadTbl + this.id]);
|
|
||||||
var tH = tf_CreateElm('tHead'); //IE<7 needs it
|
|
||||||
|
|
||||||
//1st row should be headers row, ids are added if not set
|
|
||||||
//Those ids are used by the sort feature
|
|
||||||
var hRow = this.tbl.rows[this.gridHeadRowIndex];
|
|
||||||
var sortTriggers = [];
|
|
||||||
for(var n=0; n<this.nbCells; n++){
|
|
||||||
var cell = hRow.cells[n];
|
|
||||||
var thId = cell.getAttribute('id');
|
|
||||||
if(!thId || thId==''){
|
|
||||||
thId = this.prfxGridTh+n+'_'+this.id
|
|
||||||
cell.setAttribute('id', thId);
|
|
||||||
}
|
|
||||||
sortTriggers.push(thId);
|
|
||||||
}
|
|
||||||
|
|
||||||
//Filters row is created
|
|
||||||
var filtersRow = tf_CreateElm('tr');
|
|
||||||
if(this.gridEnableFilters && this.fltGrid){
|
|
||||||
this.externalFltTgtIds = [];
|
|
||||||
for(var j=0; j<this.nbCells; j++)
|
|
||||||
{
|
|
||||||
var fltTdId = this.prfxFlt+j+ this.prfxGridFltTd +this.id;
|
|
||||||
var c = tf_CreateElm(this.fltCellTag, ['id', fltTdId]);
|
|
||||||
filtersRow.appendChild(c);
|
|
||||||
this.externalFltTgtIds[j] = fltTdId;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//Headers row are moved from content table to headers table
|
|
||||||
for(var i=0; i<this.gridHeadRows.length; i++)
|
|
||||||
{
|
|
||||||
var headRow = this.tbl.rows[this.gridHeadRows[0]];
|
|
||||||
tH.appendChild(headRow);
|
|
||||||
}
|
|
||||||
this.headTbl.appendChild(tH);
|
|
||||||
if(this.filtersRowIndex == 0) tH.insertBefore(filtersRow,hRow);
|
|
||||||
else tH.appendChild(filtersRow);
|
|
||||||
|
|
||||||
this.headTblCont.appendChild(this.headTbl);
|
|
||||||
this.tblCont.parentNode.insertBefore(this.headTblCont, this.tblCont);
|
|
||||||
|
|
||||||
//THead needs to be removed in content table for sort feature
|
|
||||||
var thead = tf_Tag(this.tbl,'thead');
|
|
||||||
if( thead.length>0 ) this.tbl.removeChild(thead[0]);
|
|
||||||
|
|
||||||
//Headers table style
|
|
||||||
this.headTbl.style.width = this.tbl.style.width;
|
|
||||||
this.headTbl.style.tableLayout = 'fixed';
|
|
||||||
this.tbl.style.tableLayout = 'fixed';
|
|
||||||
this.headTbl.cellPadding = this.tbl.cellPadding;
|
|
||||||
this.headTbl.cellSpacing = this.tbl.cellSpacing;
|
|
||||||
|
|
||||||
//Headers container width
|
|
||||||
this.headTblCont.style.width = this.tblCont.clientWidth+'px';
|
|
||||||
|
|
||||||
//content table without headers needs col widths to be reset
|
|
||||||
this.SetColWidths();
|
|
||||||
|
|
||||||
this.tbl.style.width = '';
|
|
||||||
if(tf_isIE || tf_isIE7) this.headTbl.style.width = '';
|
|
||||||
|
|
||||||
//scroll synchronisation
|
|
||||||
var o = this; //TF object
|
|
||||||
this.tblCont.onscroll = function(){
|
|
||||||
o.headTblCont.scrollLeft = this.scrollLeft;
|
|
||||||
var _o = this; //this = scroll element
|
|
||||||
//New pointerX calc taking into account scrollLeft
|
|
||||||
if(!o.isPointerXOverwritten){
|
|
||||||
try{
|
|
||||||
TF.Evt.pointerX = function(e)
|
|
||||||
{
|
|
||||||
e = e || window.event;
|
|
||||||
var scrollLeft = tf_StandardBody().scrollLeft + _o.scrollLeft;
|
|
||||||
return (e.pageX + _o.scrollLeft) || (e.clientX + scrollLeft);
|
|
||||||
}
|
|
||||||
o.isPointerXOverwritten = true;
|
|
||||||
} catch(ee) {
|
|
||||||
o.isPointerXOverwritten = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*** Default behaviours activation ***/
|
|
||||||
var f = this.fObj==undefined ? {} : this.fObj;
|
|
||||||
|
|
||||||
//Sort is enabled if not specified in config object
|
|
||||||
if(f.sort != false){
|
|
||||||
this.sort = true;
|
|
||||||
this.sortConfig.asyncSort = true;
|
|
||||||
this.sortConfig.triggerIds = sortTriggers;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.gridEnableColResizer){
|
|
||||||
if(!this.hasExtensions){
|
|
||||||
this.extensions = {
|
|
||||||
name:['ColumnsResizer_'+this.id],
|
|
||||||
src:[this.gridColResizerPath],
|
|
||||||
description:['Columns Resizing'],
|
|
||||||
initialize:[function(o){ o.SetColsResizer('ColumnsResizer_'+o.id); }]
|
|
||||||
}
|
|
||||||
this.hasExtensions = true;
|
|
||||||
} else {
|
|
||||||
if(!this.__containsStr('colsresizer',this.extensions.src.toString().tf_LCase())){
|
|
||||||
this.extensions.name.push('ColumnsResizer_'+this.id);
|
|
||||||
this.extensions.src.push(this.gridColResizerPath);
|
|
||||||
this.extensions.description.push('Columns Resizing');
|
|
||||||
this.extensions.initialize.push(function(o){o.SetColsResizer('ColumnsResizer_'+o.id);});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//Default columns resizer properties for grid layout
|
|
||||||
f.col_resizer_cols_headers_table = this.headTbl.getAttribute('id');
|
|
||||||
f.col_resizer_cols_headers_index = this.gridHeadRowIndex;
|
|
||||||
f.col_resizer_width_adjustment = 0;
|
|
||||||
f.col_enable_text_ellipsis = false;
|
|
||||||
|
|
||||||
//Cols generation for all browsers excepted IE<=7
|
|
||||||
o.tblHasColTag = (tf_Tag(o.tbl,'col').length > 0) ? true : false;
|
|
||||||
if(!tf_isIE && !tf_isIE7){
|
|
||||||
//Col elements are enough to keep column widths after sorting and filtering
|
|
||||||
function createColTags(o)
|
|
||||||
{
|
|
||||||
if(!o) return;
|
|
||||||
for(var k=(o.nbCells-1); k>=0; k--)
|
|
||||||
{
|
|
||||||
var col = tf_CreateElm( 'col', ['id', o.id+'_col_'+k]);
|
|
||||||
o.tbl.firstChild.parentNode.insertBefore(col,o.tbl.firstChild);
|
|
||||||
col.style.width = o.colWidth[k];
|
|
||||||
o.gridColElms[k] = col;
|
|
||||||
}
|
|
||||||
o.tblHasColTag = true;
|
|
||||||
}
|
|
||||||
if(!o.tblHasColTag) createColTags(o);
|
|
||||||
else{
|
|
||||||
var cols = tf_Tag(o.tbl,'col');
|
|
||||||
for(var i=0; i<o.nbCells; i++){
|
|
||||||
cols[i].setAttribute('id', o.id+'_col_'+i);
|
|
||||||
cols[i].style.width = o.colWidth[i];
|
|
||||||
o.gridColElms.push(cols[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//IE <= 7 needs an additional row for widths as col element width is not enough...
|
|
||||||
if(tf_isIE || tf_isIE7){
|
|
||||||
var tbody = tf_Tag(o.tbl,'tbody'), r;
|
|
||||||
if( tbody.length>0 ) r = tbody[0].insertRow(0);
|
|
||||||
else r = o.tbl.insertRow(0);
|
|
||||||
r.style.height = '0px';
|
|
||||||
for(var i=0; i<o.nbCells; i++){
|
|
||||||
var col = tf_CreateElm('td', ['id', o.id+'_col_'+i]);
|
|
||||||
col.style.width = o.colWidth[i];
|
|
||||||
o.tbl.rows[1].cells[i].style.width = '';
|
|
||||||
r.appendChild(col);
|
|
||||||
o.gridColElms.push(col);
|
|
||||||
}
|
|
||||||
this.hasGridWidthsRow = true;
|
|
||||||
//Data table row with widths expressed
|
|
||||||
o.leadColWidthsRow = o.tbl.rows[0];
|
|
||||||
o.leadColWidthsRow.setAttribute('validRow','false');
|
|
||||||
|
|
||||||
var beforeSortFn = tf_IsFn(f.on_before_sort) ? f.on_before_sort : null;
|
|
||||||
f.on_before_sort = function(o,colIndex){
|
|
||||||
o.leadColWidthsRow.setAttribute('validRow','false');
|
|
||||||
if(beforeSortFn!=null) beforeSortFn.call(null,o,colIndex);
|
|
||||||
}
|
|
||||||
|
|
||||||
var afterSortFn = tf_IsFn(f.on_after_sort) ? f.on_after_sort : null;
|
|
||||||
f.on_after_sort = function(o,colIndex){
|
|
||||||
if(o.leadColWidthsRow.rowIndex != 0){
|
|
||||||
var r = o.leadColWidthsRow;
|
|
||||||
if( tbody.length>0 )
|
|
||||||
tbody[0].moveRow(o.leadColWidthsRow.rowIndex, 0);
|
|
||||||
else o.tbl.moveRow(o.leadColWidthsRow.rowIndex, 0);
|
|
||||||
}
|
|
||||||
if(afterSortFn!=null) afterSortFn.call(null,o,colIndex);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var afterColResizedFn = tf_IsFn(f.on_after_col_resized) ? f.on_after_col_resized : null;
|
|
||||||
f.on_after_col_resized = function(o,colIndex){
|
|
||||||
if(colIndex==undefined) return;
|
|
||||||
var w = o.crWColsRow.cells[colIndex].style.width;
|
|
||||||
var col = o.gridColElms[colIndex];
|
|
||||||
col.style.width = w;
|
|
||||||
|
|
||||||
var thCW = o.crWColsRow.cells[colIndex].clientWidth;
|
|
||||||
var tdCW = o.crWRowDataTbl.cells[colIndex].clientWidth;
|
|
||||||
|
|
||||||
if(tf_isIE || tf_isIE7)
|
|
||||||
o.tbl.style.width = o.headTbl.clientWidth+'px';
|
|
||||||
|
|
||||||
if(thCW != tdCW && !tf_isIE && !tf_isIE7)
|
|
||||||
o.headTbl.style.width = o.tbl.clientWidth+'px';
|
|
||||||
|
|
||||||
if(afterColResizedFn!=null) afterColResizedFn.call(null,o,colIndex);
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.tbl.clientWidth != this.headTbl.clientWidth)
|
|
||||||
this.tbl.style.width = this.headTbl.clientWidth+'px';
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.RemoveGridLayout = function()
|
|
||||||
/*====================================================
|
|
||||||
- removes the grid layout
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.gridLayout) return;
|
|
||||||
var t = this.tbl.parentNode.removeChild(this.tbl);
|
|
||||||
this.tblMainCont.parentNode.insertBefore(t, this.tblMainCont);
|
|
||||||
this.tblMainCont.parentNode.removeChild( this.tblMainCont );
|
|
||||||
|
|
||||||
this.tblMainCont = null;
|
|
||||||
this.headTblCont = null;
|
|
||||||
this.headTbl = null;
|
|
||||||
this.tblCont = null;
|
|
||||||
|
|
||||||
this.tbl.outerHTML = this.sourceTblHtml;
|
|
||||||
this.tbl = tf_Id(this.id); //needed to keep reference
|
|
||||||
}
|
|
97
dist/TF_Modules/tf_highlightKeywords.js
vendored
|
@ -1,97 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Highlight keywords feature v1.2
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.UnhighlightAll = function()
|
|
||||||
/*====================================================
|
|
||||||
- removes keyword highlighting
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if( this.highlightKeywords && this.searchArgs!=null ){
|
|
||||||
for(var y=0; y<this.searchArgs.length; y++){
|
|
||||||
tf_UnhighlightWord(this, this.searchArgs[y], this.highlightCssClass);
|
|
||||||
}
|
|
||||||
this.highlightedNodes = [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function tf_HighlightWord( node,word,cssClass,o )
|
|
||||||
/*====================================================
|
|
||||||
- highlights keyword found in passed node
|
|
||||||
- accepts the following params:
|
|
||||||
- node
|
|
||||||
- word to search
|
|
||||||
- css class name for highlighting
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
// Iterate into this nodes childNodes
|
|
||||||
if(node.hasChildNodes)
|
|
||||||
for( var i=0; i<node.childNodes.length; i++ )
|
|
||||||
tf_HighlightWord(node.childNodes[i],word,cssClass,o);
|
|
||||||
|
|
||||||
// And do this node itself
|
|
||||||
if(node.nodeType == 3)
|
|
||||||
{ // text node
|
|
||||||
var tempNodeVal = node.nodeValue.tf_LCase();
|
|
||||||
var tempWordVal = word.tf_LCase();
|
|
||||||
if(tempNodeVal.indexOf(tempWordVal) != -1)
|
|
||||||
{
|
|
||||||
var pn = node.parentNode;
|
|
||||||
if(pn && pn.className != cssClass)
|
|
||||||
{
|
|
||||||
// word has not already been highlighted!
|
|
||||||
var nv = node.nodeValue;
|
|
||||||
var ni = tempNodeVal.indexOf(tempWordVal);
|
|
||||||
// Create a load of replacement nodes
|
|
||||||
var before = tf_CreateText(nv.substr(0,ni));
|
|
||||||
var docWordVal = nv.substr(ni,word.length);
|
|
||||||
var after = tf_CreateText(nv.substr(ni+word.length));
|
|
||||||
var hiwordtext = tf_CreateText(docWordVal);
|
|
||||||
var hiword = tf_CreateElm('span');
|
|
||||||
hiword.className = cssClass;
|
|
||||||
hiword.appendChild(hiwordtext);
|
|
||||||
pn.insertBefore(before,node);
|
|
||||||
pn.insertBefore(hiword,node);
|
|
||||||
pn.insertBefore(after,node);
|
|
||||||
pn.removeChild(node);
|
|
||||||
o.highlightedNodes.push(hiword.firstChild);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}// if node.nodeType == 3
|
|
||||||
}
|
|
||||||
|
|
||||||
function tf_UnhighlightWord( o,word,cssClass )
|
|
||||||
/*====================================================
|
|
||||||
- removes highlights found in passed node
|
|
||||||
- accepts the following params:
|
|
||||||
- node
|
|
||||||
- word to search
|
|
||||||
- css class name for highlighting
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
var arrRemove = [];
|
|
||||||
for(var i=0; i<o.highlightedNodes.length; i++){
|
|
||||||
var n = o.highlightedNodes[i];
|
|
||||||
if(!n){ continue; }
|
|
||||||
var tempNodeVal = n.nodeValue.tf_LCase();
|
|
||||||
var tempWordVal = word.tf_LCase();
|
|
||||||
if(tempNodeVal.indexOf(tempWordVal) != -1){
|
|
||||||
var pn = n.parentNode;
|
|
||||||
if(pn && pn.className == cssClass){
|
|
||||||
var prevSib = pn.previousSibling;
|
|
||||||
var nextSib = pn.nextSibling;
|
|
||||||
if(!prevSib || !nextSib){ continue; }
|
|
||||||
nextSib.nodeValue = prevSib.nodeValue + n.nodeValue + nextSib.nodeValue;
|
|
||||||
prevSib.nodeValue = '';
|
|
||||||
n.nodeValue = '';
|
|
||||||
arrRemove.push(i);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for(var k=0; k<arrRemove.length; k++){
|
|
||||||
o.highlightedNodes.splice(arrRemove[k], 1);
|
|
||||||
}
|
|
||||||
}
|
|
72
dist/TF_Modules/tf_loader.js
vendored
|
@ -1,72 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Loader feature v1.1
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.SetLoader = function()
|
|
||||||
/*====================================================
|
|
||||||
- generates loader div
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if( this.loaderDiv!=null ) return;
|
|
||||||
var f = this.fObj;
|
|
||||||
this.loaderTgtId = f.loader_target_id!=undefined //id of container element
|
|
||||||
? f.loader_target_id : null;
|
|
||||||
this.loaderDiv = null; //div containing loader
|
|
||||||
this.loaderText = f.loader_text!=undefined ? f.loader_text : 'Loading...'; //defines loader text
|
|
||||||
this.loaderHtml = f.loader_html!=undefined ? f.loader_html : null; //defines loader innerHtml
|
|
||||||
this.loaderCssClass = f.loader_css_class!=undefined //defines css class for loader div
|
|
||||||
? f.loader_css_class : 'loader';
|
|
||||||
this.loaderCloseDelay = 200; //delay for hiding loader
|
|
||||||
this.onShowLoader = tf_IsFn(f.on_show_loader) //calls function before loader is displayed
|
|
||||||
? f.on_show_loader : null;
|
|
||||||
this.onHideLoader = tf_IsFn(f.on_hide_loader) //calls function after loader is closed
|
|
||||||
? f.on_hide_loader : null;
|
|
||||||
var containerDiv = tf_CreateElm( 'div',['id',this.prfxLoader+this.id] );
|
|
||||||
containerDiv.className = this.loaderCssClass;// for ie<=6
|
|
||||||
//containerDiv.style.display = 'none';
|
|
||||||
var targetEl = (this.loaderTgtId==null)
|
|
||||||
? (this.gridLayout ? this.tblCont : this.tbl.parentNode) : tf_Id( this.loaderTgtId );
|
|
||||||
if(this.loaderTgtId==null) targetEl.insertBefore(containerDiv, this.tbl);
|
|
||||||
else targetEl.appendChild( containerDiv );
|
|
||||||
this.loaderDiv = tf_Id(this.prfxLoader+this.id);
|
|
||||||
if(this.loaderHtml==null)
|
|
||||||
this.loaderDiv.appendChild( tf_CreateText(this.loaderText) );
|
|
||||||
else this.loaderDiv.innerHTML = this.loaderHtml;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.RemoveLoader = function()
|
|
||||||
/*====================================================
|
|
||||||
- removes loader div
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if( this.loaderDiv==null ) return;
|
|
||||||
var targetEl = (this.loaderTgtId==null)
|
|
||||||
? (this.gridLayout ? this.tblCont : this.tbl.parentNode) : tf_Id( this.loaderTgtId );
|
|
||||||
targetEl.removeChild(this.loaderDiv);
|
|
||||||
this.loaderDiv = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.ShowLoader = function(p)
|
|
||||||
/*====================================================
|
|
||||||
- displays/hides loader div
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.loader || !this.loaderDiv) return;
|
|
||||||
if(this.loaderDiv.style.display==p) return;
|
|
||||||
var o = this;
|
|
||||||
|
|
||||||
function displayLoader(){
|
|
||||||
if(!o.loaderDiv) return;
|
|
||||||
if(o.onShowLoader && p!='none')
|
|
||||||
o.onShowLoader.call(null,o);
|
|
||||||
o.loaderDiv.style.display = p;
|
|
||||||
if(o.onHideLoader && p=='none')
|
|
||||||
o.onHideLoader.call(null,o);
|
|
||||||
}
|
|
||||||
|
|
||||||
var t = (p=='none') ? this.loaderCloseDelay : 1;
|
|
||||||
window.setTimeout(displayLoader,t);
|
|
||||||
}
|
|
598
dist/TF_Modules/tf_paging.js
vendored
|
@ -1,598 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Paging feature v1.3
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.SetPaging = function()
|
|
||||||
/*====================================================
|
|
||||||
- Generates paging elements:
|
|
||||||
- pages drop-down list
|
|
||||||
- previous, next, first, last buttons
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.hasGrid && !this.isFirstLoad) return;
|
|
||||||
if(!this.paging || (!this.isPagingRemoved && !this.isFirstLoad)) return;
|
|
||||||
var f = this.fObj;
|
|
||||||
this.pagingTgtId = f.paging_target_id!=undefined //id of container element
|
|
||||||
? f.paging_target_id : null;
|
|
||||||
this.pagingLength = f.paging_length!=undefined ? f.paging_length : 10; //defines table paging length
|
|
||||||
this.resultsPerPageTgtId = f.results_per_page_target_id!=undefined //id of container element
|
|
||||||
? f.results_per_page_target_id : null;
|
|
||||||
this.pgSlcCssClass = f.paging_slc_css_class!=undefined
|
|
||||||
? f.paging_slc_css_class :'pgSlc'; //css class for paging select element
|
|
||||||
this.pgInpCssClass = f.paging_inp_css_class!=undefined
|
|
||||||
? f.paging_inp_css_class :'pgNbInp'; //css class for paging input element
|
|
||||||
this.resultsSlcCssClass = f.results_slc_css_class!=undefined
|
|
||||||
? f.results_slc_css_class :'rspg'; //defines css class for results per page select
|
|
||||||
this.resultsSpanCssClass = f.results_span_css_class!=undefined
|
|
||||||
? f.results_span_css_class :'rspgSpan'; //css class for label preceding results per page select
|
|
||||||
this.btnNextPageText = f.btn_next_page_text!=undefined
|
|
||||||
? f.btn_next_page_text : '>'; //defines next page button text
|
|
||||||
this.btnPrevPageText = f.btn_prev_page_text!=undefined
|
|
||||||
? f.btn_prev_page_text : '<'; //defines previous page button text
|
|
||||||
this.btnLastPageText = f.btn_last_page_text!=undefined
|
|
||||||
? f.btn_last_page_text : '>|'; //defines last page button text
|
|
||||||
this.btnFirstPageText = f.btn_first_page_text!=undefined
|
|
||||||
? f.btn_first_page_text : '|<' ; //defines first page button text
|
|
||||||
this.btnNextPageHtml = f.btn_next_page_html!=undefined //defines next page button html
|
|
||||||
? f.btn_next_page_html : (!this.enableIcons ? null :
|
|
||||||
'<input type="button" value="" class="'+this.btnPageCssClass+' nextPage" title="Next page" />');
|
|
||||||
this.btnPrevPageHtml = f.btn_prev_page_html!=undefined //defines previous page button html
|
|
||||||
? f.btn_prev_page_html : (!this.enableIcons ? null :
|
|
||||||
'<input type="button" value="" class="'+this.btnPageCssClass+' previousPage" title="Previous page" />');
|
|
||||||
this.btnFirstPageHtml = f.btn_first_page_html!=undefined //defines last page button html
|
|
||||||
? f.btn_first_page_html : (!this.enableIcons ? null :
|
|
||||||
'<input type="button" value="" class="'+this.btnPageCssClass+' firstPage" title="First page" />');
|
|
||||||
this.btnLastPageHtml = f.btn_last_page_html!=undefined //defines previous page button html
|
|
||||||
? f.btn_last_page_html : (!this.enableIcons ? null :
|
|
||||||
'<input type="button" value="" class="'+this.btnPageCssClass+' lastPage" title="Last page" />');
|
|
||||||
this.pageText = f.page_text!=undefined ? f.page_text : ' Page '; //defines text preceeding page selector drop-down
|
|
||||||
this.ofText = f.of_text!=undefined ? f.of_text : ' of '; //defines text after page selector drop-down
|
|
||||||
this.nbPgSpanCssClass = f.nb_pages_css_class!=undefined ? f.nb_pages_css_class :'nbpg'; //css class for span containing tot nb of pages
|
|
||||||
this.hasPagingBtns = f.paging_btns==false ? false : true; //enables/disables paging buttons
|
|
||||||
this.pagingBtnEvents = null; //stores paging buttons events
|
|
||||||
this.pageSelectorType = f.page_selector_type!=undefined
|
|
||||||
? f.page_selector_type : this.fltTypeSlc; //defines previous page button html
|
|
||||||
this.onBeforeChangePage = tf_IsFn(f.on_before_change_page) ? f.on_before_change_page : null; //calls function before page is changed
|
|
||||||
this.onAfterChangePage = tf_IsFn(f.on_after_change_page) ? f.on_after_change_page : null; //calls function before page is changed
|
|
||||||
|
|
||||||
var start_row = this.refRow;
|
|
||||||
var nrows = this.nbRows;
|
|
||||||
this.nbPages = Math.ceil( (nrows-start_row)/this.pagingLength );//calculates page nb
|
|
||||||
|
|
||||||
//Paging elements events
|
|
||||||
if(!this.Evt._Paging.next)
|
|
||||||
{
|
|
||||||
var o = this;
|
|
||||||
this.Evt._Paging = {// paging buttons events
|
|
||||||
slcIndex: function(){
|
|
||||||
return (o.pageSelectorType==o.fltTypeSlc)
|
|
||||||
? o.pagingSlc.options.selectedIndex
|
|
||||||
: parseInt(o.pagingSlc.value)-1;
|
|
||||||
},
|
|
||||||
nbOpts: function(){
|
|
||||||
return (o.pageSelectorType==o.fltTypeSlc)
|
|
||||||
? parseInt(o.pagingSlc.options.length)-1
|
|
||||||
: (o.nbPages-1);
|
|
||||||
},
|
|
||||||
next: function(){
|
|
||||||
if(o.Evt._Paging.nextEvt) o.Evt._Paging.nextEvt();
|
|
||||||
var nextIndex = (o.Evt._Paging.slcIndex()<o.Evt._Paging.nbOpts())
|
|
||||||
? o.Evt._Paging.slcIndex()+1 : 0;
|
|
||||||
o.ChangePage(nextIndex);
|
|
||||||
},
|
|
||||||
prev: function(){
|
|
||||||
if(o.Evt._Paging.prevEvt) o.Evt._Paging.prevEvt();
|
|
||||||
var prevIndex = o.Evt._Paging.slcIndex()>0
|
|
||||||
? o.Evt._Paging.slcIndex()-1 : o.Evt._Paging.nbOpts();
|
|
||||||
o.ChangePage(prevIndex);
|
|
||||||
},
|
|
||||||
last: function(){
|
|
||||||
if(o.Evt._Paging.lastEvt) o.Evt._Paging.lastEvt();
|
|
||||||
o.ChangePage(o.Evt._Paging.nbOpts());
|
|
||||||
},
|
|
||||||
first: function(){
|
|
||||||
if(o.Evt._Paging.firstEvt) o.Evt._Paging.firstEvt();
|
|
||||||
o.ChangePage(0);
|
|
||||||
},
|
|
||||||
_detectKey: function(e)
|
|
||||||
{
|
|
||||||
var evt=(e)?e:(window.event)?window.event:null;
|
|
||||||
if(evt)
|
|
||||||
{
|
|
||||||
var key=(evt.charCode)?evt.charCode:
|
|
||||||
((evt.keyCode)?evt.keyCode:((evt.which)?evt.which:0));
|
|
||||||
if(key=='13'){
|
|
||||||
if(o.sorted){ o.Filter(); o.ChangePage(o.Evt._Paging.slcIndex()); }
|
|
||||||
else o.ChangePage();
|
|
||||||
this.blur();
|
|
||||||
}
|
|
||||||
}//if evt
|
|
||||||
},
|
|
||||||
nextEvt: null,
|
|
||||||
prevEvt: null,
|
|
||||||
lastEvt: null,
|
|
||||||
firstEvt: null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if(!this.Evt._OnSlcPagesChange)
|
|
||||||
{
|
|
||||||
this.Evt._OnSlcPagesChange = function()
|
|
||||||
/*====================================================
|
|
||||||
- onchange event for paging select
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(o.Evt._Paging._OnSlcPagesChangeEvt)
|
|
||||||
o.Evt._Paging._OnSlcPagesChangeEvt();
|
|
||||||
o.ChangePage();
|
|
||||||
this.blur();
|
|
||||||
//ie only: blur is not enough...
|
|
||||||
if(this.parentNode && tf_isIE)
|
|
||||||
this.parentNode.focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Paging drop-down list selector
|
|
||||||
if(this.pageSelectorType == this.fltTypeSlc)
|
|
||||||
{
|
|
||||||
var slcPages = tf_CreateElm( this.fltTypeSlc, ['id',this.prfxSlcPages+this.id] );
|
|
||||||
slcPages.className = this.pgSlcCssClass;
|
|
||||||
slcPages.onchange = this.Evt._OnSlcPagesChange;
|
|
||||||
}
|
|
||||||
// Paging input selector
|
|
||||||
if(this.pageSelectorType == this.fltTypeInp)
|
|
||||||
{
|
|
||||||
var slcPages = tf_CreateElm(
|
|
||||||
this.fltTypeInp,
|
|
||||||
['id',this.prfxSlcPages+this.id],
|
|
||||||
['value',this.currentPageNb]
|
|
||||||
);
|
|
||||||
slcPages.className = this.pgInpCssClass;
|
|
||||||
slcPages.onkeypress = this.Evt._Paging._detectKey;
|
|
||||||
}
|
|
||||||
|
|
||||||
var btnNextSpan, btnPrevSpan, btnLastSpan, btnFirstSpan;// btns containers
|
|
||||||
btnNextSpan = tf_CreateElm('span',['id',this.prfxBtnNextSpan+this.id]);
|
|
||||||
btnPrevSpan = tf_CreateElm('span',['id',this.prfxBtnPrevSpan+this.id]);
|
|
||||||
btnLastSpan = tf_CreateElm('span',['id',this.prfxBtnLastSpan+this.id]);
|
|
||||||
btnFirstSpan = tf_CreateElm('span',['id',this.prfxBtnFirstSpan+this.id]);
|
|
||||||
|
|
||||||
if(this.hasPagingBtns)
|
|
||||||
{
|
|
||||||
if(this.btnNextPageHtml==null)
|
|
||||||
{// Next button
|
|
||||||
var btn_next = tf_CreateElm( this.fltTypeInp,['id',this.prfxBtnNext+this.id],
|
|
||||||
['type','button'],['value',this.btnNextPageText],['title','Next'] );
|
|
||||||
btn_next.className = this.btnPageCssClass;
|
|
||||||
btn_next.onclick = this.Evt._Paging.next;
|
|
||||||
btnNextSpan.appendChild(btn_next);
|
|
||||||
} else {
|
|
||||||
btnNextSpan.innerHTML = this.btnNextPageHtml;
|
|
||||||
btnNextSpan.onclick = this.Evt._Paging.next;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.btnPrevPageHtml==null)
|
|
||||||
{// Previous button
|
|
||||||
var btn_prev = tf_CreateElm( this.fltTypeInp,['id',this.prfxBtnPrev+this.id],
|
|
||||||
['type','button'],['value',this.btnPrevPageText],['title','Previous'] );
|
|
||||||
btn_prev.className = this.btnPageCssClass;
|
|
||||||
btn_prev.onclick = this.Evt._Paging.prev;
|
|
||||||
btnPrevSpan.appendChild(btn_prev);
|
|
||||||
} else {
|
|
||||||
btnPrevSpan.innerHTML = this.btnPrevPageHtml;
|
|
||||||
btnPrevSpan.onclick = this.Evt._Paging.prev;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.btnLastPageHtml==null)
|
|
||||||
{// Last button
|
|
||||||
var btn_last = tf_CreateElm( this.fltTypeInp,['id',this.prfxBtnLast+this.id],
|
|
||||||
['type','button'],['value',this.btnLastPageText],['title','Last'] );
|
|
||||||
btn_last.className = this.btnPageCssClass;
|
|
||||||
btn_last.onclick = this.Evt._Paging.last;
|
|
||||||
btnLastSpan.appendChild(btn_last);
|
|
||||||
} else {
|
|
||||||
btnLastSpan.innerHTML = this.btnLastPageHtml;
|
|
||||||
btnLastSpan.onclick = this.Evt._Paging.last;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.btnFirstPageHtml==null)
|
|
||||||
{// First button
|
|
||||||
var btn_first = tf_CreateElm( this.fltTypeInp,['id',this.prfxBtnFirst+this.id],
|
|
||||||
['type','button'],['value',this.btnFirstPageText],['title','First'] );
|
|
||||||
btn_first.className = this.btnPageCssClass;
|
|
||||||
btn_first.onclick = this.Evt._Paging.first;
|
|
||||||
btnFirstSpan.appendChild(btn_first);
|
|
||||||
} else {
|
|
||||||
btnFirstSpan.innerHTML = this.btnFirstPageHtml;
|
|
||||||
btnFirstSpan.onclick = this.Evt._Paging.first;
|
|
||||||
}
|
|
||||||
}//if this.hasPagingBtns
|
|
||||||
|
|
||||||
// paging elements (buttons+drop-down list) are added to defined element
|
|
||||||
if(this.pagingTgtId==null) this.SetTopDiv();
|
|
||||||
var targetEl = ( this.pagingTgtId==null ) ? this.mDiv : tf_Id( this.pagingTgtId );
|
|
||||||
|
|
||||||
/*** if paging previously removed this prevents IE memory leak with removeChild
|
|
||||||
used in RemovePaging method. For more info refer to
|
|
||||||
http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=2840253&SiteID=1 ***/
|
|
||||||
if ( targetEl.innerHTML!='' ) targetEl.innerHTML = '';
|
|
||||||
/*** ***/
|
|
||||||
|
|
||||||
targetEl.appendChild(btnFirstSpan);
|
|
||||||
targetEl.appendChild(btnPrevSpan);
|
|
||||||
|
|
||||||
var pgBeforeSpan = tf_CreateElm( 'span',['id',this.prfxPgBeforeSpan+this.id] );
|
|
||||||
pgBeforeSpan.appendChild( tf_CreateText(this.pageText) );
|
|
||||||
pgBeforeSpan.className = this.nbPgSpanCssClass;
|
|
||||||
targetEl.appendChild(pgBeforeSpan);
|
|
||||||
targetEl.appendChild(slcPages);
|
|
||||||
var pgAfterSpan = tf_CreateElm( 'span',['id',this.prfxPgAfterSpan+this.id] );
|
|
||||||
pgAfterSpan.appendChild( tf_CreateText(this.ofText) );
|
|
||||||
pgAfterSpan.className = this.nbPgSpanCssClass;
|
|
||||||
targetEl.appendChild(pgAfterSpan)
|
|
||||||
var pgspan = tf_CreateElm( 'span',['id',this.prfxPgSpan+this.id] );
|
|
||||||
pgspan.className = this.nbPgSpanCssClass;
|
|
||||||
pgspan.appendChild( tf_CreateText(' '+this.nbPages+' ') );
|
|
||||||
targetEl.appendChild(pgspan);
|
|
||||||
targetEl.appendChild(btnNextSpan);
|
|
||||||
targetEl.appendChild(btnLastSpan);
|
|
||||||
this.pagingSlc = tf_Id(this.prfxSlcPages+this.id); //to be easily re-used
|
|
||||||
|
|
||||||
// if this.rememberGridValues==true this.SetPagingInfo() is called
|
|
||||||
// in ResetGridValues() method
|
|
||||||
if( !this.rememberGridValues || this.isPagingRemoved )
|
|
||||||
this.SetPagingInfo();
|
|
||||||
if( !this.fltGrid )
|
|
||||||
{
|
|
||||||
this.ValidateAllRows();
|
|
||||||
this.SetPagingInfo(this.validRowsIndex);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.pagingBtnEvents = this.Evt._Paging;
|
|
||||||
this.isPagingRemoved = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.RemovePaging = function()
|
|
||||||
/*====================================================
|
|
||||||
- Removes paging elements
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.hasGrid) return;
|
|
||||||
if( this.pagingSlc==null ) return;
|
|
||||||
var btnNextSpan, btnPrevSpan, btnLastSpan, btnFirstSpan;// btns containers
|
|
||||||
var pgBeforeSpan, pgAfterSpan, pgspan;
|
|
||||||
btnNextSpan = tf_Id(this.prfxBtnNextSpan+this.id);
|
|
||||||
btnPrevSpan = tf_Id(this.prfxBtnPrevSpan+this.id);
|
|
||||||
btnLastSpan = tf_Id(this.prfxBtnLastSpan+this.id);
|
|
||||||
btnFirstSpan = tf_Id(this.prfxBtnFirstSpan+this.id);
|
|
||||||
pgBeforeSpan = tf_Id(this.prfxPgBeforeSpan+this.id);//span containing 'Page' text
|
|
||||||
pgAfterSpan = tf_Id(this.prfxPgAfterSpan+this.id);//span containing 'of' text
|
|
||||||
pgspan = tf_Id(this.prfxPgSpan+this.id);//span containing nb of pages
|
|
||||||
|
|
||||||
this.pagingSlc.parentNode.removeChild(this.pagingSlc);
|
|
||||||
|
|
||||||
if( btnNextSpan!=null )
|
|
||||||
btnNextSpan.parentNode.removeChild( btnNextSpan );
|
|
||||||
|
|
||||||
if( btnPrevSpan!=null )
|
|
||||||
btnPrevSpan.parentNode.removeChild( btnPrevSpan );
|
|
||||||
|
|
||||||
if( btnLastSpan!=null )
|
|
||||||
btnLastSpan.parentNode.removeChild( btnLastSpan );
|
|
||||||
|
|
||||||
if( btnFirstSpan!=null )
|
|
||||||
btnFirstSpan.parentNode.removeChild( btnFirstSpan );
|
|
||||||
|
|
||||||
if( pgBeforeSpan!=null )
|
|
||||||
pgBeforeSpan.parentNode.removeChild( pgBeforeSpan );
|
|
||||||
|
|
||||||
if( pgAfterSpan!=null )
|
|
||||||
pgAfterSpan.parentNode.removeChild( pgAfterSpan );
|
|
||||||
|
|
||||||
if( pgspan!=null )
|
|
||||||
pgspan.parentNode.removeChild( pgspan );
|
|
||||||
|
|
||||||
this.pagingBtnEvents = null;
|
|
||||||
this.pagingSlc = null;
|
|
||||||
this.isPagingRemoved = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.SetPagingInfo = function( validRows )
|
|
||||||
/*====================================================
|
|
||||||
- calculates page # according to valid rows
|
|
||||||
- refreshes paging select according to page #
|
|
||||||
- Calls GroupByPage method
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
var row = this.tbl.rows;
|
|
||||||
var mdiv = ( this.pagingTgtId==null ) ? this.mDiv : tf_Id( this.pagingTgtId );
|
|
||||||
var pgspan = tf_Id(this.prfxPgSpan+this.id);
|
|
||||||
|
|
||||||
if( validRows!=undefined ) this.validRowsIndex = validRows;//stores valid rows index
|
|
||||||
else
|
|
||||||
{
|
|
||||||
this.validRowsIndex = [];//re-sets valid rows index
|
|
||||||
|
|
||||||
for(var j=this.refRow; j<this.nbRows; j++)//counts rows to be grouped
|
|
||||||
{
|
|
||||||
if(!row[j]) continue;
|
|
||||||
var isRowValid = row[j].getAttribute('validRow');
|
|
||||||
if(isRowValid=='true' || isRowValid==null)
|
|
||||||
this.validRowsIndex.push(j);
|
|
||||||
}//for j
|
|
||||||
}
|
|
||||||
|
|
||||||
this.nbPages = Math.ceil( this.validRowsIndex.length/this.pagingLength );//calculates nb of pages
|
|
||||||
pgspan.innerHTML = this.nbPages; //refresh page nb span
|
|
||||||
if(this.pageSelectorType==this.fltTypeSlc)
|
|
||||||
this.pagingSlc.innerHTML = '';//select clearing shortcut
|
|
||||||
|
|
||||||
if( this.nbPages>0 )
|
|
||||||
{
|
|
||||||
mdiv.style.visibility = 'visible';
|
|
||||||
if(this.pageSelectorType==this.fltTypeSlc)
|
|
||||||
for(var z=0; z<this.nbPages; z++)
|
|
||||||
{
|
|
||||||
var currOpt = new Option((z+1),z*this.pagingLength,false,false);
|
|
||||||
this.pagingSlc.options[z] = currOpt;
|
|
||||||
}
|
|
||||||
else this.pagingSlc.value = this.currentPageNb; //input type
|
|
||||||
|
|
||||||
} else {/*** if no results paging select and buttons are hidden ***/
|
|
||||||
mdiv.style.visibility = 'hidden';
|
|
||||||
}
|
|
||||||
this.GroupByPage( this.validRowsIndex );
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.GroupByPage = function( validRows )
|
|
||||||
/*====================================================
|
|
||||||
- Displays current page rows
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
var row = this.tbl.rows;
|
|
||||||
var paging_end_row = parseInt( this.startPagingRow ) + parseInt( this.pagingLength );
|
|
||||||
|
|
||||||
if( validRows!=undefined ) this.validRowsIndex = validRows;//stores valid rows index
|
|
||||||
|
|
||||||
for(h=0; h<this.validRowsIndex.length; h++)
|
|
||||||
{//this loop shows valid rows of current page
|
|
||||||
if( h>=this.startPagingRow && h<paging_end_row )
|
|
||||||
{
|
|
||||||
var r = row[ this.validRowsIndex[h] ];
|
|
||||||
if(r.getAttribute('validRow')=='true' || r.getAttribute('validRow')==undefined)
|
|
||||||
r.style.display = '';
|
|
||||||
if(this.alternateBgs) this.SetRowBg(this.validRowsIndex[h],h);
|
|
||||||
} else {
|
|
||||||
row[ this.validRowsIndex[h] ].style.display = 'none';
|
|
||||||
if(this.alternateBgs) this.RemoveRowBg(this.validRowsIndex[h]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.nbVisibleRows = this.validRowsIndex.length;
|
|
||||||
this.isStartBgAlternate = false;
|
|
||||||
this.ApplyGridProps();//re-applies filter behaviours after filtering process
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.SetPage = function( cmd )
|
|
||||||
/*====================================================
|
|
||||||
- If paging set true shows page according to
|
|
||||||
param value (string or number):
|
|
||||||
- strings: 'next','previous','last','first' or
|
|
||||||
- number: page number
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if( this.hasGrid && this.paging )
|
|
||||||
{
|
|
||||||
var btnEvt = this.pagingBtnEvents, cmdtype = typeof cmd;
|
|
||||||
if(cmdtype=='string')
|
|
||||||
{
|
|
||||||
switch(cmd.tf_LCase())
|
|
||||||
{
|
|
||||||
case 'next':
|
|
||||||
btnEvt.next();
|
|
||||||
break;
|
|
||||||
case 'previous':
|
|
||||||
btnEvt.prev();
|
|
||||||
break;
|
|
||||||
case 'last':
|
|
||||||
btnEvt.last();
|
|
||||||
break;
|
|
||||||
case 'first':
|
|
||||||
btnEvt.first();
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
btnEvt.next();
|
|
||||||
break;
|
|
||||||
}//switch
|
|
||||||
}
|
|
||||||
if(cmdtype=='number') this.ChangePage( (cmd-1) );
|
|
||||||
}// this.hasGrid
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.SetResultsPerPage = function()
|
|
||||||
/*====================================================
|
|
||||||
- Generates results per page select + label
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.hasGrid && !this.isFirstLoad) return;
|
|
||||||
if( this.resultsPerPageSlc!=null || this.resultsPerPage==null ) return;
|
|
||||||
|
|
||||||
//Change nb results per page event
|
|
||||||
if(!this.Evt._OnSlcResultsChange)
|
|
||||||
{
|
|
||||||
var o = this;
|
|
||||||
this.Evt._OnSlcResultsChange = function()
|
|
||||||
/*====================================================
|
|
||||||
- onchange event for results per page select
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
o.ChangeResultsPerPage();
|
|
||||||
this.blur();
|
|
||||||
//ie only: blur is not enough...
|
|
||||||
if(this.parentNode && tf_isIE)
|
|
||||||
this.parentNode.focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var slcR = tf_CreateElm( this.fltTypeSlc,['id',this.prfxSlcResults+this.id] );
|
|
||||||
slcR.className = this.resultsSlcCssClass;
|
|
||||||
var slcRText = this.resultsPerPage[0], slcROpts = this.resultsPerPage[1];
|
|
||||||
var slcRSpan = tf_CreateElm( 'span',['id',this.prfxSlcResultsTxt+this.id] );
|
|
||||||
slcRSpan.className = this.resultsSpanCssClass;
|
|
||||||
|
|
||||||
// results per page select is added to defined element
|
|
||||||
if(this.resultsPerPageTgtId==null) this.SetTopDiv();
|
|
||||||
var targetEl = ( this.resultsPerPageTgtId==null ) ? this.rDiv : tf_Id( this.resultsPerPageTgtId );
|
|
||||||
slcRSpan.appendChild(tf_CreateText(slcRText));
|
|
||||||
targetEl.appendChild(slcRSpan);
|
|
||||||
targetEl.appendChild(slcR);
|
|
||||||
|
|
||||||
this.resultsPerPageSlc = tf_Id(this.prfxSlcResults+this.id);
|
|
||||||
|
|
||||||
for(var r=0; r<slcROpts.length; r++)
|
|
||||||
{
|
|
||||||
var currOpt = new Option(slcROpts[r],slcROpts[r],false,false);
|
|
||||||
this.resultsPerPageSlc.options[r] = currOpt;
|
|
||||||
}
|
|
||||||
slcR.onchange = this.Evt._OnSlcResultsChange;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.RemoveResultsPerPage = function()
|
|
||||||
/*====================================================
|
|
||||||
- Removes results per page select + label
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.hasGrid) return;
|
|
||||||
if( this.resultsPerPageSlc==null || this.resultsPerPage==null ) return;
|
|
||||||
var slcR, slcRSpan;
|
|
||||||
slcR = this.resultsPerPageSlc;
|
|
||||||
slcRSpan = tf_Id( this.prfxSlcResultsTxt+this.id );
|
|
||||||
if( slcR!=null )
|
|
||||||
slcR.parentNode.removeChild( slcR );
|
|
||||||
if( slcRSpan!=null )
|
|
||||||
slcRSpan.parentNode.removeChild( slcRSpan );
|
|
||||||
this.resultsPerPageSlc = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.ChangePage = function( index )
|
|
||||||
{
|
|
||||||
this.EvtManager(this.Evt.name.changepage,{ pgIndex:index });
|
|
||||||
}
|
|
||||||
TF.prototype._ChangePage = function( index )
|
|
||||||
/*====================================================
|
|
||||||
- Changes page
|
|
||||||
- Param:
|
|
||||||
- index: option index of paging select
|
|
||||||
(numeric value)
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if( !this.paging ) return;
|
|
||||||
if( index==undefined )
|
|
||||||
index = (this.pageSelectorType==this.fltTypeSlc) ?
|
|
||||||
this.pagingSlc.options.selectedIndex : (this.pagingSlc.value-1);
|
|
||||||
if( index>=0 && index<=(this.nbPages-1) )
|
|
||||||
{
|
|
||||||
if(this.onBeforeChangePage) this.onBeforeChangePage.call(null, this, index);
|
|
||||||
this.currentPageNb = parseInt(index)+1;
|
|
||||||
if(this.pageSelectorType==this.fltTypeSlc)
|
|
||||||
this.pagingSlc.options[index].selected = true;
|
|
||||||
else
|
|
||||||
this.pagingSlc.value = this.currentPageNb;
|
|
||||||
|
|
||||||
if( this.rememberPageNb ) this.RememberPageNb( this.pgNbCookie );
|
|
||||||
this.startPagingRow = (this.pageSelectorType==this.fltTypeSlc)
|
|
||||||
? this.pagingSlc.value : (index*this.pagingLength);
|
|
||||||
this.GroupByPage();
|
|
||||||
if(this.onAfterChangePage) this.onAfterChangePage.call(null, this, index);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.ChangeResultsPerPage = function()
|
|
||||||
{
|
|
||||||
this.EvtManager(this.Evt.name.changeresultsperpage);
|
|
||||||
}
|
|
||||||
TF.prototype._ChangeResultsPerPage = function()
|
|
||||||
/*====================================================
|
|
||||||
- calculates rows to be displayed in a page
|
|
||||||
- method called by nb results per page select
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if( !this.paging ) return;
|
|
||||||
var slcR = this.resultsPerPageSlc;
|
|
||||||
var slcPagesSelIndex = (this.pageSelectorType==this.fltTypeSlc)
|
|
||||||
? this.pagingSlc.selectedIndex : parseInt(this.pagingSlc.value-1);
|
|
||||||
this.pagingLength = parseInt(slcR.options[slcR.selectedIndex].value);
|
|
||||||
this.startPagingRow = this.pagingLength*slcPagesSelIndex;
|
|
||||||
|
|
||||||
if( !isNaN(this.pagingLength) )
|
|
||||||
{
|
|
||||||
if( this.startPagingRow>=this.nbFilterableRows )
|
|
||||||
this.startPagingRow = (this.nbFilterableRows-this.pagingLength);
|
|
||||||
this.SetPagingInfo();
|
|
||||||
|
|
||||||
if(this.pageSelectorType==this.fltTypeSlc)
|
|
||||||
{
|
|
||||||
var slcIndex = (this.pagingSlc.options.length-1<=slcPagesSelIndex )
|
|
||||||
? (this.pagingSlc.options.length-1) : slcPagesSelIndex;
|
|
||||||
this.pagingSlc.options[slcIndex].selected = true;
|
|
||||||
}
|
|
||||||
if( this.rememberPageLen ) this.RememberPageLength( this.pgLenCookie );
|
|
||||||
}//if isNaN
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.ResetPage = function( name )
|
|
||||||
{
|
|
||||||
this.EvtManager(this.Evt.name.resetpage);
|
|
||||||
}
|
|
||||||
TF.prototype._ResetPage = function( name )
|
|
||||||
/*==============================================
|
|
||||||
- re-sets page nb at page re-load
|
|
||||||
- Params:
|
|
||||||
- name: cookie name (string)
|
|
||||||
===============================================*/
|
|
||||||
{
|
|
||||||
var pgnb = tf_ReadCookie(name); //reads the cookie
|
|
||||||
if( pgnb!='' )
|
|
||||||
this.ChangePage((pgnb-1));
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.ResetPageLength = function( name )
|
|
||||||
{
|
|
||||||
this.EvtManager(this.Evt.name.resetpagelength);
|
|
||||||
}
|
|
||||||
TF.prototype._ResetPageLength = function( name )
|
|
||||||
/*==============================================
|
|
||||||
- re-sets page length at page re-load
|
|
||||||
- Params:
|
|
||||||
- name: cookie name (string)
|
|
||||||
===============================================*/
|
|
||||||
{
|
|
||||||
if(!this.paging) return;
|
|
||||||
var pglenIndex = tf_ReadCookie(name); //reads the cookie
|
|
||||||
|
|
||||||
if( pglenIndex!='' )
|
|
||||||
{
|
|
||||||
this.resultsPerPageSlc.options[pglenIndex].selected = true;
|
|
||||||
this.ChangeResultsPerPage();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.AddPaging = function(filterTable)
|
|
||||||
/*====================================================
|
|
||||||
- Adds paging feature if filter grid bar is
|
|
||||||
already set
|
|
||||||
- Param(s):
|
|
||||||
- execFilter: if true table is filtered
|
|
||||||
(boolean)
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if( !this.hasGrid || this.paging ) return;
|
|
||||||
this.paging = true;
|
|
||||||
this.isPagingRemoved = true;
|
|
||||||
this.SetPaging();
|
|
||||||
this.ResetValues();
|
|
||||||
if(filterTable) this.Filter();
|
|
||||||
}
|
|
325
dist/TF_Modules/tf_populateCheckList.js
vendored
|
@ -1,325 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Populate Checklist filters feature v1.2
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.PopulateCheckList = function(colIndex, isExternal, extFltId)
|
|
||||||
{
|
|
||||||
this.EvtManager(
|
|
||||||
this.Evt.name.populatechecklist,
|
|
||||||
{ slcIndex:colIndex, slcExternal:isExternal, slcId:extFltId }
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype._PopulateCheckList = function(colIndex, isExternal, extFltId)
|
|
||||||
/*====================================================
|
|
||||||
- populates checklist filters
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
isExternal = (isExternal==undefined) ? false : isExternal;
|
|
||||||
var divFltId = this.prfxCheckListDiv+colIndex+'_'+this.id;
|
|
||||||
if( tf_Id(divFltId)==null && !isExternal ) return;
|
|
||||||
if( tf_Id(extFltId)==null && isExternal ) return;
|
|
||||||
var flt = (!isExternal) ? this.checkListDiv[colIndex] : tf_Id(extFltId);
|
|
||||||
var ul = tf_CreateElm('ul',['id',this.fltIds[colIndex]],['colIndex',colIndex]);
|
|
||||||
ul.className = this.checkListCssClass;
|
|
||||||
ul.onchange = this.Evt._OnCheckListChange;
|
|
||||||
var o = this, row = this.tbl.rows;
|
|
||||||
var optArray = [];
|
|
||||||
var isCustomSlc = (this.hasCustomSlcOptions //custom select test
|
|
||||||
&& this.customSlcOptions.cols.tf_Has(colIndex));
|
|
||||||
var optTxt = []; //custom selects text
|
|
||||||
var activeFlt;
|
|
||||||
if(this.refreshFilters && this.activeFilterId){
|
|
||||||
activeFlt = this.activeFilterId.split('_')[0];
|
|
||||||
activeFlt = activeFlt.split(this.prfxFlt)[1];
|
|
||||||
}
|
|
||||||
|
|
||||||
var excludedOpts = null, filteredDataCol = null;
|
|
||||||
if(this.refreshFilters && this.disableExcludedOptions){ excludedOpts = []; filteredDataCol = []; }
|
|
||||||
|
|
||||||
for(var k=this.refRow; k<this.nbRows; k++)
|
|
||||||
{
|
|
||||||
// always visible rows don't need to appear on selects as always valid
|
|
||||||
if( this.hasVisibleRows && this.visibleRows.tf_Has(k) && !this.paging )
|
|
||||||
continue;
|
|
||||||
|
|
||||||
var cells = row[k].cells;
|
|
||||||
var ncells = cells.length;
|
|
||||||
|
|
||||||
if(ncells == this.nbCells && !isCustomSlc)
|
|
||||||
{// checks if row has exact cell #
|
|
||||||
for(var j=0; j<ncells; j++)
|
|
||||||
{// this loop retrieves cell data
|
|
||||||
if((colIndex==j && (!this.refreshFilters || (this.refreshFilters && this.disableExcludedOptions))) ||
|
|
||||||
(colIndex==j && this.refreshFilters && ((row[k].style.display == '' && !this.paging) ||
|
|
||||||
(this.paging && ((activeFlt==undefined || activeFlt==colIndex ) ||(activeFlt!=colIndex && this.validRowsIndex.tf_Has(k))) ))))
|
|
||||||
{
|
|
||||||
var cell_data = this.GetCellData(j, cells[j]);
|
|
||||||
var cell_string = cell_data.tf_MatchCase(this.matchCase);//Váry Péter's patch
|
|
||||||
// checks if celldata is already in array
|
|
||||||
if(!optArray.tf_Has(cell_string,this.matchCase)) optArray.push(cell_data);
|
|
||||||
|
|
||||||
if(this.refreshFilters && this.disableExcludedOptions){
|
|
||||||
if(!filteredDataCol[j]) filteredDataCol[j] = this.GetFilteredDataCol(j);
|
|
||||||
if(!filteredDataCol[j].tf_Has(cell_string,this.matchCase)
|
|
||||||
&& !excludedOpts.tf_Has(cell_string,this.matchCase) && !this.isFirstLoad) excludedOpts.push(cell_data);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//Retrieves custom values
|
|
||||||
if(isCustomSlc)
|
|
||||||
{
|
|
||||||
var customValues = this.__getCustomValues(colIndex);
|
|
||||||
optArray = customValues[0];
|
|
||||||
optTxt = customValues[1];
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.sortSlc && !isCustomSlc){
|
|
||||||
if (!this.matchCase){
|
|
||||||
optArray.sort(tf_IgnoreCaseSort);
|
|
||||||
if(excludedOpts) excludedOpts.sort(tf_IgnoreCaseSort);
|
|
||||||
} else { optArray.sort(); if(excludedOpts){ excludedOpts.sort(); } }
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.sortNumAsc && this.sortNumAsc.tf_Has(colIndex))
|
|
||||||
{//asc sort
|
|
||||||
try{
|
|
||||||
optArray.sort( tf_NumSortAsc );
|
|
||||||
if(excludedOpts) excludedOpts.sort( tf_NumSortAsc );
|
|
||||||
if(isCustomSlc) optTxt.sort( tf_NumSortAsc );
|
|
||||||
} catch(e) {
|
|
||||||
optArray.sort(); if(excludedOpts){ excludedOpts.sort(); }
|
|
||||||
if(isCustomSlc) optTxt.sort();
|
|
||||||
}//in case there are alphanumeric values
|
|
||||||
}
|
|
||||||
if(this.sortNumDesc && this.sortNumDesc.tf_Has(colIndex))
|
|
||||||
{//desc sort
|
|
||||||
try{
|
|
||||||
optArray.sort( tf_NumSortDesc );
|
|
||||||
if(excludedOpts) excludedOpts.sort( tf_NumSortDesc );
|
|
||||||
if(isCustomSlc) optTxt.sort( tf_NumSortDesc );
|
|
||||||
} catch(e) {
|
|
||||||
optArray.sort(); if(excludedOpts){ excludedOpts.sort(); }
|
|
||||||
if(isCustomSlc) optTxt.sort();
|
|
||||||
}//in case there are alphanumeric values
|
|
||||||
}
|
|
||||||
|
|
||||||
AddChecks(this.separator);
|
|
||||||
|
|
||||||
function AddTChecks()
|
|
||||||
{// adds 1st option
|
|
||||||
var chkCt = 1;
|
|
||||||
var li0 = tf_CreateCheckItem(o.fltIds[colIndex]+'_0', '', o.displayAllText);
|
|
||||||
li0.className = o.checkListItemCssClass;
|
|
||||||
ul.appendChild(li0);
|
|
||||||
li0.check.onclick = function(e){ o.__setCheckListValues(this); ul.onchange.call(null, e); };
|
|
||||||
if(!o.enableCheckListResetFilter) li0.style.display = 'none';
|
|
||||||
|
|
||||||
if(tf_isIE)
|
|
||||||
{//IE: label looses check capability
|
|
||||||
li0.label.onclick = function(){ li0.check.click(); };
|
|
||||||
}
|
|
||||||
|
|
||||||
if(o.enableEmptyOption){
|
|
||||||
var li1 = tf_CreateCheckItem(o.fltIds[colIndex]+'_1', o.emOperator, o.emptyText);
|
|
||||||
li1.className = o.checkListItemCssClass;
|
|
||||||
ul.appendChild(li1);
|
|
||||||
li1.check.onclick = function(e){ o.__setCheckListValues(this); ul.onchange.call(null, e); };
|
|
||||||
if(tf_isIE)
|
|
||||||
{//IE: label looses check capability
|
|
||||||
li1.label.onclick = function(){ li1.check.click(); };
|
|
||||||
}
|
|
||||||
chkCt++;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(o.enableNonEmptyOption){
|
|
||||||
var li2 = tf_CreateCheckItem(o.fltIds[colIndex]+'_2', o.nmOperator, o.nonEmptyText);
|
|
||||||
li2.className = o.checkListItemCssClass;
|
|
||||||
ul.appendChild(li2);
|
|
||||||
li2.check.onclick = function(e){ o.__setCheckListValues(this); ul.onchange.call(null, e); };
|
|
||||||
if(tf_isIE)
|
|
||||||
{//IE: label looses check capability
|
|
||||||
li2.label.onclick = function(){ li2.check.click(); };
|
|
||||||
}
|
|
||||||
chkCt++;
|
|
||||||
}
|
|
||||||
return chkCt;
|
|
||||||
}
|
|
||||||
|
|
||||||
function AddChecks(separator)
|
|
||||||
{
|
|
||||||
var chkCt = AddTChecks();
|
|
||||||
|
|
||||||
var flts_values = [], fltArr = []; //remember grid values
|
|
||||||
var tmpVal = tf_CookieValueByIndex(o.fltsValuesCookie, colIndex, separator);
|
|
||||||
if(tmpVal != undefined && tmpVal.tf_Trim().length > 0){
|
|
||||||
if(o.hasCustomSlcOptions && o.customSlcOptions.cols.tf_Has(colIndex)){
|
|
||||||
fltArr.push(tmpVal);
|
|
||||||
} else { fltArr = tmpVal.split(' '+o.orOperator+' '); }
|
|
||||||
}
|
|
||||||
|
|
||||||
for(var y=0; y<optArray.length; y++)
|
|
||||||
{
|
|
||||||
var val = optArray[y]; //item value
|
|
||||||
var lbl = (isCustomSlc) ? optTxt[y] : val; //item text
|
|
||||||
var li = tf_CreateCheckItem(o.fltIds[colIndex]+'_'+(y+chkCt), val, lbl);
|
|
||||||
li.className = o.checkListItemCssClass;
|
|
||||||
if(o.refreshFilters && o.disableExcludedOptions &&
|
|
||||||
excludedOpts.tf_Has(val.tf_MatchCase(o.matchCase), o.matchCase)){
|
|
||||||
tf_AddClass(li, o.checkListItemDisabledCssClass);
|
|
||||||
li.check.disabled = true;
|
|
||||||
li.disabled = true;
|
|
||||||
} else
|
|
||||||
li.check.onclick = function(e){ o.__setCheckListValues(this); ul.onchange.call(null, e); };
|
|
||||||
ul.appendChild(li);
|
|
||||||
|
|
||||||
if(val=='') li.style.display = 'none'; //item is hidden
|
|
||||||
|
|
||||||
/*** remember grid values ***/
|
|
||||||
if(o.rememberGridValues)
|
|
||||||
{
|
|
||||||
if((o.hasCustomSlcOptions && o.customSlcOptions.cols.tf_Has(colIndex)
|
|
||||||
&& fltArr.toString().indexOf(val)!= -1)
|
|
||||||
|| fltArr.tf_Has(val.tf_MatchCase(o.matchCase),o.matchCase))
|
|
||||||
{
|
|
||||||
li.check.checked = true;
|
|
||||||
o.__setCheckListValues(li.check);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if(tf_isIE)
|
|
||||||
{//IE: label looses check capability
|
|
||||||
li.label.onclick = function(){ this.firstChild.click(); };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.fillSlcOnDemand) flt.innerHTML = '';
|
|
||||||
flt.appendChild(ul);
|
|
||||||
flt.setAttribute('filled','1');
|
|
||||||
|
|
||||||
/*** remember grid values IE only, items remain un-checked ***/
|
|
||||||
if(o.rememberGridValues && tf_isIE)
|
|
||||||
{
|
|
||||||
var slcIndexes = ul.getAttribute('indexes');
|
|
||||||
if(slcIndexes != null)
|
|
||||||
{
|
|
||||||
var indSplit = slcIndexes.split(',');//items indexes
|
|
||||||
for(var n=0; n<indSplit.length; n++)
|
|
||||||
{
|
|
||||||
var cChk = tf_Id(this.fltIds[colIndex]+'_'+indSplit[n]); //checked item
|
|
||||||
if(cChk) cChk.checked = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.__setCheckListValues = function(o)
|
|
||||||
/*====================================================
|
|
||||||
- Sets checked items information of a checklist
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(o==null) return;
|
|
||||||
var chkValue = o.value; //checked item value
|
|
||||||
var chkIndex = parseInt(o.id.split('_')[2]);
|
|
||||||
var filterTag = 'ul', itemTag = 'li';
|
|
||||||
var n = o;
|
|
||||||
|
|
||||||
//ul tag search
|
|
||||||
while(n.nodeName.tf_LCase() != filterTag)
|
|
||||||
n = n.parentNode;
|
|
||||||
|
|
||||||
if(n.nodeName.tf_LCase() != filterTag) return;
|
|
||||||
|
|
||||||
var li = n.childNodes[chkIndex];
|
|
||||||
var colIndex = n.getAttribute('colIndex');
|
|
||||||
var fltValue = n.getAttribute('value'); //filter value (ul tag)
|
|
||||||
var fltIndexes = n.getAttribute('indexes'); //selected items (ul tag)
|
|
||||||
|
|
||||||
if(o.checked)
|
|
||||||
{
|
|
||||||
if(chkValue=='')
|
|
||||||
{//show all item
|
|
||||||
if((fltIndexes!=null && fltIndexes!=''))
|
|
||||||
{
|
|
||||||
var indSplit = fltIndexes.split(this.separator);//items indexes
|
|
||||||
for(var u=0; u<indSplit.length; u++)
|
|
||||||
{//checked items loop
|
|
||||||
var cChk = tf_Id(this.fltIds[colIndex]+'_'+indSplit[u]); //checked item
|
|
||||||
if(cChk)
|
|
||||||
{
|
|
||||||
cChk.checked = false;
|
|
||||||
tf_RemoveClass(
|
|
||||||
n.childNodes[indSplit[u]],
|
|
||||||
this.checkListSlcItemCssClass
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
n.setAttribute('value', '');
|
|
||||||
n.setAttribute('indexes', '');
|
|
||||||
|
|
||||||
} else {
|
|
||||||
fltValue = (fltValue) ? fltValue : '';
|
|
||||||
chkValue = (fltValue+' '+chkValue +' '+this.orOperator).tf_Trim();
|
|
||||||
chkIndex = fltIndexes + chkIndex + this.separator;
|
|
||||||
n.setAttribute('value', chkValue );
|
|
||||||
n.setAttribute('indexes', chkIndex);
|
|
||||||
//1st option unchecked
|
|
||||||
if(tf_Id(this.fltIds[colIndex]+'_0'))
|
|
||||||
tf_Id(this.fltIds[colIndex]+'_0').checked = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(li.nodeName.tf_LCase() == itemTag)
|
|
||||||
{
|
|
||||||
tf_RemoveClass(n.childNodes[0],this.checkListSlcItemCssClass);
|
|
||||||
tf_AddClass(li,this.checkListSlcItemCssClass);
|
|
||||||
}
|
|
||||||
} else { //removes values and indexes
|
|
||||||
if(chkValue!='')
|
|
||||||
{
|
|
||||||
var replaceValue = new RegExp(tf_RegexpEscape(chkValue+' '+this.orOperator));
|
|
||||||
fltValue = fltValue.replace(replaceValue,'');
|
|
||||||
n.setAttribute('value', fltValue.tf_Trim());
|
|
||||||
|
|
||||||
var replaceIndex = new RegExp(tf_RegexpEscape(chkIndex + this.separator));
|
|
||||||
fltIndexes = fltIndexes.replace(replaceIndex,'');
|
|
||||||
n.setAttribute('indexes', fltIndexes);
|
|
||||||
}
|
|
||||||
if(li.nodeName.tf_LCase() == itemTag)
|
|
||||||
tf_RemoveClass(li,this.checkListSlcItemCssClass);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function tf_CreateCheckItem(chkIndex, chkValue, labelText)
|
|
||||||
/*====================================================
|
|
||||||
- creates an checklist item and returns it
|
|
||||||
- accepts the following params:
|
|
||||||
- chkIndex: index of check item (number)
|
|
||||||
- chkValue: check item value (string)
|
|
||||||
- labelText: check item label text (string)
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(chkIndex==undefined || chkValue==undefined || labelText==undefined )
|
|
||||||
return;
|
|
||||||
var li = tf_CreateElm('li');
|
|
||||||
var label = tf_CreateElm('label',['for',chkIndex]);
|
|
||||||
var check = tf_CreateElm( 'input',
|
|
||||||
['id',chkIndex],
|
|
||||||
['name',chkIndex],
|
|
||||||
['type','checkbox'],
|
|
||||||
['value',chkValue] );
|
|
||||||
label.appendChild(check);
|
|
||||||
label.appendChild(tf_CreateText(labelText));
|
|
||||||
li.appendChild(label);
|
|
||||||
li.label = label;
|
|
||||||
li.check = check;
|
|
||||||
return li;
|
|
||||||
}
|
|
276
dist/TF_Modules/tf_populateSelect.js
vendored
|
@ -1,276 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Populate Select filters feature v1.2
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.PopulateSelect = function(colIndex,isExternal,extSlcId)
|
|
||||||
{
|
|
||||||
this.EvtManager(
|
|
||||||
this.Evt.name.populateselect,
|
|
||||||
{ slcIndex:colIndex, slcExternal:isExternal, slcId:extSlcId }
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype._PopulateSelect = function(colIndex,isRefreshed,isExternal,extSlcId)
|
|
||||||
/*====================================================
|
|
||||||
- populates drop-down filters
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
isExternal = (isExternal==undefined) ? false : isExternal;
|
|
||||||
var slcId = this.fltIds[colIndex];
|
|
||||||
if( tf_Id(slcId)==null && !isExternal ) return;
|
|
||||||
if( tf_Id(extSlcId)==null && isExternal ) return;
|
|
||||||
var slc = (!isExternal) ? tf_Id(slcId) : tf_Id(extSlcId);
|
|
||||||
var o = this, row = this.tbl.rows;
|
|
||||||
var fillMethod = this.slcFillingMethod.tf_LCase();
|
|
||||||
var optArray = [], slcInnerHtml = '', opt0;
|
|
||||||
var isCustomSlc = (this.hasCustomSlcOptions //custom select test
|
|
||||||
&& this.customSlcOptions.cols.tf_Has(colIndex));
|
|
||||||
var optTxt = []; //custom selects text
|
|
||||||
var activeFlt;
|
|
||||||
if(isRefreshed && this.activeFilterId){
|
|
||||||
activeFlt = this.activeFilterId.split('_')[0];
|
|
||||||
activeFlt = activeFlt.split(this.prfxFlt)[1];
|
|
||||||
}
|
|
||||||
|
|
||||||
/*** remember grid values ***/
|
|
||||||
var flts_values = [], fltArr = [];
|
|
||||||
if(this.rememberGridValues)
|
|
||||||
{
|
|
||||||
flts_values = tf_CookieValueArray(this.fltsValuesCookie, this.separator);
|
|
||||||
if(flts_values != undefined && flts_values.toString().tf_Trim() != ''){
|
|
||||||
if(this.hasCustomSlcOptions && this.customSlcOptions.cols.tf_Has(colIndex)){
|
|
||||||
fltArr.push(flts_values[colIndex]);
|
|
||||||
} else { fltArr = flts_values[colIndex].split(' '+o.orOperator+' '); }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var excludedOpts = null, filteredDataCol = null;
|
|
||||||
if(isRefreshed && this.disableExcludedOptions){ excludedOpts = []; filteredDataCol = []; }
|
|
||||||
|
|
||||||
for(var k=this.refRow; k<this.nbRows; k++)
|
|
||||||
{
|
|
||||||
// always visible rows don't need to appear on selects as always valid
|
|
||||||
if( this.hasVisibleRows && this.visibleRows.tf_Has(k) && !this.paging )
|
|
||||||
continue;
|
|
||||||
|
|
||||||
var cell = row[k].cells;
|
|
||||||
var nchilds = cell.length;
|
|
||||||
|
|
||||||
if(nchilds == this.nbCells && !isCustomSlc)
|
|
||||||
{// checks if row has exact cell #
|
|
||||||
for(var j=0; j<nchilds; j++)// this loop retrieves cell data
|
|
||||||
{
|
|
||||||
if((colIndex==j && (!isRefreshed || (isRefreshed && this.disableExcludedOptions))) ||
|
|
||||||
(colIndex==j && isRefreshed && ((row[k].style.display == '' && !this.paging) ||
|
|
||||||
( this.paging && (!this.validRowsIndex || (this.validRowsIndex && this.validRowsIndex.tf_Has(k)))
|
|
||||||
&& ((activeFlt==undefined || activeFlt==colIndex) || (activeFlt!=colIndex && this.validRowsIndex.tf_Has(k) ))) )))
|
|
||||||
{
|
|
||||||
var cell_data = this.GetCellData(j, cell[j]);
|
|
||||||
var cell_string = cell_data.tf_MatchCase(this.matchCase);//Váry Péter's patch
|
|
||||||
// checks if celldata is already in array
|
|
||||||
if(!optArray.tf_Has(cell_string,this.matchCase)) optArray.push(cell_data);
|
|
||||||
|
|
||||||
if(isRefreshed && this.disableExcludedOptions){
|
|
||||||
if(!filteredDataCol[j]) filteredDataCol[j] = this.GetFilteredDataCol(j);
|
|
||||||
if(!filteredDataCol[j].tf_Has(cell_string,this.matchCase)
|
|
||||||
&& !excludedOpts.tf_Has(cell_string,this.matchCase) && !this.isFirstLoad) excludedOpts.push(cell_data);
|
|
||||||
}
|
|
||||||
}//if colIndex==j
|
|
||||||
}//for j
|
|
||||||
}//if
|
|
||||||
}//for k
|
|
||||||
|
|
||||||
//Retrieves custom values
|
|
||||||
if(isCustomSlc)
|
|
||||||
{
|
|
||||||
var customValues = this.__getCustomValues(colIndex);
|
|
||||||
optArray = customValues[0];
|
|
||||||
optTxt = customValues[1];
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.sortSlc && !isCustomSlc){
|
|
||||||
if (!this.matchCase){
|
|
||||||
optArray.sort(tf_IgnoreCaseSort);
|
|
||||||
if(excludedOpts) excludedOpts.sort(tf_IgnoreCaseSort);
|
|
||||||
} else { optArray.sort(); if(excludedOpts){ excludedOpts.sort(); } }
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.sortNumAsc && this.sortNumAsc.tf_Has(colIndex))
|
|
||||||
{//asc sort
|
|
||||||
try{
|
|
||||||
optArray.sort( tf_NumSortAsc );
|
|
||||||
if(excludedOpts) excludedOpts.sort( tf_NumSortAsc );
|
|
||||||
if(isCustomSlc) optTxt.sort( tf_NumSortAsc );
|
|
||||||
} catch(e) {
|
|
||||||
optArray.sort(); if(excludedOpts){ excludedOpts.sort(); }
|
|
||||||
if(isCustomSlc) optTxt.sort();
|
|
||||||
}//in case there are alphanumeric values
|
|
||||||
}
|
|
||||||
if(this.sortNumDesc && this.sortNumDesc.tf_Has(colIndex))
|
|
||||||
{//desc sort
|
|
||||||
try{
|
|
||||||
optArray.sort( tf_NumSortDesc );
|
|
||||||
if(excludedOpts) excludedOpts.sort( tf_NumSortDesc );
|
|
||||||
if(isCustomSlc) optTxt.sort( tf_NumSortDesc );
|
|
||||||
} catch(e) {
|
|
||||||
optArray.sort(); if(excludedOpts){ excludedOpts.sort(); }
|
|
||||||
if(isCustomSlc) optTxt.sort();
|
|
||||||
}//in case there are alphanumeric values
|
|
||||||
}
|
|
||||||
|
|
||||||
AddOpts();//populates drop-down
|
|
||||||
|
|
||||||
function AddOpt0()
|
|
||||||
{// adds 1st option
|
|
||||||
if( fillMethod == 'innerhtml' )
|
|
||||||
slcInnerHtml += '<option value="">'+o.displayAllText+'</option>';
|
|
||||||
else {
|
|
||||||
var opt0 = tf_CreateOpt((!o.enableSlcResetFilter ? '' : o.displayAllText),'');
|
|
||||||
if(!o.enableSlcResetFilter) opt0.style.display = 'none';
|
|
||||||
slc.appendChild(opt0);
|
|
||||||
if(o.enableEmptyOption){
|
|
||||||
var opt1 = tf_CreateOpt(o.emptyText,o.emOperator);
|
|
||||||
slc.appendChild(opt1);
|
|
||||||
}
|
|
||||||
if(o.enableNonEmptyOption){
|
|
||||||
var opt2 = tf_CreateOpt(o.nonEmptyText,o.nmOperator);
|
|
||||||
slc.appendChild(opt2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function AddOpts()
|
|
||||||
{// populates select
|
|
||||||
var slcValue = slc.value;
|
|
||||||
slc.innerHTML = '';
|
|
||||||
AddOpt0();
|
|
||||||
|
|
||||||
for(var y=0; y<optArray.length; y++)
|
|
||||||
{
|
|
||||||
if(optArray[y]=='') continue;
|
|
||||||
var val = optArray[y]; //option value
|
|
||||||
var lbl = (isCustomSlc) ? optTxt[y] : optArray[y]; //option text
|
|
||||||
var isDisabled = false;
|
|
||||||
if(isRefreshed && o.disableExcludedOptions &&
|
|
||||||
excludedOpts.tf_Has(val.tf_MatchCase(o.matchCase), o.matchCase))
|
|
||||||
isDisabled = true;
|
|
||||||
|
|
||||||
if( fillMethod == 'innerhtml' )
|
|
||||||
{
|
|
||||||
var slcAttr = '';
|
|
||||||
if( o.fillSlcOnDemand && slcValue==optArray[y] )
|
|
||||||
slcAttr = 'selected="selected"';
|
|
||||||
slcInnerHtml += '<option value="'+val+'" '
|
|
||||||
+slcAttr+ (isDisabled ? 'disabled="disabled"' : '')+'>'+lbl+'</option>';
|
|
||||||
} else {
|
|
||||||
var opt;
|
|
||||||
//fill select on demand
|
|
||||||
if(o.fillSlcOnDemand && slcValue==optArray[y] && o['col'+colIndex]==o.fltTypeSlc)
|
|
||||||
opt = tf_CreateOpt( lbl, val, true );
|
|
||||||
else{
|
|
||||||
if( o['col'+colIndex]!=o.fltTypeMulti )
|
|
||||||
opt = tf_CreateOpt( lbl, val,
|
|
||||||
(flts_values[colIndex]!=' ' && val==flts_values[colIndex])
|
|
||||||
? true : false );
|
|
||||||
else
|
|
||||||
{
|
|
||||||
opt = tf_CreateOpt( lbl, val,
|
|
||||||
(fltArr.tf_Has(optArray[y].tf_MatchCase(o.matchCase),o.matchCase)
|
|
||||||
|| fltArr.toString().indexOf(val)!= -1)
|
|
||||||
? true : false );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(isDisabled) opt.disabled = true;
|
|
||||||
slc.appendChild(opt);
|
|
||||||
}
|
|
||||||
}// for y
|
|
||||||
|
|
||||||
if( fillMethod == 'innerhtml' ) slc.innerHTML += slcInnerHtml;
|
|
||||||
slc.setAttribute('filled','1');
|
|
||||||
}// fn AddOpt
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.__deferMultipleSelection = function(slc,index,filter)
|
|
||||||
/*====================================================
|
|
||||||
- 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)
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(slc.nodeName.tf_LCase() != 'select') return;
|
|
||||||
var doFilter = (filter==undefined) ? false : filter;
|
|
||||||
var o = this;
|
|
||||||
window.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();
|
|
||||||
},
|
|
||||||
.1
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.__getCustomValues = function(colIndex)
|
|
||||||
/*====================================================
|
|
||||||
- Returns an array [[values],[texts]] with
|
|
||||||
custom values for a given filter
|
|
||||||
- Param: column index (integer)
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(colIndex==undefined) return;
|
|
||||||
var isCustomSlc = (this.hasCustomSlcOptions //custom select test
|
|
||||||
&& this.customSlcOptions.cols.tf_Has(colIndex));
|
|
||||||
if(!isCustomSlc) return;
|
|
||||||
var optTxt = [], optArray = [];
|
|
||||||
var index = this.customSlcOptions.cols.tf_IndexByValue(colIndex);
|
|
||||||
var slcValues = this.customSlcOptions.values[index];
|
|
||||||
var slcTexts = this.customSlcOptions.texts[index];
|
|
||||||
var slcSort = this.customSlcOptions.sorts[index];
|
|
||||||
for(var r=0; r<slcValues.length; r++)
|
|
||||||
{
|
|
||||||
optArray.push(slcValues[r]);
|
|
||||||
if(slcTexts[r]!=undefined)
|
|
||||||
optTxt.push(slcTexts[r]);
|
|
||||||
else
|
|
||||||
optTxt.push(slcValues[r]);
|
|
||||||
}
|
|
||||||
if(slcSort)
|
|
||||||
{
|
|
||||||
optArray.sort();
|
|
||||||
optTxt.sort();
|
|
||||||
}
|
|
||||||
return [optArray,optTxt];
|
|
||||||
}
|
|
||||||
|
|
||||||
function tf_CreateOpt(text,value,isSel)
|
|
||||||
/*====================================================
|
|
||||||
- creates an option element and returns it:
|
|
||||||
- text: displayed text (string)
|
|
||||||
- value: option value (string)
|
|
||||||
- isSel: is selected option (boolean)
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
var isSelected = isSel ? true : false;
|
|
||||||
var opt = (isSelected)
|
|
||||||
? tf_CreateElm('option',['value',value],['selected','true'])
|
|
||||||
: tf_CreateElm('option',['value',value]);
|
|
||||||
opt.appendChild(tf_CreateText(text));
|
|
||||||
return opt;
|
|
||||||
}
|
|
161
dist/TF_Modules/tf_popupFilters.js
vendored
|
@ -1,161 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Popup filters feature v1.2
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.SetPopupFilterIcons = function()
|
|
||||||
/*====================================================
|
|
||||||
- generates popup filters div
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.popUpFilters) return;
|
|
||||||
this.isExternalFlt = true; //external filters behaviour is enabled
|
|
||||||
var f = this.fObj;
|
|
||||||
this.popUpImgFlt = f.popup_filters_image!=undefined //filter icon path
|
|
||||||
? f.popup_filters_image : this.themesPath+'icn_filter.gif';
|
|
||||||
this.popUpImgFltActive = f.popup_filters_image_active!=undefined //active filter icon path
|
|
||||||
? f.popup_filters_image_active : this.themesPath+'icn_filterActive.gif';
|
|
||||||
this.popUpImgFltHtml = f.popup_filters_image_html!=undefined
|
|
||||||
? f.popup_filters_image_html : '<img src="'+ this.popUpImgFlt +'" alt="Column filter" />';
|
|
||||||
this.popUpDivCssClass = f.popup_div_css_class!=undefined //defines css class for popup div containing filter
|
|
||||||
? f.popup_div_css_class : 'popUpFilter';
|
|
||||||
this.onBeforePopUpOpen = tf_IsFn(f.on_before_popup_filter_open) //callback function before popup filtes is opened
|
|
||||||
? f.on_before_popup_filter_open : null;
|
|
||||||
this.onAfterPopUpOpen = tf_IsFn(f.on_after_popup_filter_open) //callback function after popup filtes is opened
|
|
||||||
? f.on_after_popup_filter_open : null;
|
|
||||||
this.onBeforePopUpClose = tf_IsFn(f.on_before_popup_filter_close) //callback function before popup filtes is closed
|
|
||||||
? f.on_before_popup_filter_close : null;
|
|
||||||
this.onAfterPopUpClose = tf_IsFn(f.on_after_popup_filter_close) //callback function after popup filtes is closed
|
|
||||||
? f.on_after_popup_filter_close : null;
|
|
||||||
this.externalFltTgtIds = [];
|
|
||||||
this.popUpFltSpans = []; //stores filters spans
|
|
||||||
this.popUpFltImgs = []; //stores filters icons
|
|
||||||
this.popUpFltElms = !this.popUpFltElmCache ? [] : this.popUpFltElmCache; //stores filters containers
|
|
||||||
this.popUpFltAdjustToContainer = true;
|
|
||||||
|
|
||||||
var o = this;
|
|
||||||
for(var i=0; i<this.nbCells; i++){
|
|
||||||
if(this['col'+i] == this.fltTypeNone) continue;
|
|
||||||
var popUpSpan = tf_CreateElm('span', ['id', this.prfxPopUpSpan+this.id+'_'+i], ['ci',i]);
|
|
||||||
popUpSpan.innerHTML = this.popUpImgFltHtml;
|
|
||||||
var header = this.GetHeaderElement(i);
|
|
||||||
header.appendChild(popUpSpan);
|
|
||||||
popUpSpan.onclick = function(e){
|
|
||||||
var evt = e || window.event;
|
|
||||||
var colIndex = parseInt(this.getAttribute('ci'));
|
|
||||||
o.CloseAllPopupFilters(colIndex);
|
|
||||||
o.TogglePopupFilter(colIndex);
|
|
||||||
|
|
||||||
if(o.popUpFltAdjustToContainer){
|
|
||||||
var popUpDiv = o.popUpFltElms[colIndex];
|
|
||||||
var header = o.GetHeaderElement(colIndex);
|
|
||||||
var headerWidth = header.clientWidth * .95;
|
|
||||||
if(!tf_isNotIE){
|
|
||||||
var headerLeft = tf_ObjPosition(header, [header.nodeName])[0];
|
|
||||||
popUpDiv.style.left = (headerLeft) + 'px';
|
|
||||||
}
|
|
||||||
popUpDiv.style.width = parseInt(headerWidth) + 'px';
|
|
||||||
}
|
|
||||||
tf_CancelEvent(evt);
|
|
||||||
tf_StopEvent(evt);
|
|
||||||
};
|
|
||||||
this.popUpFltSpans[i] = popUpSpan;
|
|
||||||
this.popUpFltImgs[i] = popUpSpan.firstChild;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.SetPopupFilters = function()
|
|
||||||
/*====================================================
|
|
||||||
- generates all popup filters div
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
for(var i=0; i<this.popUpFltElmCache.length; i++)
|
|
||||||
this.SetPopupFilter(i, this.popUpFltElmCache[i]);
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.SetPopupFilter = function(colIndex, div)
|
|
||||||
/*====================================================
|
|
||||||
- generates a popup filters div for specifies
|
|
||||||
column
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
var popUpDiv = !div ? tf_CreateElm('div', ['id', this.prfxPopUpDiv+this.id+'_'+colIndex]) : div;
|
|
||||||
popUpDiv.className = this.popUpDivCssClass;
|
|
||||||
this.externalFltTgtIds.push(this.prfxPopUpDiv+this.id+'_'+colIndex);
|
|
||||||
var header = this.GetHeaderElement(colIndex);
|
|
||||||
header.insertBefore(popUpDiv, header.firstChild);
|
|
||||||
popUpDiv.onclick = function(e){ tf_StopEvent(e || window.event); };
|
|
||||||
this.popUpFltElms[colIndex] = popUpDiv;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.TogglePopupFilter = function(colIndex)
|
|
||||||
/*====================================================
|
|
||||||
- toggles popup filters div
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
var popUpFltElm = this.popUpFltElms[colIndex];
|
|
||||||
if(popUpFltElm.style.display == 'none' || popUpFltElm.style.display == ''){
|
|
||||||
if(this.onBeforePopUpOpen!=null) this.onBeforePopUpOpen.call(null,this, this.popUpFltElms[colIndex],colIndex);
|
|
||||||
popUpFltElm.style.display = 'block';
|
|
||||||
if(this['col'+colIndex] == this.fltTypeInp) this.GetFilterElement(colIndex).focus();
|
|
||||||
if(this.onAfterPopUpOpen!=null) this.onAfterPopUpOpen.call(null,this, this.popUpFltElms[colIndex],colIndex);
|
|
||||||
} else {
|
|
||||||
if(this.onBeforePopUpClose!=null) this.onBeforePopUpClose.call(null,this, this.popUpFltElms[colIndex],colIndex);
|
|
||||||
popUpFltElm.style.display = 'none';
|
|
||||||
if(this.onAfterPopUpClose!=null) this.onAfterPopUpClose.call(null,this, this.popUpFltElms[colIndex],colIndex);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.CloseAllPopupFilters = function(exceptColIndex)
|
|
||||||
/*====================================================
|
|
||||||
- closes all popup filters
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
for(var i=0; i<this.popUpFltElms.length; i++){
|
|
||||||
if(i == exceptColIndex) continue;
|
|
||||||
var popUpFltElm = this.popUpFltElms[i];
|
|
||||||
if(popUpFltElm) popUpFltElm.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.RemovePopupFilters = function()
|
|
||||||
/*====================================================
|
|
||||||
- removes popup filters div
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
this.popUpFltElmCache = [];
|
|
||||||
for(var i=0; i<this.popUpFltElms.length; i++){
|
|
||||||
var popUpFltElm = this.popUpFltElms[i];
|
|
||||||
var popUpFltSpan = this.popUpFltSpans[i];
|
|
||||||
if(popUpFltElm){
|
|
||||||
popUpFltElm.parentNode.removeChild(popUpFltElm);
|
|
||||||
this.popUpFltElmCache[i] = popUpFltElm;
|
|
||||||
}
|
|
||||||
popUpFltElm = null;
|
|
||||||
if(popUpFltSpan) popUpFltSpan.parentNode.removeChild(popUpFltSpan);
|
|
||||||
popUpFltSpan = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.SetPopupFilterIcon = function(colIndex, active)
|
|
||||||
/*====================================================
|
|
||||||
- sets inactive or active filter icon
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
var activeImg = active==undefined ? true : active;
|
|
||||||
if(this.popUpFltImgs[colIndex])
|
|
||||||
this.popUpFltImgs[colIndex].src = (active) ? this.popUpImgFltActive : this.popUpImgFlt;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.SetAllPopupFiltersIcon = function(active)
|
|
||||||
/*====================================================
|
|
||||||
- sets inactive or active filter icon for all
|
|
||||||
filters
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
var activeImg = active==undefined ? false : active;
|
|
||||||
for(var i=0; i<this.popUpFltImgs.length; i++)
|
|
||||||
this.SetPopupFilterIcon(i, false);
|
|
||||||
}
|
|
230
dist/TF_Modules/tf_publicMethods.js
vendored
|
@ -1,230 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Additional handy public methods for developers v1.3
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.HasGrid = function()
|
|
||||||
/*====================================================
|
|
||||||
- checks if table has a filter grid
|
|
||||||
- returns a boolean
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
return this.hasGrid;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.GetFiltersId = function()
|
|
||||||
/*====================================================
|
|
||||||
- returns an array containing filters ids
|
|
||||||
- Note that hidden filters are also returned
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if( !this.hasGrid ) return;
|
|
||||||
return this.fltIds;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.GetValidRowsIndex = function(reCalc)
|
|
||||||
/*====================================================
|
|
||||||
- returns an array containing valid rows indexes
|
|
||||||
(valid rows upon filtering)
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if( !this.hasGrid ) return;
|
|
||||||
if(!reCalc){ return this.validRowsIndex; }
|
|
||||||
this.validRowsIndex = [];
|
|
||||||
for(var k=this.refRow; k<this.GetRowsNb(true); k++){
|
|
||||||
var r = this.tbl.rows[k];
|
|
||||||
if(!this.paging){
|
|
||||||
if(this.GetRowDisplay(r) != 'none')
|
|
||||||
this.validRowsIndex.push(r.rowIndex);
|
|
||||||
} else {
|
|
||||||
if(r.getAttribute('validRow') == 'true' || r.getAttribute('validRow') == null)
|
|
||||||
this.validRowsIndex.push(r.rowIndex);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return this.validRowsIndex;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.GetFiltersRowIndex = function()
|
|
||||||
/*====================================================
|
|
||||||
- Returns the index of the row containing the
|
|
||||||
filters
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if( !this.hasGrid ) return;
|
|
||||||
return this.filtersRowIndex;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.GetHeadersRowIndex = function()
|
|
||||||
/*====================================================
|
|
||||||
- Returns the index of the headers row
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if( !this.hasGrid ) return;
|
|
||||||
return this.headersRow;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.GetStartRowIndex = function()
|
|
||||||
/*====================================================
|
|
||||||
- Returns the index of the row from which will
|
|
||||||
start the filtering process (1st filterable row)
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if( !this.hasGrid ) return;
|
|
||||||
return this.refRow;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.GetLastRowIndex = function()
|
|
||||||
/*====================================================
|
|
||||||
- Returns the index of the last row
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if( !this.hasGrid ) return;
|
|
||||||
return (this.nbRows-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
//TF.prototype.AddPaging = function(filterTable)
|
|
||||||
/*====================================================
|
|
||||||
- Adds paging feature if filter grid bar is
|
|
||||||
already set
|
|
||||||
- Param(s):
|
|
||||||
- execFilter: if true table is filtered
|
|
||||||
(boolean)
|
|
||||||
=====================================================*/
|
|
||||||
/*{
|
|
||||||
if( !this.hasGrid || this.paging ) return;
|
|
||||||
this.paging = true;
|
|
||||||
this.isPagingRemoved = true;
|
|
||||||
this.SetPaging();
|
|
||||||
if(filterTable) this.Filter();
|
|
||||||
}*/
|
|
||||||
|
|
||||||
TF.prototype.GetHeaderElement = function(colIndex)
|
|
||||||
/*====================================================
|
|
||||||
- returns a header DOM element for a given column
|
|
||||||
index
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
var table = (this.gridLayout) ? this.headTbl : this.tbl;
|
|
||||||
var header, tHead = tf_Tag(this.tbl,'thead');
|
|
||||||
for(var i=0; i<this.nbCells; i++)
|
|
||||||
{
|
|
||||||
if(i != colIndex) continue;
|
|
||||||
if(tHead.length == 0)
|
|
||||||
header = table.rows[this.headersRow].cells[i];
|
|
||||||
if(tHead.length == 1)
|
|
||||||
header = tHead[0].rows[this.headersRow].cells[i];
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
return header;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.GetTableData = function()
|
|
||||||
/*====================================================
|
|
||||||
- returns an array containing table data:
|
|
||||||
[rowindex,[value1,value2,value3...]]
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
var row = this.tbl.rows;
|
|
||||||
for(var k=this.refRow; k<this.nbRows; k++)
|
|
||||||
{
|
|
||||||
var rowData, cellData;
|
|
||||||
rowData = [k,[]];
|
|
||||||
var cells = row[k].cells;
|
|
||||||
for(var j=0; j<cells.length; j++)
|
|
||||||
{// this loop retrieves cell data
|
|
||||||
var cell_data = this.GetCellData(j, cells[j]);
|
|
||||||
rowData[1].push(cell_data);
|
|
||||||
}
|
|
||||||
this.tblData.push(rowData)
|
|
||||||
}
|
|
||||||
return this.tblData;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.GetFilteredData = function(includeHeaders)
|
|
||||||
/*====================================================
|
|
||||||
- returns an array containing filtered data:
|
|
||||||
[rowindex,[value1,value2,value3...]]
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.validRowsIndex) return [];
|
|
||||||
var row = this.tbl.rows;
|
|
||||||
var filteredData = [];
|
|
||||||
if(includeHeaders){
|
|
||||||
var table = (this.gridLayout) ? this.headTbl : this.tbl;
|
|
||||||
var r = table.rows[this.headersRow];
|
|
||||||
var rowData = [r.rowIndex,[]];
|
|
||||||
for(var j=0; j<this.nbCells; j++)
|
|
||||||
{
|
|
||||||
var headerText = this.GetCellData(j, r.cells[j]);
|
|
||||||
rowData[1].push(headerText);
|
|
||||||
}
|
|
||||||
filteredData.push(rowData);
|
|
||||||
}
|
|
||||||
//for(var i=0; i<this.validRowsIndex.length; i++)
|
|
||||||
var validRows = this.GetValidRowsIndex(true);
|
|
||||||
for(var i=0; i<validRows.length; i++)
|
|
||||||
{
|
|
||||||
var rowData, cellData;
|
|
||||||
rowData = [this.validRowsIndex[i],[]];
|
|
||||||
var cells = row[this.validRowsIndex[i]].cells;
|
|
||||||
for(var j=0; j<cells.length; j++)
|
|
||||||
{
|
|
||||||
var cell_data = this.GetCellData(j, cells[j]);
|
|
||||||
rowData[1].push(cell_data);
|
|
||||||
}
|
|
||||||
filteredData.push(rowData);
|
|
||||||
}
|
|
||||||
return filteredData;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.GetFilteredDataCol = function(colIndex)
|
|
||||||
/*====================================================
|
|
||||||
- returns an array containing filtered data of a
|
|
||||||
specified column.
|
|
||||||
- Params:
|
|
||||||
- colIndex: index of the column (number)
|
|
||||||
- returned array:
|
|
||||||
[value1,value2,value3...]
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(colIndex==undefined) return [];
|
|
||||||
var data = this.GetFilteredData();
|
|
||||||
var colData = [];
|
|
||||||
for(var i=0; i<data.length; i++)
|
|
||||||
{
|
|
||||||
var r = data[i];
|
|
||||||
var d = r[1]; //cols values of current row
|
|
||||||
var c = d[colIndex]; //data of searched column
|
|
||||||
colData.push(c);
|
|
||||||
}
|
|
||||||
return colData;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.GetConfigObject = function()
|
|
||||||
/*====================================================
|
|
||||||
- returns the original configuration object
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
return this.fObj;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.GetImportedModules = function()
|
|
||||||
/*====================================================
|
|
||||||
- returns the modules imported by the
|
|
||||||
tablefilter.js document
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
return this.importedModules || [];
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.GetFilterableRowsNb = function()
|
|
||||||
/*====================================================
|
|
||||||
- returns the total number of rows that can be
|
|
||||||
filtered
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
return this.GetRowsNb(false);
|
|
||||||
}
|
|
||||||
|
|
51
dist/TF_Modules/tf_refreshFilters.js
vendored
|
@ -1,51 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Refresh filters feature v1.0
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.RefreshFiltersGrid = function()
|
|
||||||
/*====================================================
|
|
||||||
- retrieves select, multiple and checklist filters
|
|
||||||
- calls method repopulating filters
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
var slcA1 = this.GetFiltersByType( this.fltTypeSlc,true );
|
|
||||||
var slcA2 = this.GetFiltersByType( this.fltTypeMulti,true );
|
|
||||||
var slcA3 = this.GetFiltersByType( this.fltTypeCheckList,true );
|
|
||||||
var slcIndex = slcA1.concat(slcA2);
|
|
||||||
slcIndex = slcIndex.concat(slcA3);
|
|
||||||
|
|
||||||
if( this.activeFilterId!=null )//for paging
|
|
||||||
{
|
|
||||||
var activeFlt = this.activeFilterId.split('_')[0];
|
|
||||||
activeFlt = activeFlt.split(this.prfxFlt)[1];
|
|
||||||
var slcSelectedValue;
|
|
||||||
for(var i=0; i<slcIndex.length; i++)
|
|
||||||
{
|
|
||||||
var curSlc = tf_Id(this.fltIds[slcIndex[i]]);
|
|
||||||
slcSelectedValue = this.GetFilterValue( slcIndex[i] );
|
|
||||||
if(activeFlt!=slcIndex[i] || (this.paging && slcA1.tf_Has(slcIndex[i]) && activeFlt==slcIndex[i] ) ||
|
|
||||||
( !this.paging && (slcA3.tf_Has(slcIndex[i]) || slcA2.tf_Has(slcIndex[i]) )) ||
|
|
||||||
slcSelectedValue==this.displayAllText )
|
|
||||||
{
|
|
||||||
if(slcA3.tf_Has(slcIndex[i]))
|
|
||||||
this.checkListDiv[slcIndex[i]].innerHTML = '';
|
|
||||||
else curSlc.innerHTML = '';
|
|
||||||
|
|
||||||
if(this.fillSlcOnDemand) { //1st option needs to be inserted
|
|
||||||
var opt0 = tf_CreateOpt(this.displayAllText,'');
|
|
||||||
if(curSlc) curSlc.appendChild( opt0 );
|
|
||||||
}
|
|
||||||
|
|
||||||
if(slcA3.tf_Has(slcIndex[i]))
|
|
||||||
this._PopulateCheckList(slcIndex[i]);
|
|
||||||
else
|
|
||||||
this._PopulateSelect(slcIndex[i],true);
|
|
||||||
|
|
||||||
this.SetFilterValue(slcIndex[i],slcSelectedValue);
|
|
||||||
}
|
|
||||||
}// for i
|
|
||||||
}
|
|
||||||
}
|
|
174
dist/TF_Modules/tf_resetBtn.js
vendored
|
@ -1,174 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Reset button (clear filters) and Help instructions feature v1.3
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
--------------------------------------------------------------------------
|
|
||||||
- Changelog:
|
|
||||||
1.1 [12-09-10]
|
|
||||||
Help instructions methods added to this module
|
|
||||||
1.2 [31-07-11]
|
|
||||||
Button icon shown by default
|
|
||||||
1.3 [10-03-12]
|
|
||||||
Added year property to help instructions (helpInstrDefaultHtml)
|
|
||||||
1.4 [27-04-12]
|
|
||||||
Modfied help instructions text
|
|
||||||
------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.SetResetBtn = function()
|
|
||||||
/*====================================================
|
|
||||||
- Generates reset button
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.hasGrid && !this.isFirstLoad) return;
|
|
||||||
if( this.btnResetEl!=null ) return;
|
|
||||||
var f = this.fObj;
|
|
||||||
this.btnResetTgtId = f.btn_reset_target_id!=undefined //id of container element
|
|
||||||
? f.btn_reset_target_id : null;
|
|
||||||
this.btnResetEl = null; //reset button element
|
|
||||||
this.btnResetText = f.btn_reset_text!=undefined ? f.btn_reset_text : 'Reset'; //defines reset text
|
|
||||||
this.btnResetTooltip = f.btn_reset_tooltip!=undefined ? f.btn_reset_tooltip : 'Clear filters'; //defines reset button tooltip
|
|
||||||
this.btnResetHtml = f.btn_reset_html!=undefined ? f.btn_reset_html : (!this.enableIcons ? null : //defines reset button innerHtml
|
|
||||||
'<input type="button" value="" class="'+this.btnResetCssClass+'" title="'+this.btnResetTooltip+'" />');
|
|
||||||
|
|
||||||
var resetspan = tf_CreateElm('span',['id',this.prfxResetSpan+this.id]);
|
|
||||||
|
|
||||||
// reset button is added to defined element
|
|
||||||
if(this.btnResetTgtId==null) this.SetTopDiv();
|
|
||||||
var targetEl = ( this.btnResetTgtId==null ) ? this.rDiv : tf_Id( this.btnResetTgtId );
|
|
||||||
targetEl.appendChild(resetspan);
|
|
||||||
|
|
||||||
if(this.btnResetHtml==null)
|
|
||||||
{
|
|
||||||
var fltreset = tf_CreateElm( 'a', ['href','javascript:void(0);'] );
|
|
||||||
fltreset.className = this.btnResetCssClass;
|
|
||||||
fltreset.appendChild(tf_CreateText(this.btnResetText));
|
|
||||||
resetspan.appendChild(fltreset);
|
|
||||||
fltreset.onclick = this.Evt._Clear;
|
|
||||||
} else {
|
|
||||||
resetspan.innerHTML = this.btnResetHtml;
|
|
||||||
var resetEl = resetspan.firstChild;
|
|
||||||
resetEl.onclick = this.Evt._Clear;
|
|
||||||
}
|
|
||||||
this.btnResetEl = tf_Id(this.prfxResetSpan+this.id).firstChild;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.RemoveResetBtn = function()
|
|
||||||
/*====================================================
|
|
||||||
- Removes reset button
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.hasGrid) return;
|
|
||||||
if( this.btnResetEl==null ) return;
|
|
||||||
var resetspan = tf_Id(this.prfxResetSpan+this.id);
|
|
||||||
if( resetspan!=null )
|
|
||||||
resetspan.parentNode.removeChild( resetspan );
|
|
||||||
this.btnResetEl = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.SetHelpInstructions = function()
|
|
||||||
/*====================================================
|
|
||||||
- Generates help instructions
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if( this.helpInstrBtnEl!=null ) return;
|
|
||||||
var f = this.fObj;
|
|
||||||
this.helpInstrTgtId = f.help_instructions_target_id!=undefined //id of custom container element for instructions
|
|
||||||
? f.help_instructions_target_id : null;
|
|
||||||
this.helpInstrContTgtId = f.help_instructions_container_target_id!=undefined //id of custom container element for instructions
|
|
||||||
? f.help_instructions_container_target_id : null;
|
|
||||||
this.helpInstrText = f.help_instructions_text //defines help text
|
|
||||||
? f.help_instructions_text : 'Use the filters above each column to filter and limit table data. ' +
|
|
||||||
'Avanced searches can be performed by using the following operators: <br />' +
|
|
||||||
'<i><</i>, <b><=</b>, <b>></b>, <b>>=</b>, <b>=</b>, <b>*</b>, <b>!</b>, <b>{</b>, <b>}</b>, <b>||</b>, ' +
|
|
||||||
'<b>&&</b>, <b>[empty]</b>, <b>[nonempty]</b>, <b>rgx:</b><br/> These operators are described here:<br/>' +
|
|
||||||
'<a href="http://tablefilter.free.fr/#operators" target="_blank">http://tablefilter.free.fr/#operators</a><hr/>';
|
|
||||||
this.helpInstrHtml = f.help_instructions_html!=undefined
|
|
||||||
? f.help_instructions_html : null; //defines help innerHtml
|
|
||||||
this.helpInstrBtnText = f.help_instructions_btn_text!=undefined
|
|
||||||
? f.help_instructions_btn_text : '?'; //defines help button text
|
|
||||||
this.helpInstrBtnHtml = f.help_instructions_btn_html!=undefined
|
|
||||||
? f.help_instructions_btn_html : null; //defines reset button innerHtml
|
|
||||||
this.helpInstrBtnCssClass = f.help_instructions_btn_css_class!=undefined //defines css class for help button
|
|
||||||
? f.help_instructions_btn_css_class : 'helpBtn';
|
|
||||||
this.helpInstrContCssClass = f.help_instructions_container_css_class!=undefined //defines css class for help container
|
|
||||||
? f.help_instructions_container_css_class : 'helpCont';
|
|
||||||
this.helpInstrBtnEl = null; //help button element
|
|
||||||
this.helpInstrContEl = null; //help content div
|
|
||||||
this.helpInstrDefaultHtml = '<div class="helpFooter"><h4>HTML Table Filter Generator v. '+ this.version +'</h4>' +
|
|
||||||
'<a href="http://tablefilter.free.fr" target="_blank">http://tablefilter.free.fr</a><br/>' +
|
|
||||||
'<span>©2009-'+ this.year +' Max Guglielmi.</span><div align="center" style="margin-top:8px;">' +
|
|
||||||
'<a href="javascript:;" onclick="window[\'tf_'+ this.id +'\']._ToggleHelp();">Close</a></div></div>';
|
|
||||||
|
|
||||||
var helpspan = tf_CreateElm('span',['id',this.prfxHelpSpan+this.id]);
|
|
||||||
var helpdiv = tf_CreateElm('div',['id',this.prfxHelpDiv+this.id]);
|
|
||||||
|
|
||||||
//help button is added to defined element
|
|
||||||
if(this.helpInstrTgtId==null) this.SetTopDiv();
|
|
||||||
var targetEl = ( this.helpInstrTgtId==null ) ? this.rDiv : tf_Id( this.helpInstrTgtId );
|
|
||||||
targetEl.appendChild(helpspan);
|
|
||||||
|
|
||||||
var divContainer = ( this.helpInstrContTgtId==null ) ? helpspan : tf_Id( this.helpInstrContTgtId );
|
|
||||||
|
|
||||||
if(this.helpInstrBtnHtml == null)
|
|
||||||
{
|
|
||||||
divContainer.appendChild(helpdiv);
|
|
||||||
var helplink = tf_CreateElm( 'a', ['href','javascript:void(0);'] );
|
|
||||||
helplink.className = this.helpInstrBtnCssClass;
|
|
||||||
helplink.appendChild(tf_CreateText(this.helpInstrBtnText));
|
|
||||||
helpspan.appendChild(helplink);
|
|
||||||
helplink.onclick = this.Evt._OnHelpBtnClick;
|
|
||||||
} else {
|
|
||||||
helpspan.innerHTML += this.helpInstrBtnHtml;
|
|
||||||
var helpEl = helpspan.firstChild;
|
|
||||||
helpEl.onclick = this.Evt._OnHelpBtnClick;
|
|
||||||
divContainer.appendChild(helpdiv);
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.helpInstrHtml == null)
|
|
||||||
{
|
|
||||||
//helpdiv.appendChild(tf_CreateText(this.helpInstrText));
|
|
||||||
helpdiv.innerHTML = this.helpInstrText;
|
|
||||||
helpdiv.className = this.helpInstrContCssClass;
|
|
||||||
helpdiv.ondblclick = this.Evt._OnHelpBtnClick;
|
|
||||||
} else {
|
|
||||||
if(this.helpInstrContTgtId) divContainer.appendChild(helpdiv);
|
|
||||||
helpdiv.innerHTML = this.helpInstrHtml;
|
|
||||||
if(!this.helpInstrContTgtId){
|
|
||||||
helpdiv.className = this.helpInstrContCssClass;
|
|
||||||
helpdiv.ondblclick = this.Evt._OnHelpBtnClick;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
helpdiv.innerHTML += this.helpInstrDefaultHtml;
|
|
||||||
this.helpInstrContEl = helpdiv;
|
|
||||||
this.helpInstrBtnEl = helpspan;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.RemoveHelpInstructions = function()
|
|
||||||
/*====================================================
|
|
||||||
- Removes help instructions
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(this.helpInstrBtnEl==null) return;
|
|
||||||
this.helpInstrBtnEl.parentNode.removeChild(this.helpInstrBtnEl);
|
|
||||||
this.helpInstrBtnEl = null;
|
|
||||||
if(this.helpInstrContEl==null) return;
|
|
||||||
this.helpInstrContEl.parentNode.removeChild(this.helpInstrContEl);
|
|
||||||
this.helpInstrContEl = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype._ToggleHelp = function()
|
|
||||||
/*====================================================
|
|
||||||
- Toggles help div
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.helpInstrContEl) return;
|
|
||||||
var divDisplay = this.helpInstrContEl.style.display;
|
|
||||||
if(divDisplay == '' || divDisplay == 'none'){
|
|
||||||
this.helpInstrContEl.style.display = 'block';
|
|
||||||
var btnLeft = tf_ObjPosition(this.helpInstrBtnEl, [this.helpInstrBtnEl.nodeName])[0];
|
|
||||||
if(!this.helpInstrContTgtId)
|
|
||||||
this.helpInstrContEl.style.left = (btnLeft - this.helpInstrContEl.clientWidth + 25) + 'px';
|
|
||||||
}
|
|
||||||
else this.helpInstrContEl.style.display = 'none';
|
|
||||||
}
|
|
100
dist/TF_Modules/tf_rowsCounter.js
vendored
|
@ -1,100 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Rows counter feature v1.3
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.SetRowsCounter = function()
|
|
||||||
/*====================================================
|
|
||||||
- Generates rows counter label
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.hasGrid && !this.isFirstLoad) return;
|
|
||||||
if( this.rowsCounterSpan!=null ) return;
|
|
||||||
var f = this.fObj;
|
|
||||||
this.rowsCounterTgtId = f.rows_counter_target_id!=undefined //id of custom container element
|
|
||||||
? f.rows_counter_target_id : null;
|
|
||||||
this.rowsCounterDiv = null; //element containing tot nb rows
|
|
||||||
this.rowsCounterSpan = null; //element containing tot nb rows label
|
|
||||||
this.rowsCounterText = f.rows_counter_text!=undefined ? f.rows_counter_text : 'Rows: '; //defines rows counter text
|
|
||||||
this.fromToTextSeparator = f.from_to_text_separator!=undefined ? f.from_to_text_separator : '-';
|
|
||||||
this.overText = f.over_text!=undefined ? f.over_text : ' / ';
|
|
||||||
this.totRowsCssClass = f.tot_rows_css_class!=undefined ? f.tot_rows_css_class : 'tot'; //defines css class rows counter
|
|
||||||
this.onBeforeRefreshCounter = tf_IsFn(f.on_before_refresh_counter) ? f.on_before_refresh_counter : null; //callback raised before counter is refreshed
|
|
||||||
this.onAfterRefreshCounter = tf_IsFn(f.on_after_refresh_counter) ? f.on_after_refresh_counter : null; //callback raised after counter is refreshed
|
|
||||||
var countDiv = tf_CreateElm( 'div',['id',this.prfxCounter+this.id] ); //rows counter container
|
|
||||||
countDiv.className = this.totRowsCssClass;
|
|
||||||
var countSpan = tf_CreateElm( 'span',['id',this.prfxTotRows+this.id] ); //rows counter label
|
|
||||||
var countText = tf_CreateElm( 'span',['id',this.prfxTotRowsTxt+this.id] );
|
|
||||||
countText.appendChild( tf_CreateText(this.rowsCounterText) );
|
|
||||||
|
|
||||||
// counter is added to defined element
|
|
||||||
if(this.rowsCounterTgtId==null) this.SetTopDiv();
|
|
||||||
var targetEl = ( this.rowsCounterTgtId==null ) ? this.lDiv : tf_Id( this.rowsCounterTgtId );
|
|
||||||
|
|
||||||
//IE only: clears all for sure
|
|
||||||
if(this.rowsCounterDiv && tf_isIE)
|
|
||||||
this.rowsCounterDiv.outerHTML = '';
|
|
||||||
|
|
||||||
if( this.rowsCounterTgtId==null )
|
|
||||||
{//default container: 'lDiv'
|
|
||||||
countDiv.appendChild(countText);
|
|
||||||
countDiv.appendChild(countSpan);
|
|
||||||
targetEl.appendChild(countDiv);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{// custom container, no need to append statusDiv
|
|
||||||
targetEl.appendChild(countText);
|
|
||||||
targetEl.appendChild(countSpan);
|
|
||||||
}
|
|
||||||
this.rowsCounterDiv = tf_Id( this.prfxCounter+this.id );
|
|
||||||
this.rowsCounterSpan = tf_Id( this.prfxTotRows+this.id );
|
|
||||||
|
|
||||||
this.RefreshNbRows();
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.RemoveRowsCounter = function()
|
|
||||||
/*====================================================
|
|
||||||
- Removes rows counter label
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.hasGrid) return;
|
|
||||||
if( this.rowsCounterSpan==null ) return;
|
|
||||||
|
|
||||||
if(this.rowsCounterTgtId==null && this.rowsCounterDiv)
|
|
||||||
{
|
|
||||||
//IE only: clears all for sure
|
|
||||||
if(tf_isIE) this.rowsCounterDiv.outerHTML = '';
|
|
||||||
else
|
|
||||||
this.rowsCounterDiv.parentNode.removeChild(
|
|
||||||
this.rowsCounterDiv
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
tf_Id( this.rowsCounterTgtId ).innerHTML = '';
|
|
||||||
}
|
|
||||||
this.rowsCounterSpan = null;
|
|
||||||
this.rowsCounterDiv = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.RefreshNbRows = function(p)
|
|
||||||
/*====================================================
|
|
||||||
- Shows total number of filtered rows
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(this.rowsCounterSpan == null) return;
|
|
||||||
if(this.onBeforeRefreshCounter) this.onBeforeRefreshCounter.call(null, this, this.rowsCounterSpan);
|
|
||||||
var totTxt;
|
|
||||||
if(!this.paging)
|
|
||||||
{
|
|
||||||
if(p!=undefined && p!='') totTxt=p;
|
|
||||||
else totTxt = (this.nbFilterableRows - this.nbHiddenRows - (this.hasVisibleRows ? this.visibleRows.length : 0) );
|
|
||||||
} else {
|
|
||||||
var paging_start_row = parseInt(this.startPagingRow)+((this.nbVisibleRows>0) ? 1 : 0);//paging start row
|
|
||||||
var paging_end_row = (paging_start_row+this.pagingLength)-1 <= this.nbVisibleRows
|
|
||||||
? (paging_start_row+this.pagingLength)-1 : this.nbVisibleRows;
|
|
||||||
totTxt = paging_start_row+ this.fromToTextSeparator +paging_end_row+ this.overText +this.nbVisibleRows;
|
|
||||||
}
|
|
||||||
this.rowsCounterSpan.innerHTML = totTxt;
|
|
||||||
if(this.onAfterRefreshCounter) this.onAfterRefreshCounter.call(null, this, this.rowsCounterSpan, totTxt);
|
|
||||||
}
|
|
58
dist/TF_Modules/tf_sort.js
vendored
|
@ -1,58 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Sort feature v1.0
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.SetSort = function()
|
|
||||||
/*====================================================
|
|
||||||
- Sets sorting feature by loading
|
|
||||||
WebFX Sortable Table 1.12 by Erik Arvidsson
|
|
||||||
and TF adapter by Max Guglielmi
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
var fn = this.Evt._EnableSort;
|
|
||||||
if(!tf_IsFn(fn)){
|
|
||||||
var o = this;
|
|
||||||
this.Evt._EnableSort = function()
|
|
||||||
/*====================================================
|
|
||||||
- enables table sorting
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(o.isSortEnabled && !o.gridLayout) return; //gridLayout needs sort to be re-enabled
|
|
||||||
if(tf_IsImported(o.sortConfig.adapterSrc))
|
|
||||||
o.sortConfig.initialize.call(null,o);
|
|
||||||
else
|
|
||||||
o.IncludeFile(
|
|
||||||
o.sortConfig.name+'_adapter',
|
|
||||||
o.sortConfig.adapterSrc,
|
|
||||||
function(){ o.sortConfig.initialize.call(null,o); }
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if(tf_IsImported(this.sortConfig.src))
|
|
||||||
this.Evt._EnableSort();
|
|
||||||
else
|
|
||||||
this.IncludeFile(
|
|
||||||
this.sortConfig.name,
|
|
||||||
this.sortConfig.src,
|
|
||||||
this.Evt._EnableSort
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.RemoveSort = function()
|
|
||||||
/*====================================================
|
|
||||||
- removes sorting feature
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.sort) return;
|
|
||||||
this.sort = false;
|
|
||||||
//this.isSortEnabled = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.Sort = function()
|
|
||||||
{
|
|
||||||
this.EvtManager(this.Evt.name.sort);
|
|
||||||
}
|
|
110
dist/TF_Modules/tf_statusBar.js
vendored
|
@ -1,110 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Status bar feature v1.2
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.SetStatusBar = function()
|
|
||||||
/*====================================================
|
|
||||||
- Generates status bar label
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.hasGrid && !this.isFirstLoad) return;
|
|
||||||
var f = this.fObj;
|
|
||||||
this.statusBarTgtId = f.status_bar_target_id!=undefined //id of custom container element
|
|
||||||
? f.status_bar_target_id : null;
|
|
||||||
this.statusBarDiv = null; //element containing status bar label
|
|
||||||
this.statusBarSpan = null; //status bar
|
|
||||||
this.statusBarSpanText = null; //status bar label
|
|
||||||
this.statusBarText = f.status_bar_text!=undefined
|
|
||||||
? f.status_bar_text : ''; //defines status bar text
|
|
||||||
this.statusBarCssClass = f.status_bar_css_class!=undefined //defines css class status bar
|
|
||||||
? f.status_bar_css_class : 'status';
|
|
||||||
this.statusBarCloseDelay = 250; //delay for status bar clearing
|
|
||||||
var statusDiv = tf_CreateElm( 'div',['id',this.prfxStatus+this.id] ); //status bar container
|
|
||||||
statusDiv.className = this.statusBarCssClass;
|
|
||||||
var statusSpan = tf_CreateElm( 'span',['id',this.prfxStatusSpan+this.id] ); //status bar label
|
|
||||||
var statusSpanText = tf_CreateElm( 'span',['id',this.prfxStatusTxt+this.id] );//preceding text
|
|
||||||
statusSpanText.appendChild( tf_CreateText(this.statusBarText) );
|
|
||||||
this.onBeforeShowMsg = tf_IsFn(f.on_before_show_msg) ? f.on_before_show_msg : null; //calls function before message is displayed
|
|
||||||
this.onAfterShowMsg = tf_IsFn(f.on_after_show_msg) ? f.on_after_show_msg : null; //calls function after message is displayed
|
|
||||||
|
|
||||||
// target element container
|
|
||||||
if(this.statusBarTgtId==null) this.SetTopDiv();
|
|
||||||
var targetEl = ( this.statusBarTgtId==null ) ? this.lDiv : tf_Id( this.statusBarTgtId );
|
|
||||||
|
|
||||||
if(this.statusBarDiv && tf_isIE)
|
|
||||||
this.statusBarDiv.outerHTML = '';
|
|
||||||
|
|
||||||
if( this.statusBarTgtId==null )
|
|
||||||
{//default container: 'lDiv'
|
|
||||||
statusDiv.appendChild(statusSpanText);
|
|
||||||
statusDiv.appendChild(statusSpan);
|
|
||||||
targetEl.appendChild(statusDiv);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{// custom container, no need to append statusDiv
|
|
||||||
targetEl.appendChild(statusSpanText);
|
|
||||||
targetEl.appendChild(statusSpan);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.statusBarDiv = tf_Id( this.prfxStatus+this.id );
|
|
||||||
this.statusBarSpan = tf_Id( this.prfxStatusSpan+this.id );
|
|
||||||
this.statusBarSpanText = tf_Id( this.prfxStatusTxt+this.id );
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.RemoveStatusBar = function()
|
|
||||||
/*====================================================
|
|
||||||
- Removes status bar div
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.hasGrid) return;
|
|
||||||
if(this.statusBarDiv)
|
|
||||||
{
|
|
||||||
this.statusBarDiv.innerHTML = '';
|
|
||||||
this.statusBarDiv.parentNode.removeChild(
|
|
||||||
this.statusBarDiv
|
|
||||||
);
|
|
||||||
this.statusBarSpan = null;
|
|
||||||
this.statusBarSpanText = null;
|
|
||||||
this.statusBarDiv = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.StatusMsg = function(t)
|
|
||||||
/*====================================================
|
|
||||||
- sets status messages
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(t==undefined) this.StatusMsg('');
|
|
||||||
if(this.status) this.WinStatusMsg(t);
|
|
||||||
if(this.statusBar) this.StatusBarMsg(t);
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.WinStatusMsg = function(t)
|
|
||||||
/*====================================================
|
|
||||||
- sets window status messages
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.status) return;
|
|
||||||
if(this.onBeforeShowMsg){ this.onBeforeShowMsg.call(null, this, t); }
|
|
||||||
window.status = t;
|
|
||||||
if(this.onAfterShowMsg){ this.onAfterShowMsg.call(null, this, t); }
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype.StatusBarMsg = function(t)
|
|
||||||
/*====================================================
|
|
||||||
- sets status bar messages
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.statusBar || !this.statusBarSpan) return;
|
|
||||||
if(this.onBeforeShowMsg){ this.onBeforeShowMsg.call(null, this, t); }
|
|
||||||
var o = this;
|
|
||||||
function setMsg(){
|
|
||||||
o.statusBarSpan.innerHTML = t;
|
|
||||||
if(o.onAfterShowMsg){ o.onAfterShowMsg.call(null, o, t); }
|
|
||||||
}
|
|
||||||
var d = (t=='') ? (this.statusBarCloseDelay) : 1;
|
|
||||||
window.setTimeout(setMsg,d);
|
|
||||||
}
|
|
81
dist/TF_Modules/tf_themes.js
vendored
|
@ -1,81 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Themes loading feature v1.2
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.LoadThemes = function()
|
|
||||||
{
|
|
||||||
this.EvtManager(this.Evt.name.loadthemes);
|
|
||||||
}
|
|
||||||
|
|
||||||
TF.prototype._LoadThemes = function()
|
|
||||||
/*====================================================
|
|
||||||
- loads TF themes
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if(!this.hasThemes) return;
|
|
||||||
if(!this.Thm){
|
|
||||||
/*** TF themes ***/
|
|
||||||
var o = this;
|
|
||||||
this.Thm = {
|
|
||||||
list: {},
|
|
||||||
add: function(thmName, thmDesc, thmPath, thmCallBack)
|
|
||||||
{
|
|
||||||
var file = thmPath.split('/')[thmPath.split('/').length-1];
|
|
||||||
var re = new RegExp(file);
|
|
||||||
var path = thmPath.replace(re,'');
|
|
||||||
o.Thm.list[thmName] = {
|
|
||||||
name: thmName,
|
|
||||||
description: thmDesc,
|
|
||||||
file: file,
|
|
||||||
path: path,
|
|
||||||
callback: thmCallBack
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.enableDefaultTheme){//Default theme config
|
|
||||||
this.themes = {
|
|
||||||
name:['DefaultTheme'],
|
|
||||||
src:[this.themesPath+'Default/TF_Default.css'],
|
|
||||||
description:['Default Theme']
|
|
||||||
};
|
|
||||||
this.Thm.add('DefaultTheme', this.themesPath+'Default/TF_Default.css', 'Default Theme');
|
|
||||||
}
|
|
||||||
if(tf_IsArray(this.themes.name) && tf_IsArray(this.themes.src)){
|
|
||||||
var thm = this.themes;
|
|
||||||
for(var i=0; i<thm.name.length; i++){
|
|
||||||
var thmPath = thm.src[i];
|
|
||||||
var thmName = thm.name[i];
|
|
||||||
var thmInit = (thm.initialize && thm.initialize[i]) ? thm.initialize[i] : null;
|
|
||||||
var thmDesc = (thm.description && thm.description[i] ) ? thm.description[i] : null;
|
|
||||||
|
|
||||||
//Registers theme
|
|
||||||
this.Thm.add(thmName, thmDesc, thmPath, thmInit);
|
|
||||||
|
|
||||||
if(!tf_IsImported(thmPath,'link'))
|
|
||||||
this.IncludeFile(thmName, thmPath, null, 'link');
|
|
||||||
if(tf_IsFn(thmInit)) thmInit.call(null,this);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//Some elements need to be overriden for theme
|
|
||||||
var f =this.fObj;
|
|
||||||
//Reset button
|
|
||||||
f.btn_reset_text = null;
|
|
||||||
f.btn_reset_html = '<input type="button" value="" class="'+this.btnResetCssClass+'" title="Clear filters" />';
|
|
||||||
|
|
||||||
//Paging buttons
|
|
||||||
f.btn_prev_page_html = '<input type="button" value="" class="'+this.btnPageCssClass+' previousPage" title="Previous page" />';
|
|
||||||
f.btn_next_page_html = '<input type="button" value="" class="'+this.btnPageCssClass+' nextPage" title="Next page" />';
|
|
||||||
f.btn_first_page_html = '<input type="button" value="" class="'+this.btnPageCssClass+' firstPage" title="First page" />';
|
|
||||||
f.btn_last_page_html = '<input type="button" value="" class="'+this.btnPageCssClass+' lastPage" title="Last page" />';
|
|
||||||
|
|
||||||
//Loader
|
|
||||||
f.loader = true;
|
|
||||||
f.loader_html = '<div class="defaultLoader"></div>';
|
|
||||||
f.loader_text = null;
|
|
||||||
}
|
|
27
dist/TF_Modules/tf_watermark.js
vendored
|
@ -1,27 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- HTML Table Filter Generator
|
|
||||||
- Watermark feature v1.0
|
|
||||||
- By Max Guglielmi (tablefilter.free.fr)
|
|
||||||
- Licensed under the MIT License
|
|
||||||
-------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
TF.prototype.SetWatermark = function(set)
|
|
||||||
/*====================================================
|
|
||||||
- inserts or removes input watermark
|
|
||||||
- Params:
|
|
||||||
- set: if true inserts watermark (boolean)
|
|
||||||
=====================================================*/
|
|
||||||
{
|
|
||||||
if( !this.fltGrid ) return;
|
|
||||||
if(this.inpWatermark!=''){ //Not necessary if empty
|
|
||||||
var set = (set || set==undefined) ? true : false;
|
|
||||||
for(var i=0; i<this.fltIds.length; i++){
|
|
||||||
if(this['col'+i]!=this.fltTypeInp) continue; //only input type filters
|
|
||||||
var inpWatermark = (!this.isInpWatermarkArray ? this.inpWatermark : this.inpWatermark[i]);
|
|
||||||
if(this.GetFilterValue(i) == (set ? '' : inpWatermark)){
|
|
||||||
this.SetFilterValue(i,(!set ? '' : inpWatermark));
|
|
||||||
tf_AddClass(this.GetFilterElement(i), this.inpWatermarkCssClass);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
7
dist/filtergrid.css
vendored
2739
dist/tablefilter-uncompressed.js
vendored
42
dist/tablefilter/style/colsVisibility.css
vendored
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
/*====================================================
|
||||||
|
- HTML Table Filter Generator
|
||||||
|
- Columns Visibility Manager Extension
|
||||||
|
- do not hesitate to edit classes below to
|
||||||
|
change extension appearance
|
||||||
|
=====================================================*/
|
||||||
|
|
||||||
|
span.colVisSpan{ text-align:left; }
|
||||||
|
|
||||||
|
span.colVisSpan a.colVis{
|
||||||
|
/* Link */
|
||||||
|
margin:0 5px 0 5px;
|
||||||
|
}
|
||||||
|
div.colVisCont{
|
||||||
|
/* 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;
|
||||||
|
box-shadow:3px 3px 2px #888;
|
||||||
|
}
|
||||||
|
div.colVisCont p{ margin:6px auto 6px auto; }
|
||||||
|
|
||||||
|
ul.cols_checklist{ padding:0; margin:0; list-style: none; }
|
||||||
|
li.cols_checklist_item{ /*check list item*/
|
||||||
|
padding:4px;
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
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; }
|
23
dist/tablefilter/style/filtersVisibility.css
vendored
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
/*====================================================
|
||||||
|
- 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{}
|
||||||
|
|
||||||
|
/* button */
|
||||||
|
.btnExpClpFlt{ margin:0 5px 0 5px; }
|
BIN
dist/tablefilter/style/icn_clp.png
vendored
Normal file
After Width: | Height: | Size: 441 B |
BIN
dist/tablefilter/style/icn_exp.png
vendored
Normal file
After Width: | Height: | Size: 469 B |
|
@ -7,18 +7,23 @@
|
||||||
/* TABLE LAYOUT
|
/* TABLE LAYOUT
|
||||||
=====================================================*/
|
=====================================================*/
|
||||||
table.TF{
|
table.TF{
|
||||||
font:normal 12px arial, tahoma, helvetica, sans-serif;
|
border-spacing: 0;
|
||||||
border-top:1px solid #D0D0D0; border-left:1px solid #D0D0D0;
|
border-top:1px solid #D0D0D0; border-left:1px solid #D0D0D0;
|
||||||
border-bottom:1px solid #ccc; border-right:1px solid #ccc;
|
border-bottom:1px solid #ccc; border-right:1px solid #ccc;
|
||||||
}
|
}
|
||||||
table.TF th{
|
table.TF th{
|
||||||
|
margin:0;
|
||||||
background-color:#EBECEE;
|
background-color:#EBECEE;
|
||||||
border-bottom:1px solid #D0D0D0; border-right:1px solid #D0D0D0;
|
border-bottom:1px solid #D0D0D0; border-right:1px solid #D0D0D0;
|
||||||
border-left:1px solid #fff; border-top:1px solid #fff;
|
border-left:1px solid #fff; border-top:1px solid #fff;
|
||||||
padding:5px 5px 5px 5px; color:#333;
|
padding:5px 5px 5px 5px; color:#333;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.TF td{ padding:5px 5px 5px 5px; border-bottom:1px solid #D0D0D0; border-right:1px solid #D0D0D0; }
|
table.TF td{
|
||||||
|
margin: 0;
|
||||||
|
padding:5px 5px 5px 5px;
|
||||||
|
border-bottom:1px solid #D0D0D0; border-right:1px solid #D0D0D0;
|
||||||
|
}
|
||||||
|
|
||||||
/* FILTERS BAR
|
/* FILTERS BAR
|
||||||
=====================================================*/
|
=====================================================*/
|
||||||
|
@ -34,36 +39,36 @@ table.TF td{ padding:5px 5px 5px 5px; border-bottom:1px solid #D0D0D0; border-ri
|
||||||
.btnflt_icon{ /* button appearance when displayIcons is true */
|
.btnflt_icon{ /* button appearance when displayIcons is true */
|
||||||
width:19px; height:19px; cursor:pointer !important;
|
width:19px; height:19px; cursor:pointer !important;
|
||||||
border:0 !important; vertical-align:middle;
|
border:0 !important; vertical-align:middle;
|
||||||
background:transparent url(TF_Themes/btn_filter.png) center center no-repeat !important;
|
background:transparent url(themes/btn_filter.png) center center no-repeat !important;
|
||||||
}
|
}
|
||||||
.flt{ /* filter (input) appearance */
|
.flt{ /* filter (input) appearance */
|
||||||
background-color:#fff; font-size:10px;
|
background-color:#fff;
|
||||||
border:1px solid #ccc;
|
border:1px solid #ccc;
|
||||||
margin:0; width:97%; vertical-align:middle;
|
margin:0; width:97%; vertical-align:middle;
|
||||||
}
|
}
|
||||||
select.flt{ /* select filter */
|
select.flt{ /* select filter */
|
||||||
background-color:#fff; border:1px solid #ccc;
|
background-color:#fff; border:1px solid #ccc;
|
||||||
margin:0 1px 1px 0; width:99%; font-size:9px; vertical-align:middle;
|
margin:0 1px 1px 0; width:99%; vertical-align:middle;
|
||||||
}
|
}
|
||||||
select.flt_multi{ /* multiple select filter */
|
select.flt_multi{ /* multiple select filter */
|
||||||
background-color:#fff; border:1px solid #ccc;
|
background-color:#fff; border:1px solid #ccc;
|
||||||
margin:0 1px 1px 0; width:99%; height:100px;
|
margin:0 1px 1px 0; width:99%; height:100px;
|
||||||
font-size:9px; vertical-align:middle;
|
vertical-align:middle;
|
||||||
}
|
}
|
||||||
.flt_s{ /* small filter (input) appearance */
|
.flt_s{ /* small filter (input) appearance */
|
||||||
background-color:#fff; font-size:10px;
|
background-color:#fff;
|
||||||
border:1px solid #ccc;
|
border:1px solid #ccc;
|
||||||
margin:0; width:80%; vertical-align:middle;
|
margin:0; width:80%; vertical-align:middle;
|
||||||
}
|
}
|
||||||
.single_flt{ /* single filter appearance (input) */
|
.single_flt{ /* single filter appearance (input) */
|
||||||
background-color:#fff; font-size:11px;
|
background-color:#fff;
|
||||||
border-left:1px solid #999; border-right:1px solid #ccc;
|
border-left:1px solid #999; border-right:1px solid #ccc;
|
||||||
border-top:1px solid #ccc; border-bottom:1px solid #999;
|
border-top:1px solid #ccc; border-bottom:1px solid #999;
|
||||||
margin:0; width:120px; vertical-align:middle;
|
margin:0; width:120px; vertical-align:middle;
|
||||||
}
|
}
|
||||||
.fltWatermark{ /* watermark input */
|
/*.fltWatermark{ watermark input
|
||||||
color:#999;
|
color:#999;
|
||||||
}
|
}*/
|
||||||
.div_checklist{ /* div containing checklist */
|
.div_checklist{ /* div containing checklist */
|
||||||
width:100%; height:100px;
|
width:100%; height:100px;
|
||||||
border:1px solid #ccc;
|
border:1px solid #ccc;
|
||||||
|
@ -95,9 +100,9 @@ select.flt_multi{ /* multiple select filter */
|
||||||
input.reset{
|
input.reset{
|
||||||
width:19px; height:19px; cursor:pointer !important;
|
width:19px; height:19px; cursor:pointer !important;
|
||||||
border:0 !important; vertical-align:middle;
|
border:0 !important; vertical-align:middle;
|
||||||
background:transparent url(TF_Themes/btn_clear_filters.png) center center no-repeat !important;
|
background:transparent url(themes/btn_clear_filters.png) center center no-repeat !important;
|
||||||
}
|
}
|
||||||
input.reset:hover{ background:#CAD1D6 url(TF_Themes/btn_clear_filters.png) center center no-repeat !important; }
|
input.reset:hover{ background:#CAD1D6 url(themes/btn_clear_filters.png) center center no-repeat !important; }
|
||||||
|
|
||||||
/* PAGING ELEMENTS
|
/* PAGING ELEMENTS
|
||||||
=====================================================*/
|
=====================================================*/
|
||||||
|
@ -108,7 +113,10 @@ input.reset:hover{ background:#CAD1D6 url(TF_Themes/btn_clear_filters.png) cente
|
||||||
border:1px solid #ccc; overflow:hidden;
|
border:1px solid #ccc; overflow:hidden;
|
||||||
}
|
}
|
||||||
.ldiv{ /* left div */
|
.ldiv{ /* left div */
|
||||||
float:left; width:30%; position:inherit;
|
float:left;
|
||||||
|
width:30%;
|
||||||
|
position:inherit;
|
||||||
|
text-align:left;
|
||||||
}
|
}
|
||||||
.mdiv{ /* middle div */
|
.mdiv{ /* middle div */
|
||||||
float:left; width:38%; position:inherit; text-align:center;
|
float:left; width:38%; position:inherit; text-align:center;
|
||||||
|
@ -127,10 +135,10 @@ input.pgInp{ /*paging buttons (Next/Previous)*/
|
||||||
width:19px; height:19px; cursor:pointer !important;
|
width:19px; height:19px; cursor:pointer !important;
|
||||||
border:0 !important; font-weight:bold; font-size:11px;
|
border:0 !important; font-weight:bold; font-size:11px;
|
||||||
}
|
}
|
||||||
.nextPage{ background:transparent url(TF_Themes/btn_next_page.gif) center center no-repeat !important; }
|
.nextPage{ background:transparent url(themes/btn_next_page.gif) center center no-repeat !important; }
|
||||||
.previousPage{ background:transparent url(TF_Themes/btn_previous_page.gif) center center no-repeat !important; }
|
.previousPage{ background:transparent url(themes/btn_previous_page.gif) center center no-repeat !important; }
|
||||||
.firstPage{ background:transparent url(TF_Themes/btn_first_page.gif) center center no-repeat !important; }
|
.firstPage{ background:transparent url(themes/btn_first_page.gif) center center no-repeat !important; }
|
||||||
.lastPage{ background:transparent url(TF_Themes/btn_last_page.gif) center center no-repeat !important; }
|
.lastPage{ background:transparent url(themes/btn_last_page.gif) center center no-repeat !important; }
|
||||||
.nextPage:hover, .previousPage:hover, .firstPage:hover, .lastPage:hover{ background-color:#CAD1D6 !important; }
|
.nextPage:hover, .previousPage:hover, .firstPage:hover, .lastPage:hover{ background-color:#CAD1D6 !important; }
|
||||||
|
|
||||||
span.nbpg{ padding:0 5px 0 0; }/*paging nb pages*/
|
span.nbpg{ padding:0 5px 0 0; }/*paging nb pages*/
|
||||||
|
@ -178,22 +186,23 @@ div.cont{ /*table container div*/
|
||||||
div.head{ width:auto; overflow:hidden; }
|
div.head{ width:auto; overflow:hidden; }
|
||||||
|
|
||||||
/* Help elements */
|
/* Help elements */
|
||||||
.helpBtn{ margin:0 5px 0 5px; padding: 2px 4px 2px 4px; border-left:1px solid #ccc; border-right:1px solid #ccc; } /* help button */
|
.helpBtn{
|
||||||
|
margin:0 5px 0 5px;
|
||||||
|
padding: 2px 4px 2px 4px;
|
||||||
|
border-left:1px solid #ccc;
|
||||||
|
border-right:1px solid #ccc;
|
||||||
|
} /* help button */
|
||||||
div.helpCont{ /* help container */
|
div.helpCont{ /* help container */
|
||||||
position:absolute; display:none;
|
position:absolute; display:none;
|
||||||
max-width:300px; overflow:auto;
|
max-width:300px; overflow:auto;
|
||||||
padding:7px 7px 7px 7px; margin:15px 0;
|
padding:10px; margin:15px 0;
|
||||||
border:1px solid #CCC; line-height:19px;
|
border:1px solid #CCC; line-height:20px;
|
||||||
font-size:12px; color:#333;
|
font-size:12px; color:#333;
|
||||||
background:#fff; text-align:left;
|
background:#fff; text-align:left;
|
||||||
border-radius:4px;
|
|
||||||
-moz-border-radius:4px;
|
|
||||||
-webkit-border-radius:4px;
|
|
||||||
box-shadow:3px 3px 2px #888;
|
box-shadow:3px 3px 2px #888;
|
||||||
-moz-box-shadow:3px 3px 2px #888;
|
|
||||||
-webkit-box-shadow:3px 3px 2px #888;
|
|
||||||
}
|
}
|
||||||
div.helpCont a{ color:#cc0000; text-decoration:underline; font-weight:normal; }
|
div.helpCont a{ color:#cc0000; text-decoration:underline; font-weight:normal; }
|
||||||
|
div.helpCont a.close{ color:#333; text-decoration:none; font-weight:bold; }
|
||||||
div.helpCont a:hover{ text-decoration:none; }
|
div.helpCont a:hover{ text-decoration:none; }
|
||||||
div.helpCont hr{ border:1px solid #ccc; }
|
div.helpCont hr{ border:1px solid #ccc; }
|
||||||
div.helpFooter{ margin:10px 0 0 0; }
|
div.helpFooter{ margin:10px 0 0 0; }
|
||||||
|
@ -324,5 +333,5 @@ select[multiple="multiple"].ezSelectEditor{ height:35px; }
|
||||||
background-position:center center;
|
background-position:center center;
|
||||||
background-repeat:no-repeat;
|
background-repeat:no-repeat;
|
||||||
}
|
}
|
||||||
.sort-arrow.descending{ background-image:url("TF_Themes/downsimple.png"); }
|
.sort-arrow.descending{ background-image:url("themes/downsimple.png"); }
|
||||||
.sort-arrow.ascending{ background-image:url("TF_Themes/upsimple.png"); }
|
.sort-arrow.ascending{ background-image:url("themes/upsimple.png"); }
|
Before Width: | Height: | Size: 144 B After Width: | Height: | Size: 144 B |
Before Width: | Height: | Size: 360 B After Width: | Height: | Size: 360 B |
Before Width: | Height: | Size: 325 B After Width: | Height: | Size: 325 B |
Before Width: | Height: | Size: 63 B After Width: | Height: | Size: 63 B |
Before Width: | Height: | Size: 61 B After Width: | Height: | Size: 61 B |
Before Width: | Height: | Size: 59 B After Width: | Height: | Size: 59 B |
Before Width: | Height: | Size: 58 B After Width: | Height: | Size: 58 B |
|
@ -1,5 +1,5 @@
|
||||||
/*====================================================
|
/*====================================================
|
||||||
- HTML Table Filter Generator Default Theme
|
- Table Filter Default Theme
|
||||||
- Do not hesitate to edit classes below to
|
- Do not hesitate to edit classes below to
|
||||||
change theme appearance
|
change theme appearance
|
||||||
=====================================================*/
|
=====================================================*/
|
||||||
|
@ -7,7 +7,6 @@
|
||||||
/* TABLE LAYOUT
|
/* TABLE LAYOUT
|
||||||
=====================================================*/
|
=====================================================*/
|
||||||
table.TF{
|
table.TF{
|
||||||
font:normal 12px arial, tahoma, helvetica, sans-serif !important;
|
|
||||||
border-left:1px solid #ccc !important; border-top:none !important;
|
border-left:1px solid #ccc !important; border-top:none !important;
|
||||||
border-right:none !important; border-bottom:none !important;
|
border-right:none !important; border-bottom:none !important;
|
||||||
}
|
}
|
Before Width: | Height: | Size: 303 B After Width: | Height: | Size: 303 B |
Before Width: | Height: | Size: 326 B After Width: | Height: | Size: 326 B |
Before Width: | Height: | Size: 356 B After Width: | Height: | Size: 356 B |
Before Width: | Height: | Size: 332 B After Width: | Height: | Size: 332 B |
Before Width: | Height: | Size: 331 B After Width: | Height: | Size: 331 B |
Before Width: | Height: | Size: 187 B After Width: | Height: | Size: 187 B |
Before Width: | Height: | Size: 440 B After Width: | Height: | Size: 440 B |
Before Width: | Height: | Size: 640 B After Width: | Height: | Size: 640 B |
Before Width: | Height: | Size: 427 B After Width: | Height: | Size: 427 B |
Before Width: | Height: | Size: 393 B After Width: | Height: | Size: 393 B |
Before Width: | Height: | Size: 395 B After Width: | Height: | Size: 395 B |
Before Width: | Height: | Size: 290 B After Width: | Height: | Size: 290 B |
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 201 B After Width: | Height: | Size: 201 B |
Before Width: | Height: | Size: 68 B After Width: | Height: | Size: 68 B |
Before Width: | Height: | Size: 78 B After Width: | Height: | Size: 78 B |
Before Width: | Height: | Size: 300 B After Width: | Height: | Size: 300 B |
Before Width: | Height: | Size: 303 B After Width: | Height: | Size: 303 B |
Before Width: | Height: | Size: 928 B After Width: | Height: | Size: 928 B |
Before Width: | Height: | Size: 63 B After Width: | Height: | Size: 63 B |
Before Width: | Height: | Size: 61 B After Width: | Height: | Size: 61 B |
Before Width: | Height: | Size: 59 B After Width: | Height: | Size: 59 B |
Before Width: | Height: | Size: 58 B After Width: | Height: | Size: 58 B |
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
|
@ -1,5 +1,5 @@
|
||||||
/*====================================================
|
/*====================================================
|
||||||
- HTML Table Filter Generator Custom Theme
|
- Table Filter MyTheme Theme
|
||||||
- Do not hesitate to edit classes below to
|
- Do not hesitate to edit classes below to
|
||||||
change theme appearance
|
change theme appearance
|
||||||
=====================================================*/
|
=====================================================*/
|
||||||
|
@ -7,7 +7,6 @@
|
||||||
/* TABLE LAYOUT
|
/* TABLE LAYOUT
|
||||||
=====================================================*/
|
=====================================================*/
|
||||||
table.TF{
|
table.TF{
|
||||||
font:13px "Trebuchet MS",Verdana,Helvetica,Arial,sans-serif !important;
|
|
||||||
border-left:1px dotted #81963B !important; border-top:none !important;
|
border-left:1px dotted #81963B !important; border-top:none !important;
|
||||||
border-right:0 !important; border-bottom:none !important;
|
border-right:0 !important; border-bottom:none !important;
|
||||||
}
|
}
|
Before Width: | Height: | Size: 554 B After Width: | Height: | Size: 554 B |
Before Width: | Height: | Size: 118 B After Width: | Height: | Size: 118 B |
Before Width: | Height: | Size: 118 B After Width: | Height: | Size: 118 B |
Before Width: | Height: | Size: 97 B After Width: | Height: | Size: 97 B |
Before Width: | Height: | Size: 97 B After Width: | Height: | Size: 97 B |
Before Width: | Height: | Size: 601 B After Width: | Height: | Size: 601 B |
Before Width: | Height: | Size: 847 B After Width: | Height: | Size: 847 B |