Webpack: clean state
313
Gruntfile.js
|
@ -1,317 +1,6 @@
|
||||||
module.exports = function (grunt) {
|
module.exports = function (grunt) {
|
||||||
// Initializes the Grunt tasks with the following settings
|
|
||||||
grunt.initConfig({
|
grunt.initConfig({
|
||||||
|
|
||||||
pkg: grunt.file.readJSON('package.json'),
|
|
||||||
|
|
||||||
version: '<%= pkg.version %>',
|
|
||||||
dist_folder: 'dist/',
|
|
||||||
source_folder: 'src/',
|
|
||||||
frags_folder: 'frags/',
|
|
||||||
|
|
||||||
// A list of files, which will be syntax-checked by JSHint
|
|
||||||
jshint: {
|
|
||||||
src: [
|
|
||||||
'Gruntfile.js',
|
|
||||||
'<%= source_folder %>*.js',
|
|
||||||
'src-es6/**/*.js',
|
|
||||||
'!<%= source_folder %>tablefilter.js'
|
|
||||||
// ,
|
|
||||||
// '!src-es6/tablefilter.js'
|
|
||||||
],
|
|
||||||
options: {
|
|
||||||
jshintrc: '.jshintrc'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
files: [
|
|
||||||
'src-es6/**/*.js',
|
|
||||||
'src-es6/**/*.css'
|
|
||||||
// ,
|
|
||||||
// '<%= source_folder %>**/*.js',
|
|
||||||
// '<%= source_folder %>**/*.css',
|
|
||||||
// '<%= source_folder %>**/*.html'
|
|
||||||
],
|
|
||||||
tasks: ['dev']
|
|
||||||
},
|
|
||||||
|
|
||||||
qunit: {
|
|
||||||
files: ['test/**/*.html']
|
|
||||||
},
|
|
||||||
|
|
||||||
requirejs:{
|
|
||||||
'compile-main': {
|
|
||||||
options: {
|
|
||||||
baseUrl: '<%= source_folder %>',
|
|
||||||
include: [
|
|
||||||
'../libs/almond/almond',
|
|
||||||
'../libs/system'
|
|
||||||
],
|
|
||||||
// exclude: [
|
|
||||||
// 'extensions/sortabletable/sortabletable',
|
|
||||||
// 'extensions/sortabletable/adapterSortabletable'
|
|
||||||
// ],
|
|
||||||
shim: {
|
|
||||||
'extensions/sortabletable/sortabletable': {
|
|
||||||
exports: 'SortableTable'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
wrap: {
|
|
||||||
startFile: "<%= frags_folder %>start.frag",
|
|
||||||
endFile: "<%= frags_folder %>end.frag"
|
|
||||||
},
|
|
||||||
name: 'tablefilter',
|
|
||||||
out: '<%= dist_folder %>tablefilter.js',
|
|
||||||
optimize: 'none'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// ,
|
|
||||||
// 'compile-colsvisibility': {
|
|
||||||
// options: {
|
|
||||||
// baseUrl: '<%= source_folder %>extensions/colsVisibility',
|
|
||||||
// include: [
|
|
||||||
// '../../../libs/almond/almond'
|
|
||||||
// ],
|
|
||||||
// wrap: {
|
|
||||||
// startFile: "<%= frags_folder %>start.colsvisibility.frag",
|
|
||||||
// endFile: "<%= frags_folder %>end.colsvisibility.frag"
|
|
||||||
// },
|
|
||||||
// name: 'colsVisibility',
|
|
||||||
// out: '<%= dist_folder %>extensions/colsVisibility/colsVisibility.js',
|
|
||||||
// optimize: 'none',
|
|
||||||
// findNestedDependencies: true,
|
|
||||||
// removeCombined: true,
|
|
||||||
// generateSourceMaps: false
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
},
|
|
||||||
|
|
||||||
// requirejs: {
|
|
||||||
// 'compile-main': {
|
|
||||||
// options: {
|
|
||||||
// // appDir: "<%= dist_folder %>",
|
|
||||||
// baseUrl: '<%= source_folder %>',
|
|
||||||
// paths: {
|
|
||||||
// almond: '../libs/almond/almond',
|
|
||||||
// sortabletable: 'extensions/sortabletable/sortabletable',
|
|
||||||
// adapterSortabletable: 'extensions/sortabletable/adapterSortabletable'
|
|
||||||
// },
|
|
||||||
// // include: ['../libs/almond/almond', 'tablefilter'],
|
|
||||||
// // exclude: [
|
|
||||||
// // 'extensions/sortabletable/sortabletable',
|
|
||||||
// // 'extensions/sortabletable/adapterSortabletable'
|
|
||||||
// // ],
|
|
||||||
// // name: 'tablefilter',
|
|
||||||
// // out: '<%= dist_folder %>tablefilter.js',
|
|
||||||
// dir: '<%= dist_folder %>',
|
|
||||||
// wrap: {
|
|
||||||
// startFile: "<%= frags_folder %>start.frag",
|
|
||||||
// endFile: "<%= frags_folder %>end.frag"
|
|
||||||
// },
|
|
||||||
// // insertRequire: ['tablefilter'],
|
|
||||||
// shim: {
|
|
||||||
// 'sortabletable': {
|
|
||||||
// exports: 'SortableTable'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// modules:[
|
|
||||||
// {
|
|
||||||
// name: 'extensions/sortabletable/adapterSortabletable',
|
|
||||||
// include: [
|
|
||||||
// 'extensions/sortabletable/adapterSortabletable',
|
|
||||||
// 'extensions/sortabletable/sortabletable'
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: 'tablefilter',
|
|
||||||
// create: true,
|
|
||||||
// include: [
|
|
||||||
// 'almond',
|
|
||||||
// 'tablefilter'
|
|
||||||
// ],
|
|
||||||
// exclude: ['require'],
|
|
||||||
// excludeShallow: [
|
|
||||||
// 'adapterSortabletable'
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// removeCombined: true,
|
|
||||||
// findNestedDependencies: false,
|
|
||||||
// optimize: 'none'/*'uglify2'*/,
|
|
||||||
// generateSourceMaps: false/*,
|
|
||||||
// preserveLicenseComments: false,
|
|
||||||
// generateSourceMaps: true*/
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// // ,
|
|
||||||
// // 'compile-extensions': {
|
|
||||||
// // options:{
|
|
||||||
// // baseUrl: '<%= source_folder %>extensions',
|
|
||||||
// // dir: '<%= dist_folder %>/extensions',
|
|
||||||
// // // paths: {
|
|
||||||
// // // sortabletable: 'sortabletable/sortabletable',
|
|
||||||
// // // adapterSortabletable: 'sortabletable/adapterSortabletable'
|
|
||||||
// // // },
|
|
||||||
// // wrap: {
|
|
||||||
// // startFile: "<%= frags_folder %>start.sort.frag",
|
|
||||||
// // endFile: "<%= frags_folder %>end.sort.frag"
|
|
||||||
// // },
|
|
||||||
// // modules:[
|
|
||||||
// // {
|
|
||||||
// // name: 'sortabletable/adapterSortabletable',
|
|
||||||
// // include: [
|
|
||||||
// // 'sortabletable/adapterSortabletable',
|
|
||||||
// // 'sortabletable/sortabletable'
|
|
||||||
// // ]
|
|
||||||
// // }
|
|
||||||
// // ],
|
|
||||||
// // removeCombined: true,
|
|
||||||
// // findNestedDependencies: false,
|
|
||||||
// // optimize: 'none'/*'uglify2',
|
|
||||||
// // preserveLicenseComments: false,
|
|
||||||
// // generateSourceMaps: true*/
|
|
||||||
// // }
|
|
||||||
// // }
|
|
||||||
// },
|
|
||||||
|
|
||||||
concat: {
|
|
||||||
/*js: {
|
|
||||||
files: [{
|
|
||||||
src: ['<%= source_folder %>tablefilter.js'],
|
|
||||||
dest: '<%= dist_folder %>tablefilter.js'
|
|
||||||
}]
|
|
||||||
},*/
|
|
||||||
css: {
|
|
||||||
files: [{
|
|
||||||
src: ['<%= source_folder %>filtergrid.css'],
|
|
||||||
dest: '<%= dist_folder %>filtergrid.css'
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// and minified (source and destination files)
|
|
||||||
uglify: {
|
|
||||||
|
|
||||||
options: {
|
|
||||||
banner: '/*------------------------------------------------------------------------ \n' +
|
|
||||||
'\t- TableFilter v<%= version %> by Max Guglielmi \n' +
|
|
||||||
'\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: {
|
|
||||||
files: [{
|
|
||||||
src: ['<%= dist_folder %>tablefilter.js'],
|
|
||||||
dest: '<%= dist_folder %>tablefilter.js'
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
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: {
|
|
||||||
tablefilter: {
|
|
||||||
files: [
|
|
||||||
{ src: 'libs/sortabletable.js', dest: '<%= source_folder %>extensions/sortabletable/sortabletable.js' },
|
|
||||||
// { src: 'libs/es6-module-loader.js', dest: '<%= source_folder %>es6-module-loader.js' },
|
|
||||||
{ src: 'src-es6/extensions/colsVisibility/colsVisibility.css', dest: '<%= source_folder %>extensions/colsVisibility/colsVisibility.css' },
|
|
||||||
// { src: 'libs/requirejs/require.js', dest: '<%= dist_folder %>require.js' },
|
|
||||||
// { src: ['**'], cwd: '<%= source_folder %>TF_Modules/', dest: '<%= dist_folder %>TF_Modules/', expand: true },
|
|
||||||
|
|
||||||
// TODO: remove ezEditTable and other extensions
|
|
||||||
{ src: ['**'], cwd: 'libs/ezEditTable/', dest: '<%= source_folder %>extensions/ezEditTable/', expand: true },
|
|
||||||
{ src: ['**'], cwd: 'libs/ezEditTable/', dest: '<%= dist_folder %>extensions/ezEditTable/', expand: true },
|
|
||||||
// { src: ['**'], cwd: '<%= source_folder %>extensions/colsVisibility/', dest: '<%= dist_folder %>extensions/colsVisibility/', expand: true },
|
|
||||||
|
|
||||||
//
|
|
||||||
{ src: 'libs/es6-module-loader.src.js', dest: '<%= dist_folder %>es6-module-loader.src.js' },
|
|
||||||
{ src: 'libs/es6-module-loader.js', dest: '<%= dist_folder %>es6-module-loader.js' },
|
|
||||||
{ src: 'libs/es6-module-loader.js.map', dest: '<%= dist_folder %>es6-module-loader.js.map' },
|
|
||||||
{ src: 'libs/system.js.map', dest: '<%= dist_folder %>system.js.map' },
|
|
||||||
{ src: ['**'], cwd: '<%= source_folder %>TF_Themes/', dest: '<%= dist_folder %>TF_Themes/', expand: true }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
connect: {
|
|
||||||
server:{
|
|
||||||
options:{
|
|
||||||
port: 9000,
|
|
||||||
hostname: "*",
|
|
||||||
keepalive: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
babel: {
|
|
||||||
'build-main': {
|
|
||||||
options: {
|
|
||||||
sourceMap: true,
|
|
||||||
modules: 'amd',
|
|
||||||
compact: false
|
|
||||||
},
|
|
||||||
files: [{
|
|
||||||
expand: true,
|
|
||||||
cwd: 'src-es6',
|
|
||||||
src: ['*.js'],
|
|
||||||
dest: '<%= source_folder %>'
|
|
||||||
},{
|
|
||||||
expand: true,
|
|
||||||
cwd: 'src-es6/modules',
|
|
||||||
src: ['*.js'],
|
|
||||||
dest: '<%= source_folder %>modules'
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
'build-extensions':{
|
|
||||||
options: {
|
|
||||||
sourceMap: true,
|
|
||||||
modules: 'amd'
|
|
||||||
},
|
|
||||||
files: [{
|
|
||||||
expand: true,
|
|
||||||
cwd: 'src-es6/extensions',
|
|
||||||
src: ['**/*.js'],
|
|
||||||
dest: '<%= source_folder %>extensions'
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Load the plugins that provide the tasks we specified in package.json.
|
|
||||||
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');
|
|
||||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
|
||||||
grunt.loadNpmTasks('grunt-contrib-qunit');
|
|
||||||
grunt.loadNpmTasks('grunt-contrib-requirejs');
|
|
||||||
grunt.loadNpmTasks('grunt-contrib-connect');
|
|
||||||
grunt.loadNpmTasks('grunt-babel');
|
|
||||||
|
|
||||||
// This is the default task being executed if Grunt
|
|
||||||
// is called without any further parameter.
|
|
||||||
grunt.registerTask('default', ['jshint', 'toes5', 'build-requirejs', 'concat', 'uglify', 'cssmin', 'copy', 'qunit']);
|
|
||||||
grunt.registerTask('build', ['jshint', 'toes5', 'build-requirejs', 'concat', /*'uglify',*/ 'cssmin', 'copy']);
|
|
||||||
grunt.registerTask('dev', ['jshint', 'toes5', 'concat', 'cssmin', 'copy']);
|
|
||||||
grunt.registerTask('build-requirejs', ['requirejs:compile-main', 'requirejs:compile-colsvisibility']);
|
|
||||||
grunt.registerTask('toes5', ['babel:build-main','babel:build-extensions']);
|
|
||||||
grunt.registerTask('test', ['qunit']);
|
|
||||||
grunt.registerTask('server', ['connect']);
|
|
||||||
};
|
};
|
||||||
|
|
37
bower.json
|
@ -1,37 +0,0 @@
|
||||||
{
|
|
||||||
"name": "TableFilter",
|
|
||||||
"version": "3.0.0",
|
|
||||||
"homepage": "https://github.com/koalyptus/TableFilter",
|
|
||||||
"authors": [
|
|
||||||
"Max Guglielmi"
|
|
||||||
],
|
|
||||||
"description": "Filter HTML tables data easily",
|
|
||||||
"main": [
|
|
||||||
"dist/tablefilter.js",
|
|
||||||
"dist/filtergrid.css"
|
|
||||||
],
|
|
||||||
"moduleType": [
|
|
||||||
"amd",
|
|
||||||
"globals"
|
|
||||||
],
|
|
||||||
"keywords": [
|
|
||||||
"html",
|
|
||||||
"table",
|
|
||||||
"filtering",
|
|
||||||
"filter"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
|
||||||
"private": true,
|
|
||||||
"ignore": [
|
|
||||||
"**/.*",
|
|
||||||
"node_modules",
|
|
||||||
"bower_components",
|
|
||||||
"test",
|
|
||||||
"libs"
|
|
||||||
],
|
|
||||||
"dependencies": {},
|
|
||||||
"devDependencies": {
|
|
||||||
"requirejs": "~2.1.17",
|
|
||||||
"almond": "~0.3.1"
|
|
||||||
}
|
|
||||||
}
|
|
8
dist/es6-module-loader.js
vendored
2857
dist/es6-module-loader.src.js
vendored
|
@ -1,47 +0,0 @@
|
||||||
/*====================================================
|
|
||||||
- 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;
|
|
||||||
border-radius:4px;
|
|
||||||
-moz-border-radius:4px;
|
|
||||||
-webkit-border-radius:4px;
|
|
||||||
box-shadow:3px 3px 2px #888;
|
|
||||||
-moz-box-shadow:3px 3px 2px #888;
|
|
||||||
-webkit-box-shadow:3px 3px 2px #888;
|
|
||||||
}
|
|
||||||
div.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:1px; margin:0; font-size:11px;
|
|
||||||
border-bottom:1px solid #ccc;
|
|
||||||
}
|
|
||||||
li.cols_checklist_item:hover{
|
|
||||||
background-color:#335EA8;
|
|
||||||
color:#fff;
|
|
||||||
}
|
|
||||||
.cols_checklist_slc_item{ /*selected check list item*/
|
|
||||||
background-color:#335EA8;
|
|
||||||
color:#fff;
|
|
||||||
}
|
|
||||||
ul.cols_checklist label{ display:block; }
|
|
||||||
ul.cols_checklist input{ vertical-align:middle; margin:2px 5px 2px 1px; }
|
|
1435
dist/extensions/colsVisibility/colsVisibility.js
vendored
2049
dist/extensions/ezEditTable/docs/doc.html
vendored
154
dist/extensions/ezEditTable/docs/doc_class.html
vendored
|
@ -1,154 +0,0 @@
|
||||||
|
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>ezEditTable, enhance HTML tables easily, advanced inline editing, selection and keyboard navigation - script by Max Guglielmi</title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|
||||||
<meta name="description" content="ezEditTable is an open source javascript code aimed at enhancing regular HTML tables by adding features such as inline editing components, advanced selection and keyboard navigation" />
|
|
||||||
<meta name="keywords" content="html table editing, html table inline cell editing, inline cell editor, row selection, script, javascript, max guglielmi" />
|
|
||||||
<meta name="robots" content="index,follow" />
|
|
||||||
<meta name="author" content="Max Guglielmi" />
|
|
||||||
<style type="text/css" media="screen, projection">
|
|
||||||
@import "http://edittable.free.fr/includes/common.css";
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script language="javascript" type="text/javascript" src="../ezEditTable.js"></script>
|
|
||||||
<link href="../ezEditTable.css" rel="stylesheet" type="text/css">
|
|
||||||
|
|
||||||
<style type="text/css" media="screen">
|
|
||||||
div#navmenu li a#lnk03{
|
|
||||||
color:#333; font-weight:bold;
|
|
||||||
border-top:2px solid #ff9900;
|
|
||||||
background:#fff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="container">
|
|
||||||
|
|
||||||
<div id="banner">
|
|
||||||
|
|
||||||
<div id="navmenu">
|
|
||||||
<ul>
|
|
||||||
<li><a id="lnk01" href="index.html">Home</a></li>
|
|
||||||
<li><a id="lnk02" href="samples.html">Samples</a></li>
|
|
||||||
<li><a id="lnk03" href="doc.html">Documentation</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- BEGIN CONTENT -->
|
|
||||||
|
|
||||||
<div id="content">
|
|
||||||
<div id="divsubmenu">
|
|
||||||
<ul class="submenu">
|
|
||||||
<li class="dir">
|
|
||||||
<a id="co" href="./doc.html">Configuration Object <small>▼</small></a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="./doc.html#ez_common">General</a></li>
|
|
||||||
<li><a href="./doc.html#ez_selection">Selection</a></li>
|
|
||||||
<li><a href="./doc.html#ez_sel_events">Selection callback events</a></li>
|
|
||||||
<li><a href="./doc.html#ez_editable">Editable</a></li>
|
|
||||||
<li><a href="./doc.html#ez_cell_editors">Cell editors</a></li>
|
|
||||||
<li><a href="./doc.html#ez_editable">Command buttons</a></li>
|
|
||||||
<li><a href="./doc.html#ez_uploader">Uploader editor <sup>new</sup></a></li>
|
|
||||||
<li><a href="./doc.html#ez_editable_events">Editable callback events</a></li>
|
|
||||||
<li><a href="./doc.html#ez_actions">Actions</a></li>
|
|
||||||
<li><a href="./doc.html#ez_actions_events">Actions callback events</a></li>
|
|
||||||
<li><a href="./doc.html#ez_msg">Messages</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="dir">
|
|
||||||
<a id="cl" href="./doc_class.html">TF Class<small>▼</small></a>
|
|
||||||
<ul>
|
|
||||||
|
|
||||||
<li><a href="./doc_class.html#ez_constructor">Constructor</a></li>
|
|
||||||
<li><a href="./doc_methods.html#ez_methods">General public methods</a></li>
|
|
||||||
<li><a href="./doc_methods.html#ez_selection_methods">Selection public methods</a></li>
|
|
||||||
<li><a href="./doc_methods.html#ez_editable_methods">Editable public methods</a></li>
|
|
||||||
<li><a href="./doc_properties.html#ez_properties">General public properties</a></li>
|
|
||||||
<li><a href="./doc_properties.html#ez_selection_properties">Selection public properties</a></li>
|
|
||||||
<li><a href="./doc_properties.html#ez_editable_properties">Editable public properties</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a id="uf" href="./doc_utilities.html">Utility Functions</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="marginTop30">Documentation</h1>
|
|
||||||
<a name="class" id="class"></a>
|
|
||||||
|
|
||||||
<h2>EditTable Class</h2>
|
|
||||||
|
|
||||||
<!--[if lt IE 8]>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<a href="./doc_class.html#ez_constructor">Constructor</a></li> |
|
|
||||||
<a href="./doc_methods.html#ez_methods">General public methods</a></li> |
|
|
||||||
<a href="./doc_methods.html#ez_selection_methods">Selection public methods</a></li> |
|
|
||||||
<a href="./doc_methods.html#ez_editable_methods">Editable public methods</a></li> |
|
|
||||||
<a href="./doc_properties.html#ez_properties">General public properties</a></li> |
|
|
||||||
<a href="./doc_properties.html#ez_selection_properties">Selection public properties</a></li> |
|
|
||||||
<a href="./doc_properties.html#ez_editable_properties">Editable public properties</a></li>
|
|
||||||
</p>
|
|
||||||
<![endif]-->
|
|
||||||
|
|
||||||
<a name="ez_constructor" id="ez_constructor"></a>
|
|
||||||
<h3>Constructor</h3>
|
|
||||||
<h3><code>EditTable(id, startRow, config);</code></h3>
|
|
||||||
<table id="tblConstructor" cellspacing="0" class="ezEditableTable" >
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Parameter</th>
|
|
||||||
|
|
||||||
<th>Type</th>
|
|
||||||
<th>Description</th>
|
|
||||||
<th>Remarks</th>
|
|
||||||
<th>Example</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>id</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>id of the <code>table</code> element</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>var myEditTable = new EditTable("myTableId");</code></td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>startRow</strong> </td>
|
|
||||||
<td>number</td>
|
|
||||||
<td>index of the first row from which row selection can start</td>
|
|
||||||
<td>optional parameter</td>
|
|
||||||
<td><code>var myEditTable = new EditTable("myTableId", 2);</code></td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>config</strong></td>
|
|
||||||
<td>object</td>
|
|
||||||
<td> configuration object</td>
|
|
||||||
<td>optional parameter</td>
|
|
||||||
<td><code>var myEditTable = new EditTable("myTableId", 2, { editable: true });</code></td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- END CONTENT -->
|
|
||||||
|
|
||||||
<div id="footer"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
599
dist/extensions/ezEditTable/docs/doc_methods.html
vendored
|
@ -1,599 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>ezEditTable, enhance HTML tables easily, advanced inline editing, selection and keyboard navigation - script by Max Guglielmi</title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|
||||||
<meta name="description" content="ezEditTable is an open source javascript code aimed at enhancing regular HTML tables by adding features such as inline editing components, advanced selection and keyboard navigation" />
|
|
||||||
<meta name="keywords" content="html table editing, html table inline cell editing, inline cell editor, row selection, script, javascript, max guglielmi" />
|
|
||||||
<meta name="robots" content="index,follow" />
|
|
||||||
<meta name="author" content="Max Guglielmi" />
|
|
||||||
<style type="text/css" media="screen, projection">
|
|
||||||
@import "http://edittable.free.fr/includes/common.css";
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script language="javascript" type="text/javascript" src="../ezEditTable.js"></script>
|
|
||||||
<link href="../ezEditTable.css" rel="stylesheet" type="text/css">
|
|
||||||
|
|
||||||
<style type="text/css" media="screen">
|
|
||||||
div#navmenu li a#lnk03{
|
|
||||||
color:#333; font-weight:bold;
|
|
||||||
border-top:2px solid #ff9900;
|
|
||||||
background:#fff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="container">
|
|
||||||
|
|
||||||
<div id="banner">
|
|
||||||
|
|
||||||
<div id="navmenu">
|
|
||||||
<ul>
|
|
||||||
<li><a id="lnk01" href="index.html">Home</a></li>
|
|
||||||
<li><a id="lnk02" href="samples.html">Samples</a></li>
|
|
||||||
<li><a id="lnk03" href="doc.html">Documentation</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- BEGIN CONTENT -->
|
|
||||||
|
|
||||||
<div id="content">
|
|
||||||
|
|
||||||
<div id="divsubmenu">
|
|
||||||
<ul class="submenu">
|
|
||||||
<li class="dir">
|
|
||||||
<a id="co" href="./doc.html">Configuration Object <small>▼</small></a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="./doc.html#ez_common">General</a></li>
|
|
||||||
<li><a href="./doc.html#ez_selection">Selection</a></li>
|
|
||||||
<li><a href="./doc.html#ez_sel_events">Selection callback events</a></li>
|
|
||||||
<li><a href="./doc.html#ez_editable">Editable</a></li>
|
|
||||||
<li><a href="./doc.html#ez_cell_editors">Cell editors</a></li>
|
|
||||||
<li><a href="./doc.html#ez_editable">Command buttons</a></li>
|
|
||||||
<li><a href="./doc.html#ez_uploader">Uploader editor <sup>new</sup></a></li>
|
|
||||||
<li><a href="./doc.html#ez_editable_events">Editable callback events</a></li>
|
|
||||||
<li><a href="./doc.html#ez_actions">Actions</a></li>
|
|
||||||
<li><a href="./doc.html#ez_actions_events">Actions callback events</a></li>
|
|
||||||
<li><a href="./doc.html#ez_msg">Messages</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="dir">
|
|
||||||
<a id="cl" href="./doc_class.html">TF Class<small>▼</small></a>
|
|
||||||
<ul>
|
|
||||||
|
|
||||||
<li><a href="./doc_class.html#ez_constructor">Constructor</a></li>
|
|
||||||
<li><a href="./doc_methods.html#ez_methods">General public methods</a></li>
|
|
||||||
<li><a href="./doc_methods.html#ez_selection_methods">Selection public methods</a></li>
|
|
||||||
<li><a href="./doc_methods.html#ez_editable_methods">Editable public methods</a></li>
|
|
||||||
<li><a href="./doc_properties.html#ez_properties">General public properties</a></li>
|
|
||||||
<li><a href="./doc_properties.html#ez_selection_properties">Selection public properties</a></li>
|
|
||||||
|
|
||||||
<li><a href="./doc_properties.html#ez_editable_properties">Editable public properties</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a id="uf" href="./doc_utilities.html">Utility Functions</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="marginTop30">Documentation</h1>
|
|
||||||
|
|
||||||
<a name="class" id="class"></a>
|
|
||||||
|
|
||||||
|
|
||||||
<h2>EditTable Class</h2>
|
|
||||||
|
|
||||||
<!--[if lt IE 8]>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<a href="./doc_class.html#ez_constructor">Constructor</a></li> |
|
|
||||||
<a href="./doc_methods.html#ez_methods">General public methods</a></li> |
|
|
||||||
<a href="./doc_methods.html#ez_selection_methods">Selection public methods</a></li> |
|
|
||||||
<a href="./doc_methods.html#ez_editable_methods">Editable public methods</a></li> |
|
|
||||||
<a href="./doc_properties.html#ez_properties">General public properties</a></li> |
|
|
||||||
<a href="./doc_properties.html#ez_selection_properties">Selection public properties</a></li> |
|
|
||||||
<a href="./doc_properties.html#ez_editable_properties">Editable public properties</a></li>
|
|
||||||
</p>
|
|
||||||
<![endif]-->
|
|
||||||
|
|
||||||
<a name="ez_methods" id="ez_methods"></a>
|
|
||||||
<h3>General Public Methods</h3>
|
|
||||||
<table id="tblMethods" cellspacing="0" class="ezEditableTable" >
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th >Method</th>
|
|
||||||
|
|
||||||
<th width="200">Description</th>
|
|
||||||
<th >Remarks</th>
|
|
||||||
<th >Example</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><strong> Init()</strong></td>
|
|
||||||
|
|
||||||
<td>EditTable object initialisation</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code> var myET = new EditTable('myTableId');<br>
|
|
||||||
myET.editable = true;<br />
|
|
||||||
... <br />
|
|
||||||
myET.Init();</code></td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>GetCellsNb( rowIndex )</strong></td>
|
|
||||||
<td>returns number of cells of a specified row</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code> myET.GetCellsNb(4);</code></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr class="newBg">
|
|
||||||
<td><strong>GetRowsNb()</strong></td>
|
|
||||||
<td>returns total number of rows</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>myET.GetRowsNb();</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>GetRow(e)</strong></td>
|
|
||||||
|
|
||||||
<td>returns the DOM row element for a given event</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>function myFunction(e){ var clickedRow = myET.GetRow(e); }</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>GetRowByIndex( rowIndex )</strong></td>
|
|
||||||
<td>returns the DOM row element for a given row index</td>
|
|
||||||
|
|
||||||
<td> </td>
|
|
||||||
<td> <code>myET.GetRowByIndex(5);</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>GetCell(e)</strong></td>
|
|
||||||
<td>returns the DOM cell element for a given event</td>
|
|
||||||
<td> </td>
|
|
||||||
|
|
||||||
<td> <code>function myFunction(e){ var clickedCell = myET.GetCell(e);
|
|
||||||
}</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>IsSelectable()</strong></td>
|
|
||||||
<td>checks if table rows are selectable and returns a boolean </td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>myET.IsSelectable();</code></td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>IsEditable()</strong></td>
|
|
||||||
<td>checks if table is editable and returns a boolean </td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>myET.IsEditable();</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>ClearSelections()</strong></td>
|
|
||||||
|
|
||||||
<td>clears current row(s) and/or cell selection</td>
|
|
||||||
<td> </td>
|
|
||||||
<td> <code>myET.ClearSelections();</code></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<a href="javascript:window.scroll(0,0);">Top of page</a>
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
<a name="ez_selection_methods" id="ez_selection_methods"></a>
|
|
||||||
<h3>Selection Public Methods</h3>
|
|
||||||
<table id="tblSelectionMethods" cellspacing="0" class="ezEditableTable" >
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th >Method</th>
|
|
||||||
<th >Description</th>
|
|
||||||
<th >Remarks</th>
|
|
||||||
|
|
||||||
<th >Example</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><strong> Init()</strong></td>
|
|
||||||
<td>Selection object initialisation</td>
|
|
||||||
|
|
||||||
<td> </td>
|
|
||||||
<td><code> var myET = new EditTable('myTableId');<br />
|
|
||||||
... <br />
|
|
||||||
myET.Selection.Init();</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>Set()</strong></td>
|
|
||||||
|
|
||||||
<td>enables selection feature</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code> myET.Selection.Set();</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="newBg">
|
|
||||||
<td><strong>Remove()</strong></td>
|
|
||||||
<td> disables selection feature</td>
|
|
||||||
|
|
||||||
<td> </td>
|
|
||||||
<td><code>myET.Selection.Remove();</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>SetEvents()</strong></td>
|
|
||||||
<td>sets click and keyboard events to table element</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>myET.Selection.SetEvents();</code></td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>RemoveEvents()</strong></td>
|
|
||||||
<td>removes click and keyboard events to table element</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>myET.Selection.RemoveEvents();</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>GetActiveRow()</strong></td>
|
|
||||||
|
|
||||||
<td>returns the active row element, that is, the row currently selected</td>
|
|
||||||
<td> </td>
|
|
||||||
<td> <code>var activeRow = myET.Selection.GetActiveRow();<br>
|
|
||||||
if(activeRow){ ... }</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>GetActiveCell()</strong></td>
|
|
||||||
|
|
||||||
<td>returns the active cell element, that is, the cell currently selected</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>var activeCell = myET.Selection.GetActiveCell();<br>
|
|
||||||
if(activeCell){ ... }</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>GetSelectedRows()</strong></td>
|
|
||||||
|
|
||||||
<td>returns an array of the row elements currently selected, if selection
|
|
||||||
model is multiple</td>
|
|
||||||
<td>returns: <br>
|
|
||||||
[rowobject, rowobject, rowobject, ... rowobject] </td>
|
|
||||||
<td> <code>var selRows = myET.Selection.GetSelectedRows();<br>
|
|
||||||
if(selRows.length > 0){ ... }</code></td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>GetSelectedValues()</strong></td>
|
|
||||||
<td>returns an array containing a collection of selected rows values
|
|
||||||
</td>
|
|
||||||
<td>returns: [<br>
|
|
||||||
['value 0', 'value 1', 'value 2', ... 'value 3'],<br>
|
|
||||||
['value 0', 'value 1', 'value 2', ... 'value 3'],<br>
|
|
||||||
|
|
||||||
['value 0', 'value 1', 'value 2', ... 'value 3'],<br>
|
|
||||||
...<br>
|
|
||||||
['value 0', 'value 1', 'value 2', ... 'value 3']<br>
|
|
||||||
] </td>
|
|
||||||
<td><code>var selValues = myET.Selection.GetSelectedValues();<br>
|
|
||||||
if(selValues.length > 0){<br>
|
|
||||||
|
|
||||||
var firstValueOfFirstSelectedRow = selValues[0][0];<br>
|
|
||||||
} </code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>GetActiveRowValues()</strong></td>
|
|
||||||
<td>returns an array containing the cell values of active row</td>
|
|
||||||
<td>returns ['value 0', 'value 1', 'value 2', ... 'value 3']</td>
|
|
||||||
|
|
||||||
<td><code>var activeValues = myET.Selection.GetActiveRowValues();<br>
|
|
||||||
if(activeValues.length > 0){ ... } </code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>GetRowValues( row )</strong></td>
|
|
||||||
<td>returns an array containing the cell values of a given row, it accepts
|
|
||||||
only a row DOM element</td>
|
|
||||||
|
|
||||||
<td>returns ['value 0', 'value 1', 'value 2', ... 'value 3'] </td>
|
|
||||||
<td> <p><code>var myRow = myET.GetRowByIndex(7);<br>
|
|
||||||
if(myRow){ <br>
|
|
||||||
myRowValues = myET.Selection.GetRowValues(myRow);<br>
|
|
||||||
</code><code>}</code></p></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>SelectRowByIndex( rowIndex )</strong></td>
|
|
||||||
<td>selects a row for a given row index</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code> myET.Selection.SelectRowByIndex(9);</code></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>SelectRowsByIndexes( rowIndexes )</strong> <sup>new</sup></td>
|
|
||||||
<td>selects rows for a given array of row indexes</td>
|
|
||||||
<td>Multiple selection needs to be active (selection_model: 'multiple')</td>
|
|
||||||
<td><code> myET.Selection.SelectRowsByIndexes([2, 7, 9, 12]);</code></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>SelectRow( row )</strong></td>
|
|
||||||
<td>selects given row element</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>var myRow = myET.GetRowByIndex(6);<br>
|
|
||||||
if(myRow){<br>
|
|
||||||
myET.Selection.SelectRow(myRow);<br>
|
|
||||||
} </code></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>DeselectRow( row )</strong></td>
|
|
||||||
<td>deselects given row element</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>var myRow = myET.GetRowByIndex(6);<br>
|
|
||||||
if(myET.Selection.IsRowSelected(myRow)){<br>
|
|
||||||
|
|
||||||
myET.Selection.DeselectRow(myRow);<br>
|
|
||||||
} </code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>SelectCell( cell )</strong></td>
|
|
||||||
<td>selects given cell element</td>
|
|
||||||
<td> </td>
|
|
||||||
|
|
||||||
<td><code>var myCell = myET.GetRowByIndex(3).cells[2];<br>
|
|
||||||
if(myCell) myET.Selection.SelectCell(myCell);</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>DeselectCell( cell )</strong></td>
|
|
||||||
<td>deselects given cell element</td>
|
|
||||||
<td> </td>
|
|
||||||
|
|
||||||
<td><code>var myCell = myET.GetRowByIndex(3).cells[2];<br>
|
|
||||||
if(myCell) myET.Selection.DeselectCell(myCell);</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>ClearSelections()</strong></td>
|
|
||||||
<td>clears current row(s) and/or cell selection</td>
|
|
||||||
<td>The general <code>ClearSelections()</code> invokes this method (<code>
|
|
||||||
myET</code><code>.ClearSelections</code>() )</td>
|
|
||||||
|
|
||||||
<td><code>myET.Selection.ClearSelections();</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>IsRowSelected( row )</strong></td>
|
|
||||||
<td>determines if given row is selected and returns a boolean</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>var myRow = myET.GetRowByIndex(6);<br>
|
|
||||||
|
|
||||||
if(myET.Selection.IsRowSelected(myRow)){ ... } </code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>IsCellSelected( cell )</strong></td>
|
|
||||||
<td>determines if given cell is selected and returns a boolean</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>var myCell = myET.GetRowByIndex(3).cells[2];<br>
|
|
||||||
|
|
||||||
if(myET.Selection.IsCellSelected( myCell )){ ... }</code></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<a href="javascript:window.scroll(0,0);">Top of page</a>
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
<a name="ez_editable_methods" id="ez_editable_methods"></a>
|
|
||||||
<h3>Editable Public Methods</h3>
|
|
||||||
|
|
||||||
<table id="tblEditableMethods" cellspacing="0" class="ezEditableTable" >
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th >Method</th>
|
|
||||||
<th >Description</th>
|
|
||||||
<th >Remarks</th>
|
|
||||||
<th >Example</th>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><strong> Init()</strong></td>
|
|
||||||
<td>Editable object initialisation</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code> var myET = new EditTable('myTableId');<br />
|
|
||||||
|
|
||||||
... <br />
|
|
||||||
myET.Editable.Init();</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>Set()</strong></td>
|
|
||||||
<td>enables inline editing feature</td>
|
|
||||||
<td> </td>
|
|
||||||
|
|
||||||
<td><code> myET.Editable.Set();</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="newBg">
|
|
||||||
<td><strong>Remove()</strong></td>
|
|
||||||
<td> disables inline editing feature</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>myET.Editable.Remove();</code></td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>SetEvents()</strong></td>
|
|
||||||
<td>sets click and keyboard events to table element</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>myET.Editable.SetEvents();</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>RemoveEvents()</strong></td>
|
|
||||||
|
|
||||||
<td>removes click and keyboard events to table element</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>myET.Editable.RemoveEvents();</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>GetModifiedRows()</strong></td>
|
|
||||||
<td>returns an array containing the modified rows objects</td>
|
|
||||||
|
|
||||||
<td>returns: <br>
|
|
||||||
[<br>
|
|
||||||
[rowIndex, <br>
|
|
||||||
{ values: [val0, val1, ...valn], <br>
|
|
||||||
urlParams: '&ColName0=cellvalue0&ColName1=cellvalue1',<br>
|
|
||||||
|
|
||||||
modified: [true, false, ...]<br>
|
|
||||||
}],<br>
|
|
||||||
...<br>
|
|
||||||
[rowIndex, <br>
|
|
||||||
{ values: [val0, val1, ...valn], <br>
|
|
||||||
urlParams: '&ColName0=cellvalue0&ColName1=cellvalue1',<br>
|
|
||||||
|
|
||||||
modified: [true, false, ...]<br>
|
|
||||||
}] <br>
|
|
||||||
] <br>
|
|
||||||
urlParams are the paramaters names that are expected server-side.
|
|
||||||
If the parameters' names are not defined by the property <code>param_names</code>
|
|
||||||
in the actions object (configuration object <a href="doc.html#ez_actions">actions</a>),
|
|
||||||
the param name by default equals to 'col_<strong>n</strong>' where
|
|
||||||
n is the column index (col_0, col_1, ... col_n)</td>
|
|
||||||
|
|
||||||
<td> <p><code>var modRowObjs = myET.Editable.GetModifiedRows();<br>
|
|
||||||
for(var i=0; i<modRowObjs.length; i++){<br>
|
|
||||||
var rowIndex = modRowObjs[i][0]; //int<br>
|
|
||||||
var obj = modRowObjs[i][1]; //object<br>
|
|
||||||
var objValues = obj.values; //array<br>
|
|
||||||
|
|
||||||
var objModValues = obj.modified; //array of booleans<br>
|
|
||||||
var objUrlParams = obj.urlParams //string<br>
|
|
||||||
} </code></p></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>GetAddedRows()</strong></td>
|
|
||||||
<td>returns an array containing the added rows objects</td>
|
|
||||||
|
|
||||||
<td>returns: <br>
|
|
||||||
[<br>
|
|
||||||
[rowIndex, <br>
|
|
||||||
{ values: [val0, val1, ...valn], <br>
|
|
||||||
urlParams: '&ColName0=cellvalue0&ColName1=cellvalue1',<br>
|
|
||||||
|
|
||||||
modified: [true, true, ...]<br>
|
|
||||||
}],<br>
|
|
||||||
...<br>
|
|
||||||
[rowIndex, <br>
|
|
||||||
{ values: [val0, val1, ...valn], <br>
|
|
||||||
urlParams: '&ColName0=cellvalue0&ColName1=cellvalue1',<br>
|
|
||||||
|
|
||||||
modified: [true, true, ...]<br>
|
|
||||||
}] <br>
|
|
||||||
] <br>
|
|
||||||
urlParams are the paramaters names that are expected server-side.
|
|
||||||
If the parameters' names are not defined by the property <code>param_names</code>
|
|
||||||
in the actions object (configuration object <a href="doc.html#ez_actions">actions</a>),
|
|
||||||
the param name by default equals to 'col_<strong>n</strong>' where
|
|
||||||
n is the column index (col_0, col_1, ... col_n)</td>
|
|
||||||
|
|
||||||
<td><code>var addRowObjs = myET.Editable.GetAddedRows();<br>
|
|
||||||
for(var i=0; i<addRowObjs.length; i++){<br>
|
|
||||||
var rowIndex = addRowObjs[i][0]; //int<br>
|
|
||||||
var obj = addRowObjs[i][1]; //object<br>
|
|
||||||
var objValues = obj.values; //array<br>
|
|
||||||
var objModValues = obj.modified; //array of booleans<br>
|
|
||||||
|
|
||||||
var objUrlParams = obj.urlParams //string<br>
|
|
||||||
} </code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>GetDeletedRows()</strong></td>
|
|
||||||
<td>returns an array containing the deleted rows objects</td>
|
|
||||||
<td>returns: <br>
|
|
||||||
|
|
||||||
[<br>
|
|
||||||
[rowIndex, <br>
|
|
||||||
{ values: [val0, val1, ...valn], <br>
|
|
||||||
urlParams: '&ColName0=cellvalue0&ColName1=cellvalue1',<br>
|
|
||||||
modified: [false, false, ...]<br>
|
|
||||||
|
|
||||||
}],<br>
|
|
||||||
...<br>
|
|
||||||
[rowIndex, <br>
|
|
||||||
{ values: [val0, val1, ...valn], <br>
|
|
||||||
urlParams: '&ColName0=cellvalue0&ColName1=cellvalue1',<br>
|
|
||||||
|
|
||||||
modified: [false, false, ...]<br>
|
|
||||||
}] <br>
|
|
||||||
] <br>
|
|
||||||
urlParams are the paramaters names that are expected server-side.
|
|
||||||
If the parameters' names are not defined by the property <code>param_names</code>
|
|
||||||
in the actions object (configuration object <a href="doc.html#ez_actions">actions</a>),
|
|
||||||
the param name by default equals to 'col_<strong>n</strong>' where
|
|
||||||
n is the column index (col_0, col_1, ... col_n)</td>
|
|
||||||
|
|
||||||
<td> <code>var delRowObjs = myET.Editable.GetDeletedRows();<br>
|
|
||||||
for(var i=0; i<delRowObjs.length; i++){<br>
|
|
||||||
var rowIndex = delRowObjs[i][0]; //int<br>
|
|
||||||
var obj = delRowObjs[i][1]; //object<br>
|
|
||||||
var objValues = obj.values; //array<br>
|
|
||||||
|
|
||||||
var objModValues = obj.modified; //array of booleans<br>
|
|
||||||
var objUrlParams = obj.urlParams //string<br>
|
|
||||||
}</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>SubmitEditedRows()</strong></td>
|
|
||||||
<td>submits edited rows to server according to <a href="doc.html#ez_actions">actions</a> configuration
|
|
||||||
options </td>
|
|
||||||
|
|
||||||
<td>modified rows objects are sent to server (uri property in 'update'
|
|
||||||
<a href="doc.html#ez_actions">actions</a> configuration options)</td>
|
|
||||||
<td><p><code>function SaveEditedRows(){<br>
|
|
||||||
myET.Editable.SubmitEditedRows();<br>
|
|
||||||
}</code></p>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>SubmitAddedRows()</strong></td>
|
|
||||||
<td>submits added rows to server according to <a href="doc.html#ez_actions">actions</a> configuration
|
|
||||||
options </td>
|
|
||||||
<td>added rows objects are sent to server (uri property in 'insert'
|
|
||||||
<a href="doc.html#ez_actions">actions</a> configuration options)</td>
|
|
||||||
<td><code>function SaveAddedRows(){
|
|
||||||
myET.Editable.SubmitAddeddRows();
|
|
||||||
}</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>SubmitDeletedRows()</strong></td>
|
|
||||||
<td>submits deleted rows to server according to <a href="doc.html#ez_actions">actions</a> configuration
|
|
||||||
options </td>
|
|
||||||
<td>deleted rows objects are sent to server (uri property in 'delete'
|
|
||||||
<a href="doc.html#ez_actions">actions</a> configuration options). A
|
|
||||||
confirmation prompt appears before sending data to server</td>
|
|
||||||
|
|
||||||
<td> <p><code>function DeleteSelectedRows(){
|
|
||||||
myET.Editable.SubmitDeletedRows();
|
|
||||||
}</code></p></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>SubmitAll()</strong> <sup>new</sup></td>
|
|
||||||
<td>submits added and edited rows to server according to <a href="doc.html#ez_actions">actions</a> configuration
|
|
||||||
options </td>
|
|
||||||
<td></td>
|
|
||||||
<td><code>function SubmitAll(){ myET.Editable.SubmitAll(); }</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>AddNewRow()</strong></td>
|
|
||||||
<td>adds a row to the table</td>
|
|
||||||
|
|
||||||
<td></td>
|
|
||||||
<td><code>myET.Editable.AddNewRow();</code></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- END CONTENT -->
|
|
||||||
|
|
||||||
<div id="footer"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
515
dist/extensions/ezEditTable/docs/doc_properties.html
vendored
|
@ -1,515 +0,0 @@
|
||||||
|
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>ezEditTable, enhance HTML tables easily, advanced inline editing, selection and keyboard navigation - script by Max Guglielmi</title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|
||||||
<meta name="description" content="ezEditTable is an open source javascript code aimed at enhancing regular HTML tables by adding features such as inline editing components, advanced selection and keyboard navigation" />
|
|
||||||
<meta name="keywords" content="html table editing, html table inline cell editing, inline cell editor, row selection, script, javascript, max guglielmi" />
|
|
||||||
<meta name="robots" content="index,follow" />
|
|
||||||
<meta name="author" content="Max Guglielmi" />
|
|
||||||
<style type="text/css" media="screen, projection">
|
|
||||||
@import "http://edittable.free.fr/includes/common.css";
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script language="javascript" type="text/javascript" src="../ezEditTable.js"></script>
|
|
||||||
<link href="../ezEditTable.css" rel="stylesheet" type="text/css">
|
|
||||||
|
|
||||||
<style type="text/css" media="screen">
|
|
||||||
div#navmenu li a#lnk03{
|
|
||||||
color:#333; font-weight:bold;
|
|
||||||
border-top:2px solid #ff9900;
|
|
||||||
background:#fff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="container">
|
|
||||||
|
|
||||||
<div id="banner">
|
|
||||||
|
|
||||||
<div id="navmenu">
|
|
||||||
<ul>
|
|
||||||
<li><a id="lnk01" href="index.html">Home</a></li>
|
|
||||||
<li><a id="lnk02" href="samples.html">Samples</a></li>
|
|
||||||
<li><a id="lnk03" href="doc.html">Documentation</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- BEGIN CONTENT -->
|
|
||||||
|
|
||||||
<div id="content">
|
|
||||||
|
|
||||||
<div id="divsubmenu">
|
|
||||||
<ul class="submenu">
|
|
||||||
<li class="dir">
|
|
||||||
<a id="co" href="./doc.html">Configuration Object <small>▼</small></a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="./doc.html#ez_common">General</a></li>
|
|
||||||
<li><a href="./doc.html#ez_selection">Selection</a></li>
|
|
||||||
<li><a href="./doc.html#ez_sel_events">Selection callback events</a></li>
|
|
||||||
<li><a href="./doc.html#ez_editable">Editable</a></li>
|
|
||||||
<li><a href="./doc.html#ez_cell_editors">Cell editors</a></li>
|
|
||||||
<li><a href="./doc.html#ez_uploader">Uploader editor</a></li>
|
|
||||||
<li><a href="./doc.html#ez_editable">Command buttons</a></li>
|
|
||||||
<li><a href="./doc.html#ez_editable_events">Editable callback events</a></li>
|
|
||||||
<li><a href="./doc.html#ez_actions">Actions</a></li>
|
|
||||||
<li><a href="./doc.html#ez_actions_events">Actions callback events</a></li>
|
|
||||||
<li><a href="./doc.html#ez_msg">Messages</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="dir">
|
|
||||||
<a id="cl" href="./doc_class.html">TF Class<small>▼</small></a>
|
|
||||||
<ul>
|
|
||||||
|
|
||||||
<li><a href="./doc_class.html#ez_constructor">Constructor</a></li>
|
|
||||||
<li><a href="./doc_methods.html#ez_methods">General public methods</a></li>
|
|
||||||
<li><a href="./doc_methods.html#ez_selection_methods">Selection public methods</a></li>
|
|
||||||
<li><a href="./doc_methods.html#ez_editable_methods">Editable public methods</a></li>
|
|
||||||
<li><a href="./doc_properties.html#ez_properties">General public properties</a></li>
|
|
||||||
<li><a href="./doc_properties.html#ez_selection_properties">Selection public properties</a></li>
|
|
||||||
|
|
||||||
<li><a href="./doc_properties.html#ez_editable_properties">Editable public properties</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a id="uf" href="./doc_utilities.html">Utility Functions</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="marginTop30">Documentation</h1>
|
|
||||||
|
|
||||||
<a name="class" id="class"></a>
|
|
||||||
|
|
||||||
<h2>EditTable Class</h2>
|
|
||||||
|
|
||||||
<!--[if lt IE 8]>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<a href="./doc_class.html#ez_constructor">Constructor</a></li> |
|
|
||||||
<a href="./doc_methods.html#ez_methods">General public methods</a></li> |
|
|
||||||
<a href="./doc_methods.html#ez_selection_methods">Selection public methods</a></li> |
|
|
||||||
<a href="./doc_methods.html#ez_editable_methods">Editable public methods</a></li> |
|
|
||||||
<a href="./doc_properties.html#ez_properties">General public properties</a></li> |
|
|
||||||
<a href="./doc_properties.html#ez_selection_properties">Selection public properties</a></li> |
|
|
||||||
<a href="./doc_properties.html#ez_editable_properties">Editable public properties</a></li>
|
|
||||||
</p>
|
|
||||||
<![endif]-->
|
|
||||||
|
|
||||||
<a name="ez_properties" id="ez_properties"></a>
|
|
||||||
<h3>General Public Properties</h3>
|
|
||||||
<table id="tblProps" cellspacing="0" class="ezEditableTable" >
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th >Property</th>
|
|
||||||
|
|
||||||
<th >Type</th>
|
|
||||||
<th >Description</th>
|
|
||||||
<th >Remarks</th>
|
|
||||||
<th >Example</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>id</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>returns the HTML table's id used by the EditTable object</td>
|
|
||||||
<td>use it as getter only</td>
|
|
||||||
<td><code>alert( myET.id );</code></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>table</strong></td>
|
|
||||||
<td>HTMLTableElement</td>
|
|
||||||
<td>returns the HTML table element used by the EditTable object</td>
|
|
||||||
<td>use it as getter only</td>
|
|
||||||
<td><code>alert( myET.table );</code></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>config</strong></td>
|
|
||||||
<td>object</td>
|
|
||||||
<td>returns the EditTable configuration object (literal object)</td>
|
|
||||||
<td>use it as getter or setter</td>
|
|
||||||
<td><code>alert( myET.config );</code></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>startRow</strong></td>
|
|
||||||
<td>number</td>
|
|
||||||
<td>index of the first row from which row selection can start</td>
|
|
||||||
<td>use it as getter only</td>
|
|
||||||
<td><code>alert( myET.startRow );</code></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>nbCells</strong></td>
|
|
||||||
<td>number</td>
|
|
||||||
<td>returns the number of table columns</td>
|
|
||||||
<td>use it as getter only</td>
|
|
||||||
<td><code>alert( myET.nbCells );</code></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>selection</strong></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>enables / disables selection model</td>
|
|
||||||
<td>use it as getter or setter</td>
|
|
||||||
<td><code>myET.selection = false;</code></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>keyNav</strong></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>enables / disables keyboard navigation</td>
|
|
||||||
<td>use it as getter or setter</td>
|
|
||||||
<td><code>myET.keyNav = false;</code></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>editable</strong></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>enables / disables inline editing</td>
|
|
||||||
<td>use it as getter or setter</td>
|
|
||||||
<td><code>myET.editable = true;</code></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>tableCss</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>defines the css class of the table element</td>
|
|
||||||
<td>use it as getter or setter</td>
|
|
||||||
<td><code>myET.tableCss = 'myClass';</code></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>unselectableCss</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>defines the css class that makes the table text unselectable</td>
|
|
||||||
<td>use it as getter or setter</td>
|
|
||||||
<td><code>alert( myET.unselectableCss );</code></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>activityIndicatorCss</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>defines the css class to be applied to the table in order to indicate
|
|
||||||
server activity </td>
|
|
||||||
<td>use it as getter or setter</td>
|
|
||||||
<td><code>alert( myET.activityIndicatorCss );</code></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>basePath</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>defines the path to the script's directory</td>
|
|
||||||
<td>use it as getter or setter</td>
|
|
||||||
<td><code>alert( myET.basePath );</code></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<hr/>
|
|
||||||
<a href="javascript:window.scroll(0,0);">Top of page</a>
|
|
||||||
|
|
||||||
<a name="ez_selection_properties" id="ez_selection_properties"></a>
|
|
||||||
<h3>Selection Public Properties</h3>
|
|
||||||
<table id="tblSelectionProps" cellspacing="0" class="ezEditableTable" >
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th >Property</th>
|
|
||||||
|
|
||||||
<th >Type</th>
|
|
||||||
<th >Description</th>
|
|
||||||
<th >Remarks</th>
|
|
||||||
<th >Example</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>selectionModel</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>defines the selection model: "single" or "multiple"</td>
|
|
||||||
<td>use it as getter or setter - 2 possible values: 'single' or 'multiple'</td>
|
|
||||||
|
|
||||||
<td><code>myET.selectionModel = 'multiple';</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>defaultSelection</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>defines the selection type</td>
|
|
||||||
<td>use it as getter or setter - 3 possible values: 'row', 'cell' or
|
|
||||||
'both'</td>
|
|
||||||
|
|
||||||
<td><code>myET.defaultSelection = 'both';</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>keySelection</strong></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>enables / disable multiple selection by using Ctrl and Shift keys
|
|
||||||
</td>
|
|
||||||
<td>use it as getter or setter - select multiple rows by holding Ctrl
|
|
||||||
or Shift key down, only if selection model is 'multiple'</td>
|
|
||||||
|
|
||||||
<td><code>myET.keySelection = false;</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>selectRowAtStart</strong></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>first row is selected at start if set true</td>
|
|
||||||
<td>use it as getter or setter</td>
|
|
||||||
|
|
||||||
<td><code>myET.selectRowAtStart = true;</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>rowIndexAtStart</strong></td>
|
|
||||||
<td>number</td>
|
|
||||||
<td>defines which row has to be selected at start</td>
|
|
||||||
<td>use it as getter or setter</td>
|
|
||||||
|
|
||||||
<td><code>myET.rowIndexAtStart = 5;</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>scrollIntoView</strong></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>If set true selected row scrolls into view; useful when row is selected
|
|
||||||
by using keyboard</td>
|
|
||||||
<td>use it as getter or setter</td>
|
|
||||||
|
|
||||||
<td><code>myET.scrollIntoView = true;</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>activeRowCss</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>defines css class for active row</td>
|
|
||||||
<td>use it as getter or setter</td>
|
|
||||||
|
|
||||||
<td><code>myET.activeRowCss = 'myClass';</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>selectedRowCss</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>defines css class for selected rows</td>
|
|
||||||
<td>use it as getter or setter - only if 'multiple' selection model
|
|
||||||
is enabled</td>
|
|
||||||
|
|
||||||
<td><code>myET.selectedRowCss = 'myClass';</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>activeCellCss</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>defines css class for active cell</td>
|
|
||||||
<td>use it as getter or setter - only if 'cell' or 'both' selection
|
|
||||||
type is enabled</td>
|
|
||||||
|
|
||||||
<td><code>myET.activeCellCss = 'myClass';</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>nbRowsPerPage</strong></td>
|
|
||||||
<td>number</td>
|
|
||||||
<td>defines number of rows to jump when PgDown or PgUp keys are pressed</td>
|
|
||||||
<td>use it as getter or setter - specify a huge number to jump straight
|
|
||||||
to 1st or last row (1000)</td>
|
|
||||||
|
|
||||||
<td><code>myET.nbRowsPerPage = 1000;</code></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<hr/>
|
|
||||||
<a href="javascript:window.scroll(0,0);">Top of page</a>
|
|
||||||
|
|
||||||
<a name="ez_editable_properties" id="ez_editable_properties"></a>
|
|
||||||
<h3>Editable Public Properties</h3>
|
|
||||||
<table id="tblEditableProps" cellspacing="0" class="ezEditableTable" >
|
|
||||||
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th >Property</th>
|
|
||||||
<th >Type</th>
|
|
||||||
<th >Description</th>
|
|
||||||
<th >Remarks</th>
|
|
||||||
<th >Example</th>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><strong>editorModel</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>defines the editor model</td>
|
|
||||||
<td>use it as getter or setter - 2 possible values: 'cell' or 'row'</td>
|
|
||||||
|
|
||||||
<td><code>myET.editorModel = 'row';</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>openEditorAction</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>defines which mouse action opens the inline editing feature</td>
|
|
||||||
<td>use it as getter or setter - 2 possible values: 'dblclick', 'click'</td>
|
|
||||||
|
|
||||||
<td><code>myET.openEditorAction = 'click';</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>ajax</strong> <sup>new</sup></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>enables AJAX requests (default: true if jQuery is detected)</td>
|
|
||||||
<td>it is enabled if jQuery is detected and the <code>ajax</code> property is
|
|
||||||
not explicitly set <code>false</code></td>
|
|
||||||
<td><code>myET.ajax = false;</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>inputEditorCss</strong></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>defines the css class for 'input' type editors</td>
|
|
||||||
<td>use it as getter or setter - select multiple rows by holding Ctrl
|
|
||||||
or Shift key down, only if selection model is 'multiple'</td>
|
|
||||||
|
|
||||||
<td><code>myET.inputEditorCss = 'myClass';</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>textareaEditorCss</strong></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>defines the css class for 'textarea' type editors</td>
|
|
||||||
<td>use it as getter or setter</td>
|
|
||||||
|
|
||||||
<td><code>myET.textareaEditorCss = 'myClass';</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>selectEditorCss</strong></td>
|
|
||||||
<td>number</td>
|
|
||||||
<td>defines the css class for 'input' type editors</td>
|
|
||||||
<td>use it as getter or setter</td>
|
|
||||||
|
|
||||||
<td><code>myET.selectEditorCss = 'myClass';</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>commandEditorCss</strong></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>css class applied to command editor buttons container</td>
|
|
||||||
<td>use it as getter or setter</td>
|
|
||||||
|
|
||||||
<td><code>myET.commandEditorCss = 'myClass';</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>modifiedCellCss</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>css class applied to modified cells</td>
|
|
||||||
<td>use it as getter or setter - this css class shows the green small
|
|
||||||
triangle in the left-upper corner of the cell</td>
|
|
||||||
|
|
||||||
<td><code>myET.modifiedCellCss = 'myClass';</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>cellEditors</strong></td>
|
|
||||||
<td>array</td>
|
|
||||||
<td>array defining the editor configuration for each column</td>
|
|
||||||
<td>use it as getter or setter - the number of editors must be equal
|
|
||||||
to the number of columns. Refer to <a href="doc.html#ez_cell_editors">Cell
|
|
||||||
editors properties</a> for details about editors' configuration</td>
|
|
||||||
<td><code>myET.cellEditors = [<br>
|
|
||||||
{ type: 'select' },<br>
|
|
||||||
{ type: 'textarea' },<br>
|
|
||||||
{ type: 'input' },<br>
|
|
||||||
{ type: 'uploader' },<br>
|
|
||||||
{ type: 'none' }, <br>
|
|
||||||
{ type: 'command' }<br>
|
|
||||||
];</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>actions</strong></td>
|
|
||||||
<td>object</td>
|
|
||||||
<td>server actions configuration object </td>
|
|
||||||
<td>use it as getter or setter - Refer to <a href="doc.html#ez_actions">actions
|
|
||||||
properties</a> for details about server actions configuration</td>
|
|
||||||
|
|
||||||
<td><code>myET.actions = {<br>
|
|
||||||
'update': { <br>
|
|
||||||
uri: 'updateRow.php', submit_method: 'form', form_method: 'POST',
|
|
||||||
<br>
|
|
||||||
param_names: ['iso', 'name', 'printablename', 'iso3', 'code'] },<br>
|
|
||||||
'insert': { <br>
|
|
||||||
uri: 'insertRow.php', submit_method: 'form', form_method: 'POST',
|
|
||||||
<br>
|
|
||||||
|
|
||||||
param_names: ['iso', 'name', 'printablename', 'iso3', 'code'] },<br>
|
|
||||||
'delete': { <br>
|
|
||||||
uri: 'script.delete.php', submit_method: 'script', bulk_delete: true
|
|
||||||
}<br>
|
|
||||||
}</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>autoSave</strong></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>saves automatically pending changes upon selection change</td>
|
|
||||||
<td><code>editable</code> property needs to be activated (default: true if editable is on)</td>
|
|
||||||
<td><code>myET.autoSave = false;</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>autoSaveModel</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>determines when modified and/or added data is saved, upon row or cell selection change (default: 'row')</td>
|
|
||||||
<td>2 possible values 'row' or 'cell'</td>
|
|
||||||
<td><code>myET.autoSaveModel = 'cell';</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>autoSaveType</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>defines if only insertions or updates, or both are saved automatically (default: 'both')</td>
|
|
||||||
<td>3 possible values 'insert', 'update' or 'both'</td>
|
|
||||||
<td><code>myET.autoSaveType = 'update';</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>editableOnKeystroke</strong> <sup>new</sup></td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>makes the inline cell editor appear upon keystroke (default: false)</td>
|
|
||||||
<td>only if edition is enabled and <code>editorModel</code> is set to <code>'cell'</code> and
|
|
||||||
<code>selectionModel</code> to <code>'single'</code></td>
|
|
||||||
<td><code>myET.editableOnKeystroke = true;</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>newRowPrefix</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>defines the prefix for new added row ids (default: 'tr')</td>
|
|
||||||
<td>prefix should match the prefix assigned to already existing rows</td>
|
|
||||||
<td><code>myET.newRowPrefix = 'row';</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>formSubmitInterval</strong></td>
|
|
||||||
<td>number</td>
|
|
||||||
<td>defines the interval in ms separating rows data submissions (default: 50)</td>
|
|
||||||
<td>by default the script submits a single form for each modified row. Depending on ISPs
|
|
||||||
security policies, multiple submissions to same page are simply blocked by the server.
|
|
||||||
This interval can be useful to fine tune the form submissions when those server restrictions apply.</td>
|
|
||||||
<td><code>myET.formSubmitInterval = 750;</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>newRowPos</strong> <sup>new</sup></td>
|
|
||||||
<td>string or number</td>
|
|
||||||
<td>defines the row position of a newly created row (default: 'top')</td>
|
|
||||||
<td>2 possible values as a string: 'top' or 'bottom', and as an integer:
|
|
||||||
any number >= 0 and <= total number of rows. If the supplied numeric
|
|
||||||
value exceeds the total number of rows then the script fallback to default
|
|
||||||
value 'top'</td>
|
|
||||||
<td><code>myET.newRowPos = 'bottom';</code></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
<a href="javascript:window.scroll(0,0);">Top of page</a>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- END CONTENT -->
|
|
||||||
|
|
||||||
<div id="footer"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
207
dist/extensions/ezEditTable/docs/doc_utilities.html
vendored
|
@ -1,207 +0,0 @@
|
||||||
|
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>ezEditTable, enhance HTML tables easily, advanced inline editing, selection and keyboard navigation - script by Max Guglielmi</title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|
||||||
<meta name="description" content="ezEditTable is an open source javascript code aimed at enhancing regular HTML tables by adding features such as inline editing components, advanced selection and keyboard navigation" />
|
|
||||||
<meta name="keywords" content="html table editing, html table inline cell editing, inline cell editor, row selection, script, javascript, max guglielmi" />
|
|
||||||
<meta name="robots" content="index,follow" />
|
|
||||||
<meta name="author" content="Max Guglielmi" />
|
|
||||||
<style type="text/css" media="screen, projection">
|
|
||||||
@import "http://edittable.free.fr/includes/common.css";
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script language="javascript" type="text/javascript" src="../ezEditTable.js"></script>
|
|
||||||
<link href="../ezEditTable.css" rel="stylesheet" type="text/css">
|
|
||||||
|
|
||||||
<style type="text/css" media="screen">
|
|
||||||
div#navmenu li a#lnk03{
|
|
||||||
color:#333; font-weight:bold;
|
|
||||||
border-top:2px solid #ff9900;
|
|
||||||
background:#fff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="container">
|
|
||||||
|
|
||||||
<div id="banner">
|
|
||||||
|
|
||||||
<div id="navmenu">
|
|
||||||
<ul>
|
|
||||||
<li><a id="lnk01" href="index.html">Home</a></li>
|
|
||||||
<li><a id="lnk02" href="samples.html">Samples</a></li>
|
|
||||||
<li><a id="lnk03" href="doc.html">Documentation</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- BEGIN CONTENT -->
|
|
||||||
|
|
||||||
<div id="content">
|
|
||||||
|
|
||||||
<div id="divsubmenu">
|
|
||||||
<ul class="submenu">
|
|
||||||
<li class="dir">
|
|
||||||
<a id="co" href="./doc.html">Configuration Object <small>▼</small></a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="./doc.html#ez_common">General</a></li>
|
|
||||||
<li><a href="./doc.html#ez_selection">Selection</a></li>
|
|
||||||
<li><a href="./doc.html#ez_sel_events">Selection callback events</a></li>
|
|
||||||
<li><a href="./doc.html#ez_editable">Editable</a></li>
|
|
||||||
<li><a href="./doc.html#ez_cell_editors">Cell editors</a></li>
|
|
||||||
<li><a href="./doc.html#ez_editable">Command buttons</a></li>
|
|
||||||
<li><a href="./doc.html#ez_uploader">Uploader editor <sup>new</sup></a></li>
|
|
||||||
<li><a href="./doc.html#ez_editable_events">Editable callback events</a></li>
|
|
||||||
<li><a href="./doc.html#ez_actions">Actions</a></li>
|
|
||||||
<li><a href="./doc.html#ez_actions_events">Actions callback events</a></li>
|
|
||||||
<li><a href="./doc.html#ez_msg">Messages</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="dir">
|
|
||||||
<a id="cl" href="./doc_class.html">TF Class<small>▼</small></a>
|
|
||||||
<ul>
|
|
||||||
|
|
||||||
<li><a href="./doc_class.html#ez_constructor">Constructor</a></li>
|
|
||||||
<li><a href="./doc_methods.html#ez_methods">General public methods</a></li>
|
|
||||||
<li><a href="./doc_methods.html#ez_selection_methods">Selection public methods</a></li>
|
|
||||||
<li><a href="./doc_methods.html#ez_editable_methods">Editable public methods</a></li>
|
|
||||||
<li><a href="./doc_properties.html#ez_properties">General public properties</a></li>
|
|
||||||
<li><a href="./doc_properties.html#ez_selection_properties">Selection public properties</a></li>
|
|
||||||
|
|
||||||
<li><a href="./doc_properties.html#ez_editable_properties">Editable public properties</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a id="uf" href="./doc_utilities.html">Utility Functions</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="marginTop30">Documentation</h1>
|
|
||||||
|
|
||||||
<a name="class" id="class"></a>
|
|
||||||
|
|
||||||
<h2>Utility Functions</h2>
|
|
||||||
|
|
||||||
|
|
||||||
<table id="tblUtils" cellspacing="0" class="ezEditableTable" width="100%">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th >Method</th>
|
|
||||||
<th >Description</th>
|
|
||||||
<th >Remarks</th>
|
|
||||||
|
|
||||||
<th >Example</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><strong> setEditTable( id, startRow, config )</strong></td>
|
|
||||||
<td><p>Calls EditTable constructor and returns the EditTable object:</p>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>id: table id (string)</li>
|
|
||||||
<li>startRow (optional): index of the first row from which row selection
|
|
||||||
can start (number)</li>
|
|
||||||
<li>config (optional): configuration object (literal object)</li>
|
|
||||||
</ul></td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code> var et = setEditTable('myTableId', 2, { editable: true });</code></td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong> Get(id)</strong></td>
|
|
||||||
<td><p>this is a <code>document.getElementById()</code> shortcut:</p>
|
|
||||||
<ul>
|
|
||||||
<li>id: id of the element (string)</li>
|
|
||||||
|
|
||||||
</ul></td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code> var myElm = et.Get('myId');</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>Tag(o, tagname)</strong></td>
|
|
||||||
<td><p>this is just a <code>getElementsByTagName()</code> shortcut:</p>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>o: target element (DOM element)</li>
|
|
||||||
<li>tagname: tag to search for (string)</li>
|
|
||||||
</ul>
|
|
||||||
<p>It returns an array</p></td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>var myTables = et.Tag(document, 'table');</code></td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>GetText(n)</strong></td>
|
|
||||||
<td><p>returns the text of given a node and its child nodes:</p>
|
|
||||||
<ul>
|
|
||||||
<li>n: node (DOM element)</li>
|
|
||||||
</ul></td>
|
|
||||||
<td> </td>
|
|
||||||
|
|
||||||
<td><code>var tableText = et.GetText( et.Tag(document,'table' )[0]);</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>CreateElm(tag)</strong></td>
|
|
||||||
<td><p>creates an html element with defined attributes:</p>
|
|
||||||
<ul>
|
|
||||||
<li>the html tag to create (string)</li>
|
|
||||||
|
|
||||||
<li>an unlimited # of arrays defining the attributes values ('attribute
|
|
||||||
name','value' ['id','myId'])</li>
|
|
||||||
</ul></td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>var myInput = et.CreateElm( 'input', ['id','myId'], ['value','Hello
|
|
||||||
world'] );</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>CreateText(t)</strong></td>
|
|
||||||
<td><p>this is just a <code>document.createTextNode</code> shortcut:</p>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>t: text to generate (string)</li>
|
|
||||||
</ul></td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>var myText = et.CreateText( 'Hello world' );</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>IsArray(obj)</strong></td>
|
|
||||||
|
|
||||||
<td><p>checks if passed param is an array. It returns a boolean</p></td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>alert(et.IsArray([1,2,3]));</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>IsObj(obj)</strong></td>
|
|
||||||
<td><p>checks if passed param is an object. It returns a boolean</p></td>
|
|
||||||
|
|
||||||
<td> </td>
|
|
||||||
<td><code>alert(et.IsObj({ text: 'hello'}));</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>IsFn(fn)</strong></td>
|
|
||||||
<td><p>checks if passed param is a function. It returns a boolean</p></td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>alert(et.IsFn(function(){ var a=0; }));</code></td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- END CONTENT -->
|
|
||||||
|
|
||||||
<div id="footer"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
473
dist/extensions/ezEditTable/docs/index.html
vendored
|
@ -1,473 +0,0 @@
|
||||||
|
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>ezEditTable, enhance HTML tables easily, advanced inline editing, selection and keyboard navigation - script by Max Guglielmi</title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|
||||||
<meta name="description" content="ezEditTable is an open source javascript code aimed at enhancing regular HTML tables by adding features such as inline editing components, advanced selection and keyboard navigation" />
|
|
||||||
<meta name="keywords" content="html table editing, html table inline cell editing, inline cell editor, row selection, script, javascript, max guglielmi" />
|
|
||||||
<meta name="robots" content="index,follow" />
|
|
||||||
<meta name="author" content="Max Guglielmi" />
|
|
||||||
<style type="text/css" media="screen, projection">
|
|
||||||
@import "http://edittable.free.fr/includes/common.css";
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<link href="../ezEditTable.css" rel="stylesheet" type="text/css">
|
|
||||||
<script src="../ezEditTable.js"></script>
|
|
||||||
|
|
||||||
<style type="text/css" media="screen">
|
|
||||||
div#navmenu li a#lnk01{
|
|
||||||
color:#333; font-weight:bold;
|
|
||||||
border-top:2px solid #ff9900;
|
|
||||||
background:#fff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="container">
|
|
||||||
|
|
||||||
<div id="banner">
|
|
||||||
|
|
||||||
<div id="navmenu">
|
|
||||||
<ul>
|
|
||||||
<li><a id="lnk01" href="index.html">Home</a></li>
|
|
||||||
<li><a id="lnk02" href="samples.html">Samples</a></li>
|
|
||||||
<li><a id="lnk03" href="doc.html">Documentation</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- BEGIN CONTENT -->
|
|
||||||
|
|
||||||
<div id="content">
|
|
||||||
<h1>ezEditTable</h1>
|
|
||||||
<h2>Description</h2>
|
|
||||||
<p>
|
|
||||||
ezEditTable is a javascript code aimed at enhancing regular
|
|
||||||
HTML tables by adding features such as inline editing components, advanced
|
|
||||||
selection and keyboard navigation. With just a line of code you can easily
|
|
||||||
convert a regular HTML table in an advanced editable and selectable grid control.
|
|
||||||
</p>
|
|
||||||
<h3>Main features</h3>
|
|
||||||
<ul>
|
|
||||||
<li>Attach to an existing HTML table</li>
|
|
||||||
<li>Advanced selection model</li>
|
|
||||||
<li>Extended keyboard navigation</li>
|
|
||||||
<li>Inline cell or row editing</li>
|
|
||||||
<li>Insert and remove rows</li>
|
|
||||||
<li>Send changes to server via GET or POST form submission, AJAX requests or
|
|
||||||
by script injection in the head section of the document (only GETs)</li>
|
|
||||||
<li>Integration with any server-side technology as this is a pure client-side solution</li>
|
|
||||||
<li>Callbacks for all events, and delegates for most actions</li>
|
|
||||||
<li>Based on plain javascript and dependent on jQuery only for performing AJAX requests</li>
|
|
||||||
<li>Exhaustive documentation and API</li>
|
|
||||||
<li>Easy setup and easy customisable themes</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Installation
|
|
||||||
<span class="floatRight fontSize12px">
|
|
||||||
<a href="starter.html">Starter</a>
|
|
||||||
</span>
|
|
||||||
</h2>
|
|
||||||
<p>To install <strong>ezEditTable</strong> unzip the download package and then include the following
|
|
||||||
scripts and stylesheet files in the <code>head</code> section of your page:</p>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<link href="ezEditTable/ezEditTable.css" rel="stylesheet" type="text/css"/>
|
|
||||||
<script src="ezEditTable/ezEditTable.js"></script>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>Make sure the table you'd like to make editable or selectable
|
|
||||||
has an unique <code>id</code> and a <code>thead</code> and <code>tbody</code>
|
|
||||||
sections.</p>
|
|
||||||
<p>Here you have an example of a regular html table: </p>
|
|
||||||
<table border="1" cellspacing="0" cellpadding="2" width="80%">
|
|
||||||
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<p>Below the same table enhanced by the script (<code>id="table1"</code>),
|
|
||||||
click to select a row or use keys to move the selection:</p>
|
|
||||||
<table id="table1" cellspacing="0" cellpadding="0" width="80%">
|
|
||||||
|
|
||||||
<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>
|
|
||||||
<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 language="javascript" type="text/javascript">
|
|
||||||
var et = new EditTable('table1');
|
|
||||||
et.Init();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<p>There are 2 different ways to call the script:</p>
|
|
||||||
<ul>
|
|
||||||
|
|
||||||
|
|
||||||
<li>invoke the <code>setEditTable</code> function, which returns a EditTable object: </li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<pre class="brush: js;"><script language="javascript" type="text/javascript">
|
|
||||||
var et = setEditTable("table1");
|
|
||||||
</script> </pre>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>instanciate the <strong><code>EditTable</code></strong> object: </li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<pre class="brush: js;"><script language="javascript" type="text/javascript">
|
|
||||||
var et = new EditTable('table1');
|
|
||||||
et.Init();
|
|
||||||
</script> </pre>
|
|
||||||
<p>If your document contains several tables (like this page), it is important
|
|
||||||
to define unique ids, otherwise the script will not work properly. </p>
|
|
||||||
|
|
||||||
<p>The <code>setEditTable()</code> function or the <code>EditTable</code>
|
|
||||||
class accepts 2 additional parameters that will be explained in the next
|
|
||||||
tables. In the example below, by specifing a row number as a "start"
|
|
||||||
row, we tell the script from which row can start the selection, this is
|
|
||||||
helpful when the <code>tbody</code> and <code>thead</code> sections are not defined: </p>
|
|
||||||
|
|
||||||
|
|
||||||
<table id="table2" cellspacing="0" cellpadding="0" >
|
|
||||||
<tr>
|
|
||||||
<td colspan="5"><strong>This is the table caption </strong></td>
|
|
||||||
</tr>
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
</table>
|
|
||||||
<script language="javascript" type="text/javascript">
|
|
||||||
var et02 = new EditTable("table2",2);
|
|
||||||
et02.Init();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<pre class="brush: js;">var et02 = setEditTable("table2", 2);</pre>
|
|
||||||
|
|
||||||
<p>or</p>
|
|
||||||
|
|
||||||
<pre class="brush: js;">var et02 = new EditTable("table2", 2);
|
|
||||||
et02.Init();</pre>
|
|
||||||
<p>By default, the script adds a single row selection feature to the table.
|
|
||||||
You could decide to also add a cell selection feature and make the cells
|
|
||||||
editable, double-click on a cell to see:</p>
|
|
||||||
|
|
||||||
<table id="table3" cellspacing="0" cellpadding="0">
|
|
||||||
<tr>
|
|
||||||
<td colspan="5"><strong>This is the table caption </strong></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<th style="width:100px">From</th>
|
|
||||||
<th style="width:100px">Destination</th>
|
|
||||||
<th style="width:100px">Road Distance (km)</th>
|
|
||||||
<th style="width:100px">By Air (hrs)</th>
|
|
||||||
<th style="width:80px">By Rail (hrs)</th>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Sydney</td>
|
|
||||||
<td>Adelaide</td>
|
|
||||||
<td>1412</td>
|
|
||||||
<td>1.4</td>
|
|
||||||
<td>25.3</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Sydney</td>
|
|
||||||
<td>Brisbane</td>
|
|
||||||
<td>982</td>
|
|
||||||
<td>1.5</td>
|
|
||||||
<td>16</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Sydney</td>
|
|
||||||
<td>Canberra</td>
|
|
||||||
<td>286</td>
|
|
||||||
<td>.6</td>
|
|
||||||
<td>4.3</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Sydney</td>
|
|
||||||
<td>Melbourne</td>
|
|
||||||
<td>872</td>
|
|
||||||
<td>1.1</td>
|
|
||||||
<td>10.5</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Adelaide</td>
|
|
||||||
<td>Perth</td>
|
|
||||||
<td>2781</td>
|
|
||||||
<td>3.1</td>
|
|
||||||
<td>38</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Adelaide</td>
|
|
||||||
<td>Alice Springs</td>
|
|
||||||
<td>1533</td>
|
|
||||||
<td>2</td>
|
|
||||||
<td>20.25</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Adelaide</td>
|
|
||||||
<td>Brisbane</td>
|
|
||||||
<td>2045</td>
|
|
||||||
<td>2.15</td>
|
|
||||||
<td>40</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
<script language="javascript" type="text/javascript">
|
|
||||||
var table3Config = {
|
|
||||||
default_selection: 'both',
|
|
||||||
editable: true,
|
|
||||||
auto_save: false
|
|
||||||
};
|
|
||||||
var et03 = new EditTable("table3", 2, table3Config);
|
|
||||||
et03.Init();
|
|
||||||
</script>
|
|
||||||
<p>To do that you just need to declare a <em>literal object</em> (configuration
|
|
||||||
object) in which you specify the features you would like to enable:</p>
|
|
||||||
|
|
||||||
<pre class="brush: js;"><script language="javascript" type="text/javascript">
|
|
||||||
var table3Config = {
|
|
||||||
default_selection: 'both',
|
|
||||||
editable: true,
|
|
||||||
auto_save: false
|
|
||||||
}
|
|
||||||
var et03 = setTableEdit("table3", 2, table3Config);
|
|
||||||
</script></pre>
|
|
||||||
<p>or</p>
|
|
||||||
<pre class="brush: js;"><script language="javascript" type="text/javascript">
|
|
||||||
var table3Config = {
|
|
||||||
default_selection: 'both',
|
|
||||||
editable: true,
|
|
||||||
auto_save: false
|
|
||||||
}
|
|
||||||
var et03 = new EditTable("table3", 2 ,table3Config);
|
|
||||||
et03.Init();
|
|
||||||
</script></pre>
|
|
||||||
|
|
||||||
<p>You can name the <em>configuration object</em> as you want, but don't forget
|
|
||||||
to add it to the parameters of the <code>setEditTable</code>() function
|
|
||||||
or <code>EditTable</code> class. It is important to respect the syntax and
|
|
||||||
naming convention as shown above. You will find an exhaustive list of properties
|
|
||||||
in the <a href="doc.html">documentation</a> section. </p>
|
|
||||||
<h2>Documentation</h2>
|
|
||||||
|
|
||||||
|
|
||||||
<p>For more information about the script's configuration and API check out
|
|
||||||
the <a href="doc.html">documentation</a> and the
|
|
||||||
available online <a href="http://edittable.free.fr/demos.php">demos</a>.</p>
|
|
||||||
|
|
||||||
<hr class="clearBoth" />
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- END CONTENT -->
|
|
||||||
|
|
||||||
<div id="footer"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
1082
dist/extensions/ezEditTable/docs/samples.html
vendored
195
dist/extensions/ezEditTable/docs/starter.html
vendored
|
@ -1,195 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>ezEditTable, enhance HTML tables easily - Starter page - by Max Guglielmi</title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|
||||||
<meta name="description" content="ezEditTable is an open source javascript code aimed at enhancing regular HTML tables by adding features such as inline editing components, advanced selection and keyboard navigation" />
|
|
||||||
<meta name="keywords" content="html table editing, html table inline cell editing, inline cell editor, row selection, script, javascript" />
|
|
||||||
<meta name="author" content="Max Guglielmi" />
|
|
||||||
|
|
||||||
<link href="../ezEditTable.css" rel="stylesheet" type="text/css">
|
|
||||||
<script src="../ezEditTable.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<h1>Starter</h1>
|
|
||||||
<p>
|
|
||||||
<a href="index.html">← Documentation</a>
|
|
||||||
</p>
|
|
||||||
<div>
|
|
||||||
<table id="demo" cellspacing="0" cellpadding="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>
|
|
||||||
<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 language="javascript" type="text/javascript">
|
|
||||||
var config = {
|
|
||||||
selection: true,
|
|
||||||
default_selection: 'both'
|
|
||||||
};
|
|
||||||
var et = new EditTable('demo', config);
|
|
||||||
et.Init();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h4>Source code of the page:</h4>
|
|
||||||
<pre>
|
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>ezEditTable, enhance HTML tables easily - Starter page - by Max Guglielmi</title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|
||||||
|
|
||||||
<link href="../ezEditTable.css" rel="stylesheet" type="text/css">
|
|
||||||
<script src="../ezEditTable.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>ezEditTable Starter</h1>
|
|
||||||
|
|
||||||
<table id="demo" cellspacing="0" cellpadding="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>
|
|
||||||
<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 language="javascript" type="text/javascript">
|
|
||||||
var config = {
|
|
||||||
selection: true,
|
|
||||||
default_selection: 'both'
|
|
||||||
};
|
|
||||||
var et = new EditTable('demo', config);
|
|
||||||
et.Init();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -1,86 +0,0 @@
|
||||||
/*====================================================
|
|
||||||
- ezEditTable global stylesheet
|
|
||||||
- Edit classes below for your projects' needs
|
|
||||||
=====================================================*/
|
|
||||||
|
|
||||||
.ezEditableTable{
|
|
||||||
padding:0; color:#000;
|
|
||||||
border-collapse:collapse;
|
|
||||||
font:12px/13px arial, tahoma, helvetica, sans-serif !important;
|
|
||||||
}
|
|
||||||
.ezEditableTable th, .ezEditableTable td{
|
|
||||||
margin:0; padding:5px;
|
|
||||||
color:inherit;
|
|
||||||
border:1px solid #ccc !important;
|
|
||||||
}
|
|
||||||
.ezEditableTable th{
|
|
||||||
background:#EBECEE !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Selection */
|
|
||||||
.ezActiveRow{ background-color:#2852A8 !important; color:#fff; }
|
|
||||||
.ezSelectedRow{ background-color:#316AC5; color:#fff; }
|
|
||||||
.ezActiveCell{
|
|
||||||
background-color:#D9E8FB !important;
|
|
||||||
color:#000 !important; font-weight:bold;
|
|
||||||
}
|
|
||||||
.ezUnselectable{
|
|
||||||
-moz-user-select: -moz-none;
|
|
||||||
-khtml-user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-o-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cell editors */
|
|
||||||
.ezInputEditor{ width:95%; height:auto; font-size:inherit; border:1px solid #AACCF6; }
|
|
||||||
.ezTextareaEditor{ width:95%; height:35px; font-size:inherit; border:1px solid #AACCF6; }
|
|
||||||
.ezSelectEditor{ width:100%; font-size:inherit; border:1px solid #AACCF6; }
|
|
||||||
.ezModifiedCell{ background:transparent url(themes/bg_mod_cell.png) 0 0 no-repeat; }
|
|
||||||
select[multiple="multiple"].ezSelectEditor{ height:35px; }
|
|
||||||
/* Command type editor */
|
|
||||||
.ezCommandEditor{ margin:2px; }
|
|
||||||
.ezCommandEditor button{
|
|
||||||
font-size:10px;
|
|
||||||
border:1px solid #ccc;
|
|
||||||
background:#fff; margin:1px;
|
|
||||||
border-radius:4px 4px 4px 4px;
|
|
||||||
-moz-border-radius:4px 4px 4px 4px;
|
|
||||||
}
|
|
||||||
/* Uploader editor */
|
|
||||||
.ezUploaderEditor{
|
|
||||||
position:absolute; display:inline;
|
|
||||||
margin:15px 0 0 0px;
|
|
||||||
border:1px solid #ccc; padding:5px;
|
|
||||||
background:#fff; color:#000; z-index:10000;
|
|
||||||
border-radius:4px;
|
|
||||||
-moz-border-radius:4px;
|
|
||||||
-webkit-border-radius:4px;
|
|
||||||
box-shadow:3px 3px 2px #888;
|
|
||||||
-moz-box-shadow:3px 3px 2px #888;
|
|
||||||
-webkit-box-shadow:3px 3px 2px #888;
|
|
||||||
}
|
|
||||||
.ezUploaderEditor button{
|
|
||||||
font-size:10px;
|
|
||||||
border:1px solid #ccc;
|
|
||||||
background:#fff; margin:1px;
|
|
||||||
border-radius:4px 4px 4px 4px;
|
|
||||||
-moz-border-radius:4px 4px 4px 4px;
|
|
||||||
}
|
|
||||||
.ezUploaderEditorOutput{ }
|
|
||||||
.ezUploaderEditorDisplay{
|
|
||||||
display:none; position:relative;
|
|
||||||
max-width:800px; max-height:600px;
|
|
||||||
overflow:auto; border:0;
|
|
||||||
background:#fff; padding:5px; margin:5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Utils */
|
|
||||||
.ezOpacity{
|
|
||||||
filter:alpha(opacity=60); /* for IE */
|
|
||||||
opacity:0.6; /* CSS3 standard */
|
|
||||||
}
|
|
||||||
.alignLeft{ text-align:left; }
|
|
||||||
.alignCenter{ text-align:center; }
|
|
||||||
.alignRight{ text-align:right; }
|
|
||||||
.icnImg{ border:0; }
|
|
2081
dist/extensions/ezEditTable/ezEditTable-uncompressed.js
vendored
7
dist/extensions/ezEditTable/ezEditTable.css
vendored
|
@ -1,7 +0,0 @@
|
||||||
/*------------------------------------------------------------------------
|
|
||||||
- ezEditTable stylesheet by Max Guglielmi
|
|
||||||
- (build date: Sun Mar 15 2015 15:46:31)
|
|
||||||
- Edit below for your projects' needs
|
|
||||||
------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
.ezEditableTable{padding:0;color:#000;border-collapse:collapse;font:12px/13px arial,tahoma,helvetica,sans-serif!important}.ezEditableTable th,.ezEditableTable td{margin:0;padding:5px;color:inherit;border:1px solid #ccc!important}.ezEditableTable th{background:#EBECEE!important}.ezActiveRow{background-color:#2852A8!important;color:#fff}.ezSelectedRow{background-color:#316AC5;color:#fff}.ezActiveCell{background-color:#D9E8FB!important;color:#000!important;font-weight:700}.ezUnselectable{-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none}.ezInputEditor{width:95%;height:auto;font-size:inherit;border:1px solid #AACCF6}.ezTextareaEditor{width:95%;height:35px;font-size:inherit;border:1px solid #AACCF6}.ezSelectEditor{width:100%;font-size:inherit;border:1px solid #AACCF6}.ezModifiedCell{background:transparent url(themes/bg_mod_cell.png) 0 0 no-repeat}select[multiple=multiple].ezSelectEditor{height:35px}.ezCommandEditor{margin:2px}.ezCommandEditor button{font-size:10px;border:1px solid #ccc;background:#fff;margin:1px;border-radius:4px;-moz-border-radius:4px}.ezUploaderEditor{position:absolute;display:inline;margin:15px 0 0;border:1px solid #ccc;padding:5px;background:#fff;color:#000;z-index:10000;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;box-shadow:3px 3px 2px #888;-moz-box-shadow:3px 3px 2px #888;-webkit-box-shadow:3px 3px 2px #888}.ezUploaderEditor button{font-size:10px;border:1px solid #ccc;background:#fff;margin:1px;border-radius:4px;-moz-border-radius:4px}.ezUploaderEditorOutput{}.ezUploaderEditorDisplay{display:none;position:relative;max-width:800px;max-height:600px;overflow:auto;border:0;background:#fff;padding:5px;margin:5px}.ezOpacity{filter:alpha(opacity=60);opacity:.6}.alignLeft{text-align:left}.alignCenter{text-align:center}.alignRight{text-align:right}.icnImg{border:0}
|
|
9
dist/extensions/ezEditTable/ezEditTable.js
vendored
BIN
dist/extensions/ezEditTable/themes/bg_mod_cell.png
vendored
Before Width: | Height: | Size: 234 B |
|
@ -1,23 +0,0 @@
|
||||||
/*====================================================
|
|
||||||
- ezEditTable default theme stylesheet
|
|
||||||
- Edit classes below for your project needs
|
|
||||||
=====================================================*/
|
|
||||||
|
|
||||||
.ezEditableTable{
|
|
||||||
border:0 !important;
|
|
||||||
border-left:1px solid #99BBE8 !important;
|
|
||||||
border-right:1px solid #99BBE8 !important;
|
|
||||||
border-bottom:1px solid #99BBE8 !important;
|
|
||||||
font:12px/13px arial, tahoma, helvetica, sans-serif !important;
|
|
||||||
}
|
|
||||||
.ezEditableTable th, td{ border:1px solid #C5D3EC !important; }
|
|
||||||
.ezEditableTable th{
|
|
||||||
background:transparent url(img/bg_col_header.gif) 0 -2px repeat-x !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Selection */
|
|
||||||
.ezActiveRow td{ background-color:#316AC5; color:#fff !important; }
|
|
||||||
.ezSelectedRow{ background-color:#D9E8FB !important; border:1px dotted #909090 !important; color:#000; }
|
|
||||||
|
|
||||||
/* Command type editor */
|
|
||||||
.ezCommandEditor button{ border:1px solid #C5D3EC !important; }
|
|
Before Width: | Height: | Size: 875 B |
BIN
dist/extensions/ezEditTable/themes/icn_add.gif
vendored
Before Width: | Height: | Size: 398 B |
BIN
dist/extensions/ezEditTable/themes/icn_cross.png
vendored
Before Width: | Height: | Size: 655 B |
BIN
dist/extensions/ezEditTable/themes/icn_del.gif
vendored
Before Width: | Height: | Size: 330 B |
BIN
dist/extensions/ezEditTable/themes/icn_edit.gif
vendored
Before Width: | Height: | Size: 342 B |
BIN
dist/extensions/ezEditTable/themes/icn_save.gif
vendored
Before Width: | Height: | Size: 375 B |
BIN
dist/extensions/ezEditTable/themes/icn_tick.png
vendored
Before Width: | Height: | Size: 537 B |
|
@ -1,68 +0,0 @@
|
||||||
/*====================================================
|
|
||||||
- ezEditTable SkyBlue theme stylesheet
|
|
||||||
- Edit classes below for your project needs
|
|
||||||
=====================================================*/
|
|
||||||
|
|
||||||
.ezEditableTable{
|
|
||||||
padding:0; color:#000;
|
|
||||||
font:12px/13px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif !important;
|
|
||||||
border-right:1px solid #A4BED4;
|
|
||||||
border-top:1px solid #A4BED4;
|
|
||||||
border-left:1px solid #A4BED4;
|
|
||||||
border-bottom:0;
|
|
||||||
}
|
|
||||||
.ezEditableTable td{
|
|
||||||
margin:0; padding:5px; color:inherit;
|
|
||||||
border-bottom:1px solid #A4BED4;
|
|
||||||
border-left:0; border-top:0; border-right:0;
|
|
||||||
}
|
|
||||||
.ezEditableTable th{
|
|
||||||
margin:0; padding:5px; color:inherit;
|
|
||||||
background:#D1E5FE url("img/sky_blue_grid.gif") 0 0 repeat-x !important;
|
|
||||||
border-color:#FDFDFD #A4BED4 #A4BED4 #FDFDFD;
|
|
||||||
border-width:1px; border-style:solid;
|
|
||||||
}
|
|
||||||
.ezModifiedCell{ background:transparent url(../bg_mod_cell.png) 0 0 no-repeat !important; }
|
|
||||||
|
|
||||||
/* Selection */
|
|
||||||
.ezActiveRow td{ background:#D9E8FB; border-top:1px solid #FDFDFD; border-bottom:1px solid #A4BED4 !important; color:#000 !important; }
|
|
||||||
.ezSelectedRow{ background:#D1E5FE url("img/sky_blue_grid.gif") 0 0 repeat-x !important; color:#000; }
|
|
||||||
td.ezActiveCell{
|
|
||||||
background-color:#fff !important; color:#000 !important;
|
|
||||||
font-weight:bold; font-style:italic; border-bottom:0;
|
|
||||||
border-top:1px solid #FDFDFD !important;
|
|
||||||
border-left:1px solid #A4BED4 !important;
|
|
||||||
border-right:1px solid #A4BED4 !important;
|
|
||||||
}
|
|
||||||
.ezUnselectable{
|
|
||||||
-moz-user-select: -moz-none;
|
|
||||||
-khtml-user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-o-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Editors */
|
|
||||||
.ezInputEditor{ width:100%; height:auto; font:12px/13px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif !important; border:0; }
|
|
||||||
.ezTextareaEditor{ width:100%; height:25px; font:12px/13px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif !important; border:0; overflow:auto; }
|
|
||||||
.ezSelectEditor{ width:100%; font:12px/13px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif !important; border:1px solid #AACCF6; }
|
|
||||||
select[multiple="multiple"].ezSelectEditor{ height:35px; }
|
|
||||||
|
|
||||||
/* Command type editor */
|
|
||||||
.ezCommandEditor button{
|
|
||||||
margin:2px !important; background:#D1E5FE;
|
|
||||||
border:1px solid #A4BED4;
|
|
||||||
font-size:12px !important;
|
|
||||||
border-radius:4px 4px 4px 4px;
|
|
||||||
-moz-border-radius:4px 4px 4px 4px;
|
|
||||||
}
|
|
||||||
.ezCommandEditor button img{ vertical-align:middle; margin:2px; }
|
|
||||||
|
|
||||||
/* Utils */
|
|
||||||
.ezOpacity{
|
|
||||||
filter:alpha(opacity=60); /* for IE */
|
|
||||||
opacity:0.6; /* CSS3 standard */
|
|
||||||
}
|
|
||||||
.alignLeft{ text-align:left; }
|
|
||||||
.alignCenter{ text-align:center; }
|
|
||||||
.alignRight{ text-align:right; }
|
|
Before Width: | Height: | Size: 554 B |
7
dist/filtergrid.css
vendored
9226
dist/tablefilter.js
vendored
|
@ -1,4 +0,0 @@
|
||||||
|
|
||||||
return require('ColsVisibility');
|
|
||||||
|
|
||||||
});
|
|
|
@ -1,4 +0,0 @@
|
||||||
|
|
||||||
return require('tablefilter');
|
|
||||||
|
|
||||||
});
|
|
|
@ -1,4 +0,0 @@
|
||||||
|
|
||||||
return require('adapterSortabletable');
|
|
||||||
|
|
||||||
});
|
|
|
@ -1,10 +0,0 @@
|
||||||
|
|
||||||
(function (root, factory) {
|
|
||||||
if (typeof define === 'function' && define.amd) {
|
|
||||||
define(factory);
|
|
||||||
} else if (typeof exports === 'object') {
|
|
||||||
module.exports = factory;
|
|
||||||
} else {
|
|
||||||
root.AdapterSortableTable = factory();
|
|
||||||
}
|
|
||||||
})(this, function() {
|
|
|
@ -1,10 +0,0 @@
|
||||||
|
|
||||||
(function (root, factory) {
|
|
||||||
if (typeof define === 'function' && define.amd) {
|
|
||||||
define(factory);
|
|
||||||
} else if (typeof exports === 'object') {
|
|
||||||
module.exports = factory;
|
|
||||||
} else {
|
|
||||||
root.ColsVisibility = factory();
|
|
||||||
}
|
|
||||||
})(this, function() {
|
|
|
@ -1,10 +0,0 @@
|
||||||
|
|
||||||
(function (root, factory) {
|
|
||||||
if (typeof define === 'function' && define.amd) {
|
|
||||||
define(factory);
|
|
||||||
} else if (typeof exports === 'object') {
|
|
||||||
module.exports = factory;
|
|
||||||
} else {
|
|
||||||
root.AdapterSortableTable = factory();
|
|
||||||
}
|
|
||||||
})(this, function() {
|
|
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: 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 |
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 |
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 |
Before Width: | Height: | Size: 201 B After Width: | Height: | Size: 201 B |
Before Width: | Height: | Size: 68 B After Width: | Height: | Size: 68 B |