Added selection grid demo, removed old demos
This commit is contained in:
Max Guglielmi
parent
b9e568787d
commit
0736390ff6
10
Gruntfile.js
10
Gruntfile.js
|
|
@ -79,6 +79,16 @@ module.exports = function (grunt) {
|
|||
},{
|
||||
pattern: /{VERSION}/ig,
|
||||
replacement: pkg.version
|
||||
},{
|
||||
pattern: /{EZEDITTABLE_LINK}/ig,
|
||||
replacement: '<a href="http://edittable.free.fr/' +
|
||||
'zip.php?f=ezEditTable.zip&p=1"' +
|
||||
'target="_blank" title="ezEditTable is a ' +
|
||||
'javascript code aimed at enhancing regular ' +
|
||||
'HTML tables by adding features such as ' +
|
||||
'inline editing components, advanced ' +
|
||||
'selection and keyboard navigation ' +
|
||||
'- Developed by Max Guglielmi">ezEditTable</a>'
|
||||
},{
|
||||
pattern: /<!-- @import (.*?) -->/ig,
|
||||
replacement: function (match, p1) {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,179 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>HTML Table Filter Generator</title>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 500px;">
|
||||
<table id="demo" cellpadding="0" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>From</th>
|
||||
<th>Destination</th>
|
||||
<th>Road Distance (km)</th>
|
||||
<th>By Air (hrs)</th>
|
||||
<th>By Rail (hrs)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- <tfoot>
|
||||
<tr>
|
||||
<td>Tot:</td>
|
||||
<td></td>
|
||||
<td id="sum1"></td>
|
||||
<td id="sum2"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot> -->
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Adelaide</td>
|
||||
<td>1412</td>
|
||||
<td>1.4</td>
|
||||
<td>25.3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Brisbane</td>
|
||||
<td>982</td>
|
||||
<td>1.5</td>
|
||||
<td>16</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Canberra</td>
|
||||
<td>286</td>
|
||||
<td>.6</td>
|
||||
<td>4.3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Melbourne</td>
|
||||
<td>872</td>
|
||||
<td>1.1</td>
|
||||
<td>10.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Perth</td>
|
||||
<td>2781</td>
|
||||
<td>3.1</td>
|
||||
<td>38</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Alice Springs</td>
|
||||
<td>1533</td>
|
||||
<td>2</td>
|
||||
<td>20.25</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Brisbane</td>
|
||||
<td>2045</td>
|
||||
<td>2.15</td>
|
||||
<td>40</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../build/tablefilter/tablefilter.js"></script>
|
||||
<script>
|
||||
// var table = document.getElementById('demo');
|
||||
// var totRowIndex = table.getElementsByTagName("tr").length;
|
||||
|
||||
var tf = new TableFilter("demo", {
|
||||
col_0: 'select',
|
||||
col_2: 'multiple',
|
||||
col_3: 'checklist',
|
||||
base_path: '../build/tablefilter/',
|
||||
loader: true,
|
||||
rows_counter: true,
|
||||
enable_default_theme: true,
|
||||
// slc_filling_method: 'innerhtml',
|
||||
sort: true,
|
||||
sort_config: {
|
||||
sort_types: ['string','string','number','number','number']
|
||||
},
|
||||
paging: false,
|
||||
paging_length: 4,
|
||||
// page_selector_type: 'input',
|
||||
results_per_page: ['Results per page', [2,4,6]],
|
||||
remember_grid_values: true,
|
||||
// remember_page_number: true,
|
||||
// remember_page_length: true,
|
||||
fill_slc_on_demand: false,
|
||||
linked_filters: false,
|
||||
popup_filters: false,
|
||||
alternate_rows: true,
|
||||
highlight_keywords: true,
|
||||
match_case: false,
|
||||
btn_reset: true,
|
||||
status_bar: true,
|
||||
watermark: [null, 'Filter column...', null, null, 'Helo'],
|
||||
selectable: false,
|
||||
editable: false,
|
||||
ezEditTable_config:{
|
||||
default_selection: 'both',
|
||||
loadStylesheet: true
|
||||
},
|
||||
grid_layout: true,
|
||||
grid_width: '600px',
|
||||
// grid_height: '200px',
|
||||
on_before_show_msg: function(tf){
|
||||
// console.log('on_before_show_msg');
|
||||
},
|
||||
|
||||
// rows_always_visible: [totRowIndex],
|
||||
// col_operation: {
|
||||
// id: ["sum1", "sum2"],
|
||||
// col: [2, 3],
|
||||
// operation: ["sum", "mean"],
|
||||
// write_method: ["innerhtml", 'innerhtml'],
|
||||
// exclude_row: [totRowIndex],
|
||||
// decimal_precision: [0, 2],
|
||||
// tot_row_index: [totRowIndex, totRowIndex]
|
||||
// },
|
||||
extensions: [{
|
||||
/*** Columns Visibility Manager extension load ***/
|
||||
name: 'colsVisibility',
|
||||
description: 'Columns visibility manager',
|
||||
// manager: true,
|
||||
tick_to_hide: true,
|
||||
// headers_table: true,
|
||||
// container_target_id: 'test_cont',
|
||||
// headers_text: ['1','2','3','4','5','6'],
|
||||
// btn_target_id: 'test_cont',
|
||||
// btn_text: 'Hola',
|
||||
// btn_html: '<button>Columns</button>',
|
||||
// btn_css_class: 'test',
|
||||
// btn_close_text: 'jj',
|
||||
// btn_close_html: '<button>close</button>',
|
||||
// btn_close_css_class: 'test',
|
||||
// stylesheet: 'hola.css',
|
||||
// cont_css_class: 'test',
|
||||
// checklist_item_css_class: 'test',
|
||||
// at_start: [0,1,2,3,4],
|
||||
// enable_hover: true,
|
||||
enable_tick_all: true
|
||||
// ,
|
||||
// tick_all_text: 'Hola',
|
||||
// text: 'tutu',
|
||||
// on_loaded: function(){ console.log(arguments); },
|
||||
// on_before_open: function(){ console.log('on_before_open', arguments); },
|
||||
// on_after_open: function(){ console.log('on_after_open',arguments); },
|
||||
// on_before_close: function(){ console.log('on_before_close',arguments); },
|
||||
// on_after_close: function(){ console.log('on_after_close',arguments); },
|
||||
// on_before_col_hidden: function(){ console.log('on_before_col_hidden',arguments); },
|
||||
// on_after_col_hidden: function(){ console.log('on_after_col_hidden',arguments); },
|
||||
// on_before_col_displayed: function(){ console.log('on_before_col_displayed',arguments); },
|
||||
// on_after_col_displayed: function(){ console.log('on_after_col_displayed',arguments); }
|
||||
}]
|
||||
});
|
||||
|
||||
tf.init();
|
||||
</script>
|
||||
<button onclick="javascript:tf.ExtRegistry.colsVisibility.toggleCol(2);">Toggle col 2</button>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>HTML Table Filter Generator</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../dist/tablefilter/style/tablefilter.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="test"></div>
|
||||
<table id="demo" cellpadding="0" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>From</th>
|
||||
<th>Destination</th>
|
||||
<th>Road Distance (km)</th>
|
||||
<th>By Air (hrs)</th>
|
||||
<th>By Rail (hrs)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Tot:</td>
|
||||
<td></td>
|
||||
<td id="sum1"></td>
|
||||
<td id="sum2"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Adelaide</td>
|
||||
<td>1412</td>
|
||||
<td>1.4</td>
|
||||
<td>25.3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Brisbane</td>
|
||||
<td>982</td>
|
||||
<td>1.5</td>
|
||||
<td>16</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Canberra</td>
|
||||
<td>286</td>
|
||||
<td>.6</td>
|
||||
<td>4.3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Melbourne</td>
|
||||
<td>872</td>
|
||||
<td>1.1</td>
|
||||
<td>10.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Perth</td>
|
||||
<td>2781</td>
|
||||
<td>3.1</td>
|
||||
<td>38</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Alice Springs</td>
|
||||
<td>1533</td>
|
||||
<td>2</td>
|
||||
<td>20.25</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Brisbane</td>
|
||||
<td>2045</td>
|
||||
<td>2.15</td>
|
||||
<td>40</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div>
|
||||
<button onclick="tf.ExtRegistry.advancedGrid.destroy();">Remove ezEditTable</button>
|
||||
<button onclick="tf.ExtRegistry.advancedGrid.reset();">Reset ezEditTable</button>
|
||||
|
||||
<button onclick="tf.destroy();">Remove</button>
|
||||
<button onclick="tf.init();">Reset</button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../dist/tablefilter/tablefilter.js"></script>
|
||||
<script>
|
||||
var table = document.getElementById('demo');
|
||||
var totRowIndex = table.getElementsByTagName("tr").length;
|
||||
|
||||
var tf = new TableFilter("demo", {
|
||||
col_0: 'select',
|
||||
col_2: 'checklist',
|
||||
col_3: 'select',
|
||||
base_path: '../../dist/tablefilter/',
|
||||
// fill_slc_on_demand: true,
|
||||
rows_counter: true,
|
||||
// enable_default_theme: true,
|
||||
// help_instructions: false,
|
||||
mark_active_columns: true,
|
||||
auto_filter: false,
|
||||
auto_filter_delay: 200,
|
||||
loader: true,
|
||||
// enter_key: false,
|
||||
// themes: [{ name: 'skyblue'}],
|
||||
// popup_filters: true,
|
||||
paging: true,
|
||||
paging_length: 3,
|
||||
alternate_rows: true,
|
||||
highlight_keywords: true,
|
||||
match_case: false,
|
||||
remember_grid_values: true,
|
||||
col_widths: ['150px','150px','150px','200px','150px'],
|
||||
btn_reset: true,
|
||||
grid_layout: false,
|
||||
rows_always_visible: [totRowIndex],
|
||||
custom_options: {
|
||||
cols: [3],
|
||||
texts: [['0-0.5', '0.5-1', '1-2', '>2']],
|
||||
values: [['>0 && <=0.5', '>0.5 && <=1', '>1 && <=2', '>2']],
|
||||
sorts: [false]
|
||||
},
|
||||
// col_operation: {
|
||||
// id: ["sum1", "sum2"],
|
||||
// col: [2, 3],
|
||||
// operation: ["sum", "mean"],
|
||||
// write_method: ["innerhtml", 'innerhtml'],
|
||||
// exclude_row: [totRowIndex],
|
||||
// decimal_precision: [0, 2],
|
||||
// tot_row_index: [totRowIndex, totRowIndex]
|
||||
// },
|
||||
// selectable: true,
|
||||
// editable: true,
|
||||
// ezEditTable_config: {
|
||||
// path: '../libs/ezEditTable/ezEditTable.js',
|
||||
// default_selection: 'both',
|
||||
// auto_save: false
|
||||
// },
|
||||
extensions: [
|
||||
{
|
||||
name: 'sort',
|
||||
types: ['string', 'string', 'number', 'number', 'number']
|
||||
},{
|
||||
name: 'advancedGrid',
|
||||
// vendor_path: '../../libs/ezEditTable/',
|
||||
filename: 'ezEditTable_min.js',
|
||||
vendor_path: 'http://edittable.free.fr/ezEditTable/',
|
||||
selectable: true,
|
||||
editable: true,
|
||||
default_selection: 'both',
|
||||
// load_stylesheet: true,
|
||||
auto_save: false
|
||||
},{
|
||||
name: 'colOps',
|
||||
id: ["sum1", "sum2"],
|
||||
col: [2, 3],
|
||||
operation: ["sum", "mean"],
|
||||
write_method: ["innerhtml", 'innerhtml'],
|
||||
exclude_row: [totRowIndex],
|
||||
decimal_precision: [0, 2],
|
||||
tot_row_index: [totRowIndex, totRowIndex]
|
||||
},{
|
||||
name: 'filtersVisibility',
|
||||
// enable_icon: true,
|
||||
// target_id: 'test',
|
||||
visible_at_start: false
|
||||
// ,
|
||||
// btn_text: 'Filters',
|
||||
// filters_row_index: 0
|
||||
}, {
|
||||
/*** Columns Visibility Manager extension load ***/
|
||||
name: 'colsVisibility',
|
||||
description: 'Columns visibility manager',
|
||||
// manager: true,
|
||||
tick_to_hide: true,
|
||||
// headers_table: true,
|
||||
// container_target_id: 'test_cont',
|
||||
// headers_text: ['1','2','3','4','5','6'],
|
||||
// btn_target_id: 'test_cont',
|
||||
// btn_text: 'Hola',
|
||||
// btn_html: '<button>Columns</button>',
|
||||
// btn_css_class: 'test',
|
||||
// btn_close_text: 'jj',
|
||||
// btn_close_html: '<button>close</button>',
|
||||
// btn_close_css_class: 'test',
|
||||
// stylesheet: 'hola.css',
|
||||
// cont_css_class: 'test',
|
||||
// checklist_item_css_class: 'test',
|
||||
// at_start: [0,1,2,3,4],
|
||||
// enable_hover: true,
|
||||
enable_tick_all: true
|
||||
// ,
|
||||
// tick_all_text: 'Hola',
|
||||
// text: 'tutu',
|
||||
// on_loaded: function(){ console.log(arguments); },
|
||||
// on_before_open: function(){ console.log('on_before_open', arguments); },
|
||||
// on_after_open: function(){ console.log('on_after_open',arguments); },
|
||||
// on_before_close: function(){ console.log('on_before_close',arguments); },
|
||||
// on_after_close: function(){ console.log('on_after_close',arguments); },
|
||||
// on_before_col_hidden: function(){ console.log('on_before_col_hidden',arguments); },
|
||||
// on_after_col_hidden: function(){ console.log('on_after_col_hidden',arguments); },
|
||||
// on_before_col_displayed: function(){ console.log('on_before_col_displayed',arguments); },
|
||||
// on_after_col_displayed: function(){ console.log('on_after_col_displayed',arguments); }
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
tf.init();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,179 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>HTML Table Filter Generator</title>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 500px;">
|
||||
<table id="demo" cellpadding="0" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>From</th>
|
||||
<th>Destination</th>
|
||||
<th>Road Distance (km)</th>
|
||||
<th>By Air (hrs)</th>
|
||||
<th>By Rail (hrs)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- <tfoot>
|
||||
<tr>
|
||||
<td>Tot:</td>
|
||||
<td></td>
|
||||
<td id="sum1"></td>
|
||||
<td id="sum2"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot> -->
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Adelaide</td>
|
||||
<td>1412</td>
|
||||
<td>1.4</td>
|
||||
<td>25.3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Brisbane</td>
|
||||
<td>982</td>
|
||||
<td>1.5</td>
|
||||
<td>16</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Canberra</td>
|
||||
<td>286</td>
|
||||
<td>.6</td>
|
||||
<td>4.3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Melbourne</td>
|
||||
<td>872</td>
|
||||
<td>1.1</td>
|
||||
<td>10.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Perth</td>
|
||||
<td>2781</td>
|
||||
<td>3.1</td>
|
||||
<td>38</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Alice Springs</td>
|
||||
<td>1533</td>
|
||||
<td>2</td>
|
||||
<td>20.25</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Brisbane</td>
|
||||
<td>2045</td>
|
||||
<td>2.15</td>
|
||||
<td>40</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../dist/tablefilter/tablefilter.js"></script>
|
||||
<script>
|
||||
// var table = document.getElementById('demo');
|
||||
// var totRowIndex = table.getElementsByTagName("tr").length;
|
||||
|
||||
var tf = new TableFilter("demo", {
|
||||
col_0: 'select',
|
||||
col_2: 'multiple',
|
||||
col_3: 'checklist',
|
||||
base_path: '../dist/',
|
||||
loader: true,
|
||||
rows_counter: true,
|
||||
enable_default_theme: true,
|
||||
// slc_filling_method: 'innerhtml',
|
||||
sort: true,
|
||||
sort_config: {
|
||||
sort_types: ['string','string','number','number','number']
|
||||
},
|
||||
paging: false,
|
||||
paging_length: 4,
|
||||
// page_selector_type: 'input',
|
||||
results_per_page: ['Results per page', [2,4,6]],
|
||||
remember_grid_values: true,
|
||||
// remember_page_number: true,
|
||||
// remember_page_length: true,
|
||||
fill_slc_on_demand: false,
|
||||
linked_filters: false,
|
||||
popup_filters: false,
|
||||
alternate_rows: true,
|
||||
highlight_keywords: true,
|
||||
match_case: false,
|
||||
btn_reset: true,
|
||||
status_bar: true,
|
||||
watermark: [null, 'Filter column...', null, null, 'Helo'],
|
||||
selectable: false,
|
||||
editable: false,
|
||||
ezEditTable_config:{
|
||||
default_selection: 'both',
|
||||
loadStylesheet: true
|
||||
},
|
||||
grid_layout: true,
|
||||
grid_width: '600px',
|
||||
// grid_height: '200px',
|
||||
on_before_show_msg: function(tf){
|
||||
// console.log('on_before_show_msg');
|
||||
},
|
||||
|
||||
// rows_always_visible: [totRowIndex],
|
||||
// col_operation: {
|
||||
// id: ["sum1", "sum2"],
|
||||
// col: [2, 3],
|
||||
// operation: ["sum", "mean"],
|
||||
// write_method: ["innerhtml", 'innerhtml'],
|
||||
// exclude_row: [totRowIndex],
|
||||
// decimal_precision: [0, 2],
|
||||
// tot_row_index: [totRowIndex, totRowIndex]
|
||||
// },
|
||||
extensions: [{
|
||||
/*** Columns Visibility Manager extension load ***/
|
||||
name: 'colsVisibility',
|
||||
description: 'Columns visibility manager',
|
||||
// manager: true,
|
||||
tick_to_hide: true,
|
||||
// headers_table: true,
|
||||
// container_target_id: 'test_cont',
|
||||
// headers_text: ['1','2','3','4','5','6'],
|
||||
// btn_target_id: 'test_cont',
|
||||
// btn_text: 'Hola',
|
||||
// btn_html: '<button>Columns</button>',
|
||||
// btn_css_class: 'test',
|
||||
// btn_close_text: 'jj',
|
||||
// btn_close_html: '<button>close</button>',
|
||||
// btn_close_css_class: 'test',
|
||||
// stylesheet: 'hola.css',
|
||||
// cont_css_class: 'test',
|
||||
// checklist_item_css_class: 'test',
|
||||
// at_start: [0,1,2,3,4],
|
||||
// enable_hover: true,
|
||||
enable_tick_all: true
|
||||
// ,
|
||||
// tick_all_text: 'Hola',
|
||||
// text: 'tutu',
|
||||
// on_loaded: function(){ console.log(arguments); },
|
||||
// on_before_open: function(){ console.log('on_before_open', arguments); },
|
||||
// on_after_open: function(){ console.log('on_after_open',arguments); },
|
||||
// on_before_close: function(){ console.log('on_before_close',arguments); },
|
||||
// on_after_close: function(){ console.log('on_after_close',arguments); },
|
||||
// on_before_col_hidden: function(){ console.log('on_before_col_hidden',arguments); },
|
||||
// on_after_col_hidden: function(){ console.log('on_after_col_hidden',arguments); },
|
||||
// on_before_col_displayed: function(){ console.log('on_before_col_displayed',arguments); },
|
||||
// on_after_col_displayed: function(){ console.log('on_after_col_displayed',arguments); }
|
||||
}]
|
||||
});
|
||||
|
||||
tf.init();
|
||||
</script>
|
||||
<button onclick="javascript:tf.ExtRegistry.colsVisibility.toggleCol(2);">Toggle col 2</button>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,152 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>HTML Table Filter Generator</title>
|
||||
</head>
|
||||
<body>
|
||||
<table id="demo" cellpadding="0" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>From</th>
|
||||
<th>Destination</th>
|
||||
<th>Road Distance (km)</th>
|
||||
<th>By Air (hrs)</th>
|
||||
<th width="15%">By Rail (hrs)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Tot:</td>
|
||||
<td></td>
|
||||
<td id="sum1"></td>
|
||||
<td id="sum2"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Adelaide</td>
|
||||
<td>1412</td>
|
||||
<td>1.4</td>
|
||||
<td>25.3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Brisbane</td>
|
||||
<td>982</td>
|
||||
<td>1.5</td>
|
||||
<td>16</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Canberra</td>
|
||||
<td>286</td>
|
||||
<td>.6</td>
|
||||
<td>4.3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sydney</strong></td>
|
||||
<td>Melbourne</td>
|
||||
<td>872</td>
|
||||
<td>1.1</td>
|
||||
<td>10.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Perth</td>
|
||||
<td>2781</td>
|
||||
<td>3.1</td>
|
||||
<td>38</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Alice Springs</td>
|
||||
<td>1533</td>
|
||||
<td>2</td>
|
||||
<td>20.25</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Adelaide</strong></td>
|
||||
<td>Brisbane</td>
|
||||
<td>2045</td>
|
||||
<td>2.15</td>
|
||||
<td>40</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script type="text/javascript" src="../dist/tablefilter/tablefilter.js"></script>
|
||||
<script>
|
||||
var table = document.getElementById('demo');
|
||||
var totRowIndex = table.getElementsByTagName("tr").length;
|
||||
|
||||
var tf = new TableFilter("demo", {
|
||||
col_0: 'select',
|
||||
col_3: 'checklist',
|
||||
base_path: '../dist/tablefilter/',
|
||||
rows_counter: true,
|
||||
// enable_default_theme: true,
|
||||
themes: [{ path: '../dist/tablefilter/themes/mytheme/mytheme.css' }],
|
||||
paging: false,
|
||||
alternate_rows: true,
|
||||
highlight_keywords: true,
|
||||
match_case: false,
|
||||
remember_grid_values: true,
|
||||
btn_reset: true,
|
||||
grid_layout: true,
|
||||
sort: true,
|
||||
sort_config: {
|
||||
sort_types: ['string','string','number','number','number']
|
||||
},
|
||||
|
||||
rows_always_visible: [totRowIndex],
|
||||
col_operation: {
|
||||
id: ["sum1", "sum2"],
|
||||
col: [2, 3],
|
||||
operation: ["sum", "mean"],
|
||||
write_method: ["innerhtml", 'innerhtml'],
|
||||
exclude_row: [totRowIndex],
|
||||
decimal_precision: [0, 2],
|
||||
tot_row_index: [totRowIndex, totRowIndex]
|
||||
}/*,
|
||||
extensions: [{
|
||||
name: 'colsVisibility',
|
||||
description: 'Columns visibility manager',
|
||||
// manager: true,
|
||||
tick_to_hide: true,
|
||||
// headers_table: true,
|
||||
// container_target_id: 'test_cont',
|
||||
// headers_text: ['1','2','3','4','5','6'],
|
||||
// btn_target_id: 'test_cont',
|
||||
// btn_text: 'Hola',
|
||||
// btn_html: '<button>Columns</button>',
|
||||
// btn_css_class: 'test',
|
||||
// btn_close_text: 'jj',
|
||||
// btn_close_html: '<button>close</button>',
|
||||
// btn_close_css_class: 'test',
|
||||
// stylesheet: 'hola.css',
|
||||
// cont_css_class: 'test',
|
||||
// checklist_item_css_class: 'test',
|
||||
// at_start: [0,1,2,3,4],
|
||||
// enable_hover: true,
|
||||
enable_tick_all: true
|
||||
// ,
|
||||
// tick_all_text: 'Hola',
|
||||
// text: 'tutu',
|
||||
// on_loaded: function(){ console.log(arguments); },
|
||||
// on_before_open: function(){ console.log('on_before_open', arguments); },
|
||||
// on_after_open: function(){ console.log('on_after_open',arguments); },
|
||||
// on_before_close: function(){ console.log('on_before_close',arguments); },
|
||||
// on_after_close: function(){ console.log('on_after_close',arguments); },
|
||||
// on_before_col_hidden: function(){ console.log('on_before_col_hidden',arguments); },
|
||||
// on_after_col_hidden: function(){ console.log('on_after_col_hidden',arguments); },
|
||||
// on_before_col_displayed: function(){ console.log('on_before_col_displayed',arguments); },
|
||||
// on_after_col_displayed: function(){ console.log('on_after_col_displayed',arguments); }
|
||||
}]*/
|
||||
});
|
||||
|
||||
tf.init();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -283,7 +283,7 @@ div.grd_Cont .odd{ background-color:#DFE8F6; }/*row bg alternating color*/
|
|||
|
||||
/* Selection */
|
||||
.ezActiveRow{ background-color:#2852A8 !important; color:#fff; }
|
||||
.ezSelectedRow{ background-color:#316AC5; color:#fff; }
|
||||
.ezSelectedRow{ background-color:#316AC5 !important; color:#fff; }
|
||||
.ezActiveCell{
|
||||
background-color:#D9E8FB !important;
|
||||
color:#000 !important; font-weight:bold;
|
||||
|
|
|
|||
|
|
@ -198,10 +198,7 @@ webpackJsonp([1],[
|
|||
}
|
||||
|
||||
cfg.base_path = cfg.base_path || tf.basePath + 'ezEditTable/';
|
||||
// var editable = tf.editable;
|
||||
var editable = cfg.editable;
|
||||
// cfg.editable = editable;
|
||||
// var selectable = tf.selectable;
|
||||
var selectable = cfg.selectable;
|
||||
cfg.selection = selectable;
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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; }
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
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; }
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 875 B |
Binary file not shown.
|
Before Width: | Height: | Size: 398 B |
Binary file not shown.
|
Before Width: | Height: | Size: 655 B |
Binary file not shown.
|
Before Width: | Height: | Size: 330 B |
Binary file not shown.
|
Before Width: | Height: | Size: 342 B |
Binary file not shown.
|
Before Width: | Height: | Size: 375 B |
Binary file not shown.
|
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; }
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 554 B |
|
|
@ -65,10 +65,7 @@ export default class AdapterEzEditTable {
|
|||
}
|
||||
|
||||
cfg.base_path = cfg.base_path || tf.basePath + 'ezEditTable/';
|
||||
// var editable = tf.editable;
|
||||
var editable = cfg.editable;
|
||||
// cfg.editable = editable;
|
||||
// var selectable = tf.selectable;
|
||||
var selectable = cfg.selectable;
|
||||
cfg.selection = selectable;
|
||||
|
||||
|
|
|
|||
|
|
@ -283,7 +283,7 @@ div.grd_Cont .odd{ background-color:#DFE8F6; }/*row bg alternating color*/
|
|||
|
||||
/* Selection */
|
||||
.ezActiveRow{ background-color:#2852A8 !important; color:#fff; }
|
||||
.ezSelectedRow{ background-color:#316AC5; color:#fff; }
|
||||
.ezSelectedRow{ background-color:#316AC5 !important; color:#fff; }
|
||||
.ezActiveCell{
|
||||
background-color:#D9E8FB !important;
|
||||
color:#000 !important; font-weight:bold;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{NAME} v{VERSION} - Selection Grid Demo</title>
|
||||
<!-- @import partials/style.html -->
|
||||
</head>
|
||||
<body>
|
||||
<h1>{NAME} v{VERSION}</h1>
|
||||
<h2>Selection grid demo</h2>
|
||||
|
||||
<p>
|
||||
To make the grid rows selectable, you need to import the
|
||||
{EZEDITTABLE_LINK} plugin, enable the <code>selectable</code> property
|
||||
and configure the <code>advancedGrid</code> with the {EZEDITTABLE_LINK}
|
||||
options.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Instructions: Double-click on a row on or press <code>enter</code> key to
|
||||
perform action. Enable multiple rows selection by checking the <b>Multiple
|
||||
selection</b> checkbox. Keep <code>Ctrl/Cmd</code> or <code>Shift</code> key
|
||||
pressed to select multiple rows.
|
||||
</p>
|
||||
<!-- @import partials/pre.html -->
|
||||
|
||||
<div class="ezCommandEditor">
|
||||
<input onclick="var ezEditTable = tf.extension('advancedGrid')._ezEditTable;
|
||||
if(this.checked){
|
||||
ezEditTable.selectionModel = 'multiple';
|
||||
} else {
|
||||
ezEditTable.selectionModel = 'single';
|
||||
}" name="chkMultipleSlc" id="chkMultipleSlc" type="checkbox">
|
||||
<label for="chkMultipleSlc">Multiple selection</label>
|
||||
</div>
|
||||
<!-- @import partials/countries-table.html -->
|
||||
<div class="ezCommandEditor">
|
||||
<button onclick="alert( tf.extension('advancedGrid')._ezEditTable.Selection.GetActiveRowValues() );">Active row data</button>
|
||||
<button onclick="alert( tf.extension('advancedGrid')._ezEditTable.Selection.GetSelectedValues() );">Selected rows data</button>
|
||||
<button onclick="tf.extension('advancedGrid')._ezEditTable.Selection.ClearSelections();">Clear Selection</button>
|
||||
</div>
|
||||
|
||||
<!-- @import partials/tablefilter-script.html -->
|
||||
<script data-config>
|
||||
var filtersConfig = {
|
||||
base_path: '../dist/tablefilter/',
|
||||
grid_layout: true,
|
||||
alternate_rows: true,
|
||||
btn_reset: true,
|
||||
rows_counter: true,
|
||||
loader: true,
|
||||
status_bar: true,
|
||||
col_1: 'select',
|
||||
col_2: 'select',
|
||||
col_widths: [
|
||||
"150px", "70px", "70px",
|
||||
"120px", "120px", "100px",
|
||||
"100px", "100px", "100px"
|
||||
],
|
||||
extensions:[
|
||||
{
|
||||
name: 'advancedGrid',
|
||||
// For the purpose of this demo, ezEditTable dependency
|
||||
// is loaded from its own website which is not a CDN.
|
||||
// This dependency also requires a licence therefore
|
||||
// DO NOT import it in this way in your projects.
|
||||
filename: 'ezEditTable_min.js',
|
||||
vendor_path: 'http://edittable.free.fr/ezEditTable/',
|
||||
// Once ezEditTable dependency is installed in your
|
||||
// project import it by pointing to a local path:
|
||||
// vendor_path: 'path/to/ezEditTable'
|
||||
selectable: true,
|
||||
default_selection: 'both',
|
||||
on_validate_row: function(o, row){
|
||||
var country = o.Selection.GetActiveRowValues()[0];
|
||||
alert('You have chosen record: '+ country +
|
||||
' country data');
|
||||
}
|
||||
}, {
|
||||
name: 'sort',
|
||||
types: [
|
||||
'string', 'string', 'number',
|
||||
'number', 'number', 'number',
|
||||
'number', 'number', 'number'
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var tf = new TableFilter('demo', filtersConfig);
|
||||
tf.init();
|
||||
</script>
|
||||
<!-- @import partials/pre-inline-script.html -->
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue