Merge pull request #9 from koalyptus/add-selection-grid-demo
Add selection grid demo
10
Gruntfile.js
|
@ -79,6 +79,16 @@ module.exports = function (grunt) {
|
||||||
},{
|
},{
|
||||||
pattern: /{VERSION}/ig,
|
pattern: /{VERSION}/ig,
|
||||||
replacement: pkg.version
|
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,
|
pattern: /<!-- @import (.*?) -->/ig,
|
||||||
replacement: function (match, p1) {
|
replacement: function (match, p1) {
|
||||||
|
|
|
@ -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>
|
|
513
demos/starter.html
Normal file
|
@ -0,0 +1,513 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>TableFilter v0.0.0 - Starter</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>TableFilter v0.0.0</h1>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<table id="demo">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>country</th>
|
||||||
|
<th>isocode</th>
|
||||||
|
<th align="right">year</th>
|
||||||
|
<th align="right">POP</th>
|
||||||
|
<th align="right">XRAT</th>
|
||||||
|
<th align="right">PPP</th>
|
||||||
|
<th align="right">cgdp</th>
|
||||||
|
<th align="right">cc</th>
|
||||||
|
<th align="right">ci</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Benin</td>
|
||||||
|
<td>BEN</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">5950.33</td>
|
||||||
|
<td align="right">589.9517822</td>
|
||||||
|
<td align="right">190.95</td>
|
||||||
|
<td align="right">1178.46</td>
|
||||||
|
<td align="right">90.98</td>
|
||||||
|
<td align="right">7.55</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Benin</td>
|
||||||
|
<td>BEN</td>
|
||||||
|
<td align="right">1999</td>
|
||||||
|
<td align="right">6109.53</td>
|
||||||
|
<td align="right">615.6990967</td>
|
||||||
|
<td align="right">200.19</td>
|
||||||
|
<td align="right">1174.90</td>
|
||||||
|
<td align="right">92.61</td>
|
||||||
|
<td align="right">7.86</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Benin</td>
|
||||||
|
<td>BEN</td>
|
||||||
|
<td align="right">2000</td>
|
||||||
|
<td align="right">6272.00</td>
|
||||||
|
<td align="right">711.9763184</td>
|
||||||
|
<td align="right">200.61</td>
|
||||||
|
<td align="right">1224.74</td>
|
||||||
|
<td align="right">92.27</td>
|
||||||
|
<td align="right">8.25</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Burkina Faso</td>
|
||||||
|
<td>BFA</td>
|
||||||
|
<td align="right">1994</td>
|
||||||
|
<td align="right">9755.03</td>
|
||||||
|
<td align="right">555.2047119</td>
|
||||||
|
<td align="right">125.76</td>
|
||||||
|
<td align="right">838.76</td>
|
||||||
|
<td align="right">79.81</td>
|
||||||
|
<td align="right">6.57</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Burkina Faso</td>
|
||||||
|
<td>BFA</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">9988.00</td>
|
||||||
|
<td align="right">499.148407</td>
|
||||||
|
<td align="right">136.65</td>
|
||||||
|
<td align="right">860.89</td>
|
||||||
|
<td align="right">80.41</td>
|
||||||
|
<td align="right">9.29</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Burkina Faso</td>
|
||||||
|
<td>BFA</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">10225.00</td>
|
||||||
|
<td align="right">511.5523987</td>
|
||||||
|
<td align="right">144.18</td>
|
||||||
|
<td align="right">881.11</td>
|
||||||
|
<td align="right">80.40</td>
|
||||||
|
<td align="right">12.12</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Burkina Faso</td>
|
||||||
|
<td>BFA</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">10473.53</td>
|
||||||
|
<td align="right">583.6693726</td>
|
||||||
|
<td align="right">141.78</td>
|
||||||
|
<td align="right">899.01</td>
|
||||||
|
<td align="right">76.94</td>
|
||||||
|
<td align="right">14.94</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Russia</td>
|
||||||
|
<td>RUS</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">146899.01</td>
|
||||||
|
<td align="right">9.705082893</td>
|
||||||
|
<td align="right">2.64</td>
|
||||||
|
<td align="right">7086.39</td>
|
||||||
|
<td align="right">67.73</td>
|
||||||
|
<td align="right">9.20</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Russia</td>
|
||||||
|
<td>RUS</td>
|
||||||
|
<td align="right">1999</td>
|
||||||
|
<td align="right">146308.99</td>
|
||||||
|
<td align="right">24.6199398</td>
|
||||||
|
<td align="right">4.03</td>
|
||||||
|
<td align="right">8074.70</td>
|
||||||
|
<td align="right">57.35</td>
|
||||||
|
<td align="right">8.81</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Russia</td>
|
||||||
|
<td>RUS</td>
|
||||||
|
<td align="right">2000</td>
|
||||||
|
<td align="right">145555.01</td>
|
||||||
|
<td align="right">28.12916946</td>
|
||||||
|
<td align="right">4.85</td>
|
||||||
|
<td align="right">9995.91</td>
|
||||||
|
<td align="right">54.74</td>
|
||||||
|
<td align="right">8.79</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rwanda</td>
|
||||||
|
<td>RWA</td>
|
||||||
|
<td align="right">1994</td>
|
||||||
|
<td align="right">6230.00</td>
|
||||||
|
<td align="right">194.517</td>
|
||||||
|
<td align="right">50.39</td>
|
||||||
|
<td align="right">529.48</td>
|
||||||
|
<td align="right">132.16</td>
|
||||||
|
<td align="right">4.48</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rwanda</td>
|
||||||
|
<td>RWA</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">6400.00</td>
|
||||||
|
<td align="right">262.1975098</td>
|
||||||
|
<td align="right">70.67</td>
|
||||||
|
<td align="right">746.34</td>
|
||||||
|
<td align="right">92.77</td>
|
||||||
|
<td align="right">3.08</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rwanda</td>
|
||||||
|
<td>RWA</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">6727.00</td>
|
||||||
|
<td align="right">306.8200073</td>
|
||||||
|
<td align="right">77.90</td>
|
||||||
|
<td align="right">823.25</td>
|
||||||
|
<td align="right">89.71</td>
|
||||||
|
<td align="right">3.21</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rwanda</td>
|
||||||
|
<td>RWA</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">7895.18</td>
|
||||||
|
<td align="right">301.5297852</td>
|
||||||
|
<td align="right">84.13</td>
|
||||||
|
<td align="right">847.79</td>
|
||||||
|
<td align="right">91.44</td>
|
||||||
|
<td align="right">3.72</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rwanda</td>
|
||||||
|
<td>RWA</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">8105.00</td>
|
||||||
|
<td align="right">312.3140869</td>
|
||||||
|
<td align="right">85.32</td>
|
||||||
|
<td align="right">914.22</td>
|
||||||
|
<td align="right">89.34</td>
|
||||||
|
<td align="right">4.22</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>El Salvador</td>
|
||||||
|
<td>SLV</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">5669.00</td>
|
||||||
|
<td align="right">8.754583359</td>
|
||||||
|
<td align="right">3.54</td>
|
||||||
|
<td align="right">4143.59</td>
|
||||||
|
<td align="right">89.31</td>
|
||||||
|
<td align="right">10.35</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>El Salvador</td>
|
||||||
|
<td>SLV</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">5798.00</td>
|
||||||
|
<td align="right">8.755000114</td>
|
||||||
|
<td align="right">3.69</td>
|
||||||
|
<td align="right">4235.79</td>
|
||||||
|
<td align="right">88.77</td>
|
||||||
|
<td align="right">7.79</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>El Salvador</td>
|
||||||
|
<td>SLV</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">5911.00</td>
|
||||||
|
<td align="right">8.756250381</td>
|
||||||
|
<td align="right">3.74</td>
|
||||||
|
<td align="right">4408.41</td>
|
||||||
|
<td align="right">87.05</td>
|
||||||
|
<td align="right">7.90</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovak Republic</td>
|
||||||
|
<td>SVK</td>
|
||||||
|
<td align="right">2000</td>
|
||||||
|
<td align="right">5401.00</td>
|
||||||
|
<td align="right">46.0352</td>
|
||||||
|
<td align="right">13.02</td>
|
||||||
|
<td align="right">12618.53</td>
|
||||||
|
<td align="right">52.22</td>
|
||||||
|
<td align="right">24.78</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovenia</td>
|
||||||
|
<td>SVN</td>
|
||||||
|
<td align="right">1994</td>
|
||||||
|
<td align="right">1988.90</td>
|
||||||
|
<td align="right">128.8085938</td>
|
||||||
|
<td align="right">79.97</td>
|
||||||
|
<td align="right">11662.12</td>
|
||||||
|
<td align="right">53.21</td>
|
||||||
|
<td align="right">19.87</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovenia</td>
|
||||||
|
<td>SVN</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">1990.00</td>
|
||||||
|
<td align="right">118.5185013</td>
|
||||||
|
<td align="right">89.03</td>
|
||||||
|
<td align="right">12574.96</td>
|
||||||
|
<td align="right">54.46</td>
|
||||||
|
<td align="right">23.11</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovenia</td>
|
||||||
|
<td>SVN</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">1991.00</td>
|
||||||
|
<td align="right">135.3643036</td>
|
||||||
|
<td align="right">97.27</td>
|
||||||
|
<td align="right">13151.51</td>
|
||||||
|
<td align="right">54.32</td>
|
||||||
|
<td align="right">23.23</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovenia</td>
|
||||||
|
<td>SVN</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">1985.96</td>
|
||||||
|
<td align="right">159.6882935</td>
|
||||||
|
<td align="right">103.96</td>
|
||||||
|
<td align="right">14143.02</td>
|
||||||
|
<td align="right">53.24</td>
|
||||||
|
<td align="right">24.14</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovenia</td>
|
||||||
|
<td>SVN</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">1982.60</td>
|
||||||
|
<td align="right">166.134201</td>
|
||||||
|
<td align="right">108.93</td>
|
||||||
|
<td align="right">15067.34</td>
|
||||||
|
<td align="right">52.82</td>
|
||||||
|
<td align="right">25.35</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1994</td>
|
||||||
|
<td align="right">8740.72</td>
|
||||||
|
<td align="right">669.3706055</td>
|
||||||
|
<td align="right">307.48</td>
|
||||||
|
<td align="right">834.19</td>
|
||||||
|
<td align="right">75.43</td>
|
||||||
|
<td align="right">9.86</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">8980.00</td>
|
||||||
|
<td align="right">864.1192017</td>
|
||||||
|
<td align="right">402.40</td>
|
||||||
|
<td align="right">829.37</td>
|
||||||
|
<td align="right">76.55</td>
|
||||||
|
<td align="right">10.31</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">9214.40</td>
|
||||||
|
<td align="right">1207.900024</td>
|
||||||
|
<td align="right">515.01</td>
|
||||||
|
<td align="right">838.05</td>
|
||||||
|
<td align="right">78.74</td>
|
||||||
|
<td align="right">10.99</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">9443.21</td>
|
||||||
|
<td align="right">1314.498047</td>
|
||||||
|
<td align="right">596.97</td>
|
||||||
|
<td align="right">851.47</td>
|
||||||
|
<td align="right">77.59</td>
|
||||||
|
<td align="right">12.15</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">9665.71</td>
|
||||||
|
<td align="right">1862.06897</td>
|
||||||
|
<td align="right">744.91</td>
|
||||||
|
<td align="right">800.69</td>
|
||||||
|
<td align="right">85.12</td>
|
||||||
|
<td align="right">13.75</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1999</td>
|
||||||
|
<td align="right">9881.21</td>
|
||||||
|
<td align="right">2388.019043</td>
|
||||||
|
<td align="right">941.87</td>
|
||||||
|
<td align="right">765.24</td>
|
||||||
|
<td align="right">91.82</td>
|
||||||
|
<td align="right">15.30</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">2000</td>
|
||||||
|
<td align="right">10089.00</td>
|
||||||
|
<td align="right">3110.843994</td>
|
||||||
|
<td align="right">1157.63</td>
|
||||||
|
<td align="right">840.97</td>
|
||||||
|
<td align="right">86.33</td>
|
||||||
|
<td align="right">15.38</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1994</td>
|
||||||
|
<td align="right">10775.35</td>
|
||||||
|
<td align="right">8.151538849</td>
|
||||||
|
<td align="right">2.01</td>
|
||||||
|
<td align="right">2586.84</td>
|
||||||
|
<td align="right">60.10</td>
|
||||||
|
<td align="right">18.53</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">11011.00</td>
|
||||||
|
<td align="right">8.66537571</td>
|
||||||
|
<td align="right">2.15</td>
|
||||||
|
<td align="right">2603.37</td>
|
||||||
|
<td align="right">66.89</td>
|
||||||
|
<td align="right">15.03</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">11242.16</td>
|
||||||
|
<td align="right">10.00234985</td>
|
||||||
|
<td align="right">2.64</td>
|
||||||
|
<td align="right">2860.23</td>
|
||||||
|
<td align="right">72.06</td>
|
||||||
|
<td align="right">11.32</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">11923.52</td>
|
||||||
|
<td align="right">12.11128998</td>
|
||||||
|
<td align="right">3.17</td>
|
||||||
|
<td align="right">2727.06</td>
|
||||||
|
<td align="right">82.82</td>
|
||||||
|
<td align="right">11.01</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">12153.85</td>
|
||||||
|
<td align="right">23.67910957</td>
|
||||||
|
<td align="right">4.06</td>
|
||||||
|
<td align="right">2799.85</td>
|
||||||
|
<td align="right">77.66</td>
|
||||||
|
<td align="right">10.75</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1999</td>
|
||||||
|
<td align="right">12388.32</td>
|
||||||
|
<td align="right">38.30120087</td>
|
||||||
|
<td align="right">6.12</td>
|
||||||
|
<td align="right">2770.48</td>
|
||||||
|
<td align="right">76.89</td>
|
||||||
|
<td align="right">10.73</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">2000</td>
|
||||||
|
<td align="right">12627.00</td>
|
||||||
|
<td align="right">44.41791916</td>
|
||||||
|
<td align="right">9.48</td>
|
||||||
|
<td align="right">2607.03</td>
|
||||||
|
<td align="right">69.23</td>
|
||||||
|
<td align="right">8.62</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="tablefilter/tablefilter.js"></script>
|
||||||
|
|
||||||
|
<script data-config>
|
||||||
|
var filtersConfig = {
|
||||||
|
base_path: 'tablefilter/',
|
||||||
|
col_1: "select",
|
||||||
|
col_2: "select",
|
||||||
|
col_3: "select",
|
||||||
|
alternate_rows: true,
|
||||||
|
rows_counter: true,
|
||||||
|
btn_reset: true,
|
||||||
|
loader: true,
|
||||||
|
status_bar: true,
|
||||||
|
mark_active_columns: true,
|
||||||
|
col_number_format: [
|
||||||
|
null, null, 'US',
|
||||||
|
'US', 'US', 'US',
|
||||||
|
'US', 'US', 'US'
|
||||||
|
],
|
||||||
|
custom_options: {
|
||||||
|
cols:[3],
|
||||||
|
texts: [[
|
||||||
|
'0 - 25 000',
|
||||||
|
'100 000 - 1 500 000'
|
||||||
|
]],
|
||||||
|
values: [[
|
||||||
|
'>0 && <=25000',
|
||||||
|
'>100000 && <=1500000'
|
||||||
|
]],
|
||||||
|
sorts: [false]
|
||||||
|
},
|
||||||
|
col_widths: [
|
||||||
|
"150px", "100px", "100px",
|
||||||
|
"70px", "70px", "70px",
|
||||||
|
"70px", "60px", "60px"
|
||||||
|
],
|
||||||
|
extensions:[{ name: 'sort' }]
|
||||||
|
};
|
||||||
|
|
||||||
|
var tf = new TableFilter('demo', filtersConfig);
|
||||||
|
tf.init();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<pre></pre>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
DO NOT COPY: NOT PART OF TABLEFILTER
|
||||||
|
-->
|
||||||
|
<script>
|
||||||
|
var configs = document.querySelectorAll('script[data-config]');
|
||||||
|
var pre = document.body.getElementsByTagName('pre')[0];
|
||||||
|
|
||||||
|
[].forEach.call(configs, function(config) {
|
||||||
|
if(pre){
|
||||||
|
pre.innerHTML +=
|
||||||
|
config.innerHTML.replace('<', '<').replace('>', '>');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<!-- -->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
513
dist/starter.html
vendored
Normal file
|
@ -0,0 +1,513 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>TableFilter v0.0.0 - Starter</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>TableFilter v0.0.0</h1>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<table id="demo">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>country</th>
|
||||||
|
<th>isocode</th>
|
||||||
|
<th align="right">year</th>
|
||||||
|
<th align="right">POP</th>
|
||||||
|
<th align="right">XRAT</th>
|
||||||
|
<th align="right">PPP</th>
|
||||||
|
<th align="right">cgdp</th>
|
||||||
|
<th align="right">cc</th>
|
||||||
|
<th align="right">ci</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Benin</td>
|
||||||
|
<td>BEN</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">5950.33</td>
|
||||||
|
<td align="right">589.9517822</td>
|
||||||
|
<td align="right">190.95</td>
|
||||||
|
<td align="right">1178.46</td>
|
||||||
|
<td align="right">90.98</td>
|
||||||
|
<td align="right">7.55</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Benin</td>
|
||||||
|
<td>BEN</td>
|
||||||
|
<td align="right">1999</td>
|
||||||
|
<td align="right">6109.53</td>
|
||||||
|
<td align="right">615.6990967</td>
|
||||||
|
<td align="right">200.19</td>
|
||||||
|
<td align="right">1174.90</td>
|
||||||
|
<td align="right">92.61</td>
|
||||||
|
<td align="right">7.86</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Benin</td>
|
||||||
|
<td>BEN</td>
|
||||||
|
<td align="right">2000</td>
|
||||||
|
<td align="right">6272.00</td>
|
||||||
|
<td align="right">711.9763184</td>
|
||||||
|
<td align="right">200.61</td>
|
||||||
|
<td align="right">1224.74</td>
|
||||||
|
<td align="right">92.27</td>
|
||||||
|
<td align="right">8.25</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Burkina Faso</td>
|
||||||
|
<td>BFA</td>
|
||||||
|
<td align="right">1994</td>
|
||||||
|
<td align="right">9755.03</td>
|
||||||
|
<td align="right">555.2047119</td>
|
||||||
|
<td align="right">125.76</td>
|
||||||
|
<td align="right">838.76</td>
|
||||||
|
<td align="right">79.81</td>
|
||||||
|
<td align="right">6.57</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Burkina Faso</td>
|
||||||
|
<td>BFA</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">9988.00</td>
|
||||||
|
<td align="right">499.148407</td>
|
||||||
|
<td align="right">136.65</td>
|
||||||
|
<td align="right">860.89</td>
|
||||||
|
<td align="right">80.41</td>
|
||||||
|
<td align="right">9.29</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Burkina Faso</td>
|
||||||
|
<td>BFA</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">10225.00</td>
|
||||||
|
<td align="right">511.5523987</td>
|
||||||
|
<td align="right">144.18</td>
|
||||||
|
<td align="right">881.11</td>
|
||||||
|
<td align="right">80.40</td>
|
||||||
|
<td align="right">12.12</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Burkina Faso</td>
|
||||||
|
<td>BFA</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">10473.53</td>
|
||||||
|
<td align="right">583.6693726</td>
|
||||||
|
<td align="right">141.78</td>
|
||||||
|
<td align="right">899.01</td>
|
||||||
|
<td align="right">76.94</td>
|
||||||
|
<td align="right">14.94</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Russia</td>
|
||||||
|
<td>RUS</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">146899.01</td>
|
||||||
|
<td align="right">9.705082893</td>
|
||||||
|
<td align="right">2.64</td>
|
||||||
|
<td align="right">7086.39</td>
|
||||||
|
<td align="right">67.73</td>
|
||||||
|
<td align="right">9.20</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Russia</td>
|
||||||
|
<td>RUS</td>
|
||||||
|
<td align="right">1999</td>
|
||||||
|
<td align="right">146308.99</td>
|
||||||
|
<td align="right">24.6199398</td>
|
||||||
|
<td align="right">4.03</td>
|
||||||
|
<td align="right">8074.70</td>
|
||||||
|
<td align="right">57.35</td>
|
||||||
|
<td align="right">8.81</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Russia</td>
|
||||||
|
<td>RUS</td>
|
||||||
|
<td align="right">2000</td>
|
||||||
|
<td align="right">145555.01</td>
|
||||||
|
<td align="right">28.12916946</td>
|
||||||
|
<td align="right">4.85</td>
|
||||||
|
<td align="right">9995.91</td>
|
||||||
|
<td align="right">54.74</td>
|
||||||
|
<td align="right">8.79</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rwanda</td>
|
||||||
|
<td>RWA</td>
|
||||||
|
<td align="right">1994</td>
|
||||||
|
<td align="right">6230.00</td>
|
||||||
|
<td align="right">194.517</td>
|
||||||
|
<td align="right">50.39</td>
|
||||||
|
<td align="right">529.48</td>
|
||||||
|
<td align="right">132.16</td>
|
||||||
|
<td align="right">4.48</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rwanda</td>
|
||||||
|
<td>RWA</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">6400.00</td>
|
||||||
|
<td align="right">262.1975098</td>
|
||||||
|
<td align="right">70.67</td>
|
||||||
|
<td align="right">746.34</td>
|
||||||
|
<td align="right">92.77</td>
|
||||||
|
<td align="right">3.08</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rwanda</td>
|
||||||
|
<td>RWA</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">6727.00</td>
|
||||||
|
<td align="right">306.8200073</td>
|
||||||
|
<td align="right">77.90</td>
|
||||||
|
<td align="right">823.25</td>
|
||||||
|
<td align="right">89.71</td>
|
||||||
|
<td align="right">3.21</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rwanda</td>
|
||||||
|
<td>RWA</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">7895.18</td>
|
||||||
|
<td align="right">301.5297852</td>
|
||||||
|
<td align="right">84.13</td>
|
||||||
|
<td align="right">847.79</td>
|
||||||
|
<td align="right">91.44</td>
|
||||||
|
<td align="right">3.72</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rwanda</td>
|
||||||
|
<td>RWA</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">8105.00</td>
|
||||||
|
<td align="right">312.3140869</td>
|
||||||
|
<td align="right">85.32</td>
|
||||||
|
<td align="right">914.22</td>
|
||||||
|
<td align="right">89.34</td>
|
||||||
|
<td align="right">4.22</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>El Salvador</td>
|
||||||
|
<td>SLV</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">5669.00</td>
|
||||||
|
<td align="right">8.754583359</td>
|
||||||
|
<td align="right">3.54</td>
|
||||||
|
<td align="right">4143.59</td>
|
||||||
|
<td align="right">89.31</td>
|
||||||
|
<td align="right">10.35</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>El Salvador</td>
|
||||||
|
<td>SLV</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">5798.00</td>
|
||||||
|
<td align="right">8.755000114</td>
|
||||||
|
<td align="right">3.69</td>
|
||||||
|
<td align="right">4235.79</td>
|
||||||
|
<td align="right">88.77</td>
|
||||||
|
<td align="right">7.79</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>El Salvador</td>
|
||||||
|
<td>SLV</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">5911.00</td>
|
||||||
|
<td align="right">8.756250381</td>
|
||||||
|
<td align="right">3.74</td>
|
||||||
|
<td align="right">4408.41</td>
|
||||||
|
<td align="right">87.05</td>
|
||||||
|
<td align="right">7.90</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovak Republic</td>
|
||||||
|
<td>SVK</td>
|
||||||
|
<td align="right">2000</td>
|
||||||
|
<td align="right">5401.00</td>
|
||||||
|
<td align="right">46.0352</td>
|
||||||
|
<td align="right">13.02</td>
|
||||||
|
<td align="right">12618.53</td>
|
||||||
|
<td align="right">52.22</td>
|
||||||
|
<td align="right">24.78</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovenia</td>
|
||||||
|
<td>SVN</td>
|
||||||
|
<td align="right">1994</td>
|
||||||
|
<td align="right">1988.90</td>
|
||||||
|
<td align="right">128.8085938</td>
|
||||||
|
<td align="right">79.97</td>
|
||||||
|
<td align="right">11662.12</td>
|
||||||
|
<td align="right">53.21</td>
|
||||||
|
<td align="right">19.87</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovenia</td>
|
||||||
|
<td>SVN</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">1990.00</td>
|
||||||
|
<td align="right">118.5185013</td>
|
||||||
|
<td align="right">89.03</td>
|
||||||
|
<td align="right">12574.96</td>
|
||||||
|
<td align="right">54.46</td>
|
||||||
|
<td align="right">23.11</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovenia</td>
|
||||||
|
<td>SVN</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">1991.00</td>
|
||||||
|
<td align="right">135.3643036</td>
|
||||||
|
<td align="right">97.27</td>
|
||||||
|
<td align="right">13151.51</td>
|
||||||
|
<td align="right">54.32</td>
|
||||||
|
<td align="right">23.23</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovenia</td>
|
||||||
|
<td>SVN</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">1985.96</td>
|
||||||
|
<td align="right">159.6882935</td>
|
||||||
|
<td align="right">103.96</td>
|
||||||
|
<td align="right">14143.02</td>
|
||||||
|
<td align="right">53.24</td>
|
||||||
|
<td align="right">24.14</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovenia</td>
|
||||||
|
<td>SVN</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">1982.60</td>
|
||||||
|
<td align="right">166.134201</td>
|
||||||
|
<td align="right">108.93</td>
|
||||||
|
<td align="right">15067.34</td>
|
||||||
|
<td align="right">52.82</td>
|
||||||
|
<td align="right">25.35</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1994</td>
|
||||||
|
<td align="right">8740.72</td>
|
||||||
|
<td align="right">669.3706055</td>
|
||||||
|
<td align="right">307.48</td>
|
||||||
|
<td align="right">834.19</td>
|
||||||
|
<td align="right">75.43</td>
|
||||||
|
<td align="right">9.86</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">8980.00</td>
|
||||||
|
<td align="right">864.1192017</td>
|
||||||
|
<td align="right">402.40</td>
|
||||||
|
<td align="right">829.37</td>
|
||||||
|
<td align="right">76.55</td>
|
||||||
|
<td align="right">10.31</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">9214.40</td>
|
||||||
|
<td align="right">1207.900024</td>
|
||||||
|
<td align="right">515.01</td>
|
||||||
|
<td align="right">838.05</td>
|
||||||
|
<td align="right">78.74</td>
|
||||||
|
<td align="right">10.99</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">9443.21</td>
|
||||||
|
<td align="right">1314.498047</td>
|
||||||
|
<td align="right">596.97</td>
|
||||||
|
<td align="right">851.47</td>
|
||||||
|
<td align="right">77.59</td>
|
||||||
|
<td align="right">12.15</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">9665.71</td>
|
||||||
|
<td align="right">1862.06897</td>
|
||||||
|
<td align="right">744.91</td>
|
||||||
|
<td align="right">800.69</td>
|
||||||
|
<td align="right">85.12</td>
|
||||||
|
<td align="right">13.75</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1999</td>
|
||||||
|
<td align="right">9881.21</td>
|
||||||
|
<td align="right">2388.019043</td>
|
||||||
|
<td align="right">941.87</td>
|
||||||
|
<td align="right">765.24</td>
|
||||||
|
<td align="right">91.82</td>
|
||||||
|
<td align="right">15.30</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">2000</td>
|
||||||
|
<td align="right">10089.00</td>
|
||||||
|
<td align="right">3110.843994</td>
|
||||||
|
<td align="right">1157.63</td>
|
||||||
|
<td align="right">840.97</td>
|
||||||
|
<td align="right">86.33</td>
|
||||||
|
<td align="right">15.38</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1994</td>
|
||||||
|
<td align="right">10775.35</td>
|
||||||
|
<td align="right">8.151538849</td>
|
||||||
|
<td align="right">2.01</td>
|
||||||
|
<td align="right">2586.84</td>
|
||||||
|
<td align="right">60.10</td>
|
||||||
|
<td align="right">18.53</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">11011.00</td>
|
||||||
|
<td align="right">8.66537571</td>
|
||||||
|
<td align="right">2.15</td>
|
||||||
|
<td align="right">2603.37</td>
|
||||||
|
<td align="right">66.89</td>
|
||||||
|
<td align="right">15.03</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">11242.16</td>
|
||||||
|
<td align="right">10.00234985</td>
|
||||||
|
<td align="right">2.64</td>
|
||||||
|
<td align="right">2860.23</td>
|
||||||
|
<td align="right">72.06</td>
|
||||||
|
<td align="right">11.32</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">11923.52</td>
|
||||||
|
<td align="right">12.11128998</td>
|
||||||
|
<td align="right">3.17</td>
|
||||||
|
<td align="right">2727.06</td>
|
||||||
|
<td align="right">82.82</td>
|
||||||
|
<td align="right">11.01</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">12153.85</td>
|
||||||
|
<td align="right">23.67910957</td>
|
||||||
|
<td align="right">4.06</td>
|
||||||
|
<td align="right">2799.85</td>
|
||||||
|
<td align="right">77.66</td>
|
||||||
|
<td align="right">10.75</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1999</td>
|
||||||
|
<td align="right">12388.32</td>
|
||||||
|
<td align="right">38.30120087</td>
|
||||||
|
<td align="right">6.12</td>
|
||||||
|
<td align="right">2770.48</td>
|
||||||
|
<td align="right">76.89</td>
|
||||||
|
<td align="right">10.73</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">2000</td>
|
||||||
|
<td align="right">12627.00</td>
|
||||||
|
<td align="right">44.41791916</td>
|
||||||
|
<td align="right">9.48</td>
|
||||||
|
<td align="right">2607.03</td>
|
||||||
|
<td align="right">69.23</td>
|
||||||
|
<td align="right">8.62</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="tablefilter/tablefilter.js"></script>
|
||||||
|
|
||||||
|
<script data-config>
|
||||||
|
var filtersConfig = {
|
||||||
|
base_path: 'tablefilter/',
|
||||||
|
col_1: "select",
|
||||||
|
col_2: "select",
|
||||||
|
col_3: "select",
|
||||||
|
alternate_rows: true,
|
||||||
|
rows_counter: true,
|
||||||
|
btn_reset: true,
|
||||||
|
loader: true,
|
||||||
|
status_bar: true,
|
||||||
|
mark_active_columns: true,
|
||||||
|
col_number_format: [
|
||||||
|
null, null, 'US',
|
||||||
|
'US', 'US', 'US',
|
||||||
|
'US', 'US', 'US'
|
||||||
|
],
|
||||||
|
custom_options: {
|
||||||
|
cols:[3],
|
||||||
|
texts: [[
|
||||||
|
'0 - 25 000',
|
||||||
|
'100 000 - 1 500 000'
|
||||||
|
]],
|
||||||
|
values: [[
|
||||||
|
'>0 && <=25000',
|
||||||
|
'>100000 && <=1500000'
|
||||||
|
]],
|
||||||
|
sorts: [false]
|
||||||
|
},
|
||||||
|
col_widths: [
|
||||||
|
"150px", "100px", "100px",
|
||||||
|
"70px", "70px", "70px",
|
||||||
|
"70px", "60px", "60px"
|
||||||
|
],
|
||||||
|
extensions:[{ name: 'sort' }]
|
||||||
|
};
|
||||||
|
|
||||||
|
var tf = new TableFilter('demo', filtersConfig);
|
||||||
|
tf.init();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<pre></pre>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
DO NOT COPY: NOT PART OF TABLEFILTER
|
||||||
|
-->
|
||||||
|
<script>
|
||||||
|
var configs = document.querySelectorAll('script[data-config]');
|
||||||
|
var pre = document.body.getElementsByTagName('pre')[0];
|
||||||
|
|
||||||
|
[].forEach.call(configs, function(config) {
|
||||||
|
if(pre){
|
||||||
|
pre.innerHTML +=
|
||||||
|
config.innerHTML.replace('<', '<').replace('>', '>');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<!-- -->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
2
dist/tablefilter/style/tablefilter.css
vendored
|
@ -283,7 +283,7 @@ div.grd_Cont .odd{ background-color:#DFE8F6; }/*row bg alternating color*/
|
||||||
|
|
||||||
/* Selection */
|
/* Selection */
|
||||||
.ezActiveRow{ background-color:#2852A8 !important; color:#fff; }
|
.ezActiveRow{ background-color:#2852A8 !important; color:#fff; }
|
||||||
.ezSelectedRow{ background-color:#316AC5; color:#fff; }
|
.ezSelectedRow{ background-color:#316AC5 !important; color:#fff; }
|
||||||
.ezActiveCell{
|
.ezActiveCell{
|
||||||
background-color:#D9E8FB !important;
|
background-color:#D9E8FB !important;
|
||||||
color:#000 !important; font-weight:bold;
|
color:#000 !important; font-weight:bold;
|
||||||
|
|
7043
dist/tablefilter/tablefilter.js
vendored
2229
dist/tablefilter/tf-1.js
vendored
|
@ -1,154 +0,0 @@
|
||||||
|
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>ezEditTable, enhance HTML tables easily, advanced inline editing, selection and keyboard navigation - script by Max Guglielmi</title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|
||||||
<meta name="description" content="ezEditTable is an open source javascript code aimed at enhancing regular HTML tables by adding features such as inline editing components, advanced selection and keyboard navigation" />
|
|
||||||
<meta name="keywords" content="html table editing, html table inline cell editing, inline cell editor, row selection, script, javascript, max guglielmi" />
|
|
||||||
<meta name="robots" content="index,follow" />
|
|
||||||
<meta name="author" content="Max Guglielmi" />
|
|
||||||
<style type="text/css" media="screen, projection">
|
|
||||||
@import "http://edittable.free.fr/includes/common.css";
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script language="javascript" type="text/javascript" src="../ezEditTable.js"></script>
|
|
||||||
<link href="../ezEditTable.css" rel="stylesheet" type="text/css">
|
|
||||||
|
|
||||||
<style type="text/css" media="screen">
|
|
||||||
div#navmenu li a#lnk03{
|
|
||||||
color:#333; font-weight:bold;
|
|
||||||
border-top:2px solid #ff9900;
|
|
||||||
background:#fff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="container">
|
|
||||||
|
|
||||||
<div id="banner">
|
|
||||||
|
|
||||||
<div id="navmenu">
|
|
||||||
<ul>
|
|
||||||
<li><a id="lnk01" href="index.html">Home</a></li>
|
|
||||||
<li><a id="lnk02" href="samples.html">Samples</a></li>
|
|
||||||
<li><a id="lnk03" href="doc.html">Documentation</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- BEGIN CONTENT -->
|
|
||||||
|
|
||||||
<div id="content">
|
|
||||||
<div id="divsubmenu">
|
|
||||||
<ul class="submenu">
|
|
||||||
<li class="dir">
|
|
||||||
<a id="co" href="./doc.html">Configuration Object <small>▼</small></a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="./doc.html#ez_common">General</a></li>
|
|
||||||
<li><a href="./doc.html#ez_selection">Selection</a></li>
|
|
||||||
<li><a href="./doc.html#ez_sel_events">Selection callback events</a></li>
|
|
||||||
<li><a href="./doc.html#ez_editable">Editable</a></li>
|
|
||||||
<li><a href="./doc.html#ez_cell_editors">Cell editors</a></li>
|
|
||||||
<li><a href="./doc.html#ez_editable">Command buttons</a></li>
|
|
||||||
<li><a href="./doc.html#ez_uploader">Uploader editor <sup>new</sup></a></li>
|
|
||||||
<li><a href="./doc.html#ez_editable_events">Editable callback events</a></li>
|
|
||||||
<li><a href="./doc.html#ez_actions">Actions</a></li>
|
|
||||||
<li><a href="./doc.html#ez_actions_events">Actions callback events</a></li>
|
|
||||||
<li><a href="./doc.html#ez_msg">Messages</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="dir">
|
|
||||||
<a id="cl" href="./doc_class.html">TF Class<small>▼</small></a>
|
|
||||||
<ul>
|
|
||||||
|
|
||||||
<li><a href="./doc_class.html#ez_constructor">Constructor</a></li>
|
|
||||||
<li><a href="./doc_methods.html#ez_methods">General public methods</a></li>
|
|
||||||
<li><a href="./doc_methods.html#ez_selection_methods">Selection public methods</a></li>
|
|
||||||
<li><a href="./doc_methods.html#ez_editable_methods">Editable public methods</a></li>
|
|
||||||
<li><a href="./doc_properties.html#ez_properties">General public properties</a></li>
|
|
||||||
<li><a href="./doc_properties.html#ez_selection_properties">Selection public properties</a></li>
|
|
||||||
<li><a href="./doc_properties.html#ez_editable_properties">Editable public properties</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a id="uf" href="./doc_utilities.html">Utility Functions</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="marginTop30">Documentation</h1>
|
|
||||||
<a name="class" id="class"></a>
|
|
||||||
|
|
||||||
<h2>EditTable Class</h2>
|
|
||||||
|
|
||||||
<!--[if lt IE 8]>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<a href="./doc_class.html#ez_constructor">Constructor</a></li> |
|
|
||||||
<a href="./doc_methods.html#ez_methods">General public methods</a></li> |
|
|
||||||
<a href="./doc_methods.html#ez_selection_methods">Selection public methods</a></li> |
|
|
||||||
<a href="./doc_methods.html#ez_editable_methods">Editable public methods</a></li> |
|
|
||||||
<a href="./doc_properties.html#ez_properties">General public properties</a></li> |
|
|
||||||
<a href="./doc_properties.html#ez_selection_properties">Selection public properties</a></li> |
|
|
||||||
<a href="./doc_properties.html#ez_editable_properties">Editable public properties</a></li>
|
|
||||||
</p>
|
|
||||||
<![endif]-->
|
|
||||||
|
|
||||||
<a name="ez_constructor" id="ez_constructor"></a>
|
|
||||||
<h3>Constructor</h3>
|
|
||||||
<h3><code>EditTable(id, startRow, config);</code></h3>
|
|
||||||
<table id="tblConstructor" cellspacing="0" class="ezEditableTable" >
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Parameter</th>
|
|
||||||
|
|
||||||
<th>Type</th>
|
|
||||||
<th>Description</th>
|
|
||||||
<th>Remarks</th>
|
|
||||||
<th>Example</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><strong>id</strong></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>id of the <code>table</code> element</td>
|
|
||||||
<td> </td>
|
|
||||||
<td><code>var myEditTable = new EditTable("myTableId");</code></td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>startRow</strong> </td>
|
|
||||||
<td>number</td>
|
|
||||||
<td>index of the first row from which row selection can start</td>
|
|
||||||
<td>optional parameter</td>
|
|
||||||
<td><code>var myEditTable = new EditTable("myTableId", 2);</code></td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>config</strong></td>
|
|
||||||
<td>object</td>
|
|
||||||
<td> configuration object</td>
|
|
||||||
<td>optional parameter</td>
|
|
||||||
<td><code>var myEditTable = new EditTable("myTableId", 2, { editable: true });</code></td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- END CONTENT -->
|
|
||||||
|
|
||||||
<div id="footer"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -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>
|
|
|
@ -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; }
|
|
|
@ -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}
|
|
Before Width: | Height: | Size: 234 B |
|
@ -1,23 +0,0 @@
|
||||||
/*====================================================
|
|
||||||
- ezEditTable default theme stylesheet
|
|
||||||
- Edit classes below for your project needs
|
|
||||||
=====================================================*/
|
|
||||||
|
|
||||||
.ezEditableTable{
|
|
||||||
border:0 !important;
|
|
||||||
border-left:1px solid #99BBE8 !important;
|
|
||||||
border-right:1px solid #99BBE8 !important;
|
|
||||||
border-bottom:1px solid #99BBE8 !important;
|
|
||||||
font:12px/13px arial, tahoma, helvetica, sans-serif !important;
|
|
||||||
}
|
|
||||||
.ezEditableTable th, td{ border:1px solid #C5D3EC !important; }
|
|
||||||
.ezEditableTable th{
|
|
||||||
background:transparent url(img/bg_col_header.gif) 0 -2px repeat-x !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Selection */
|
|
||||||
.ezActiveRow td{ background-color:#316AC5; color:#fff !important; }
|
|
||||||
.ezSelectedRow{ background-color:#D9E8FB !important; border:1px dotted #909090 !important; color:#000; }
|
|
||||||
|
|
||||||
/* Command type editor */
|
|
||||||
.ezCommandEditor button{ border:1px solid #C5D3EC !important; }
|
|
Before Width: | Height: | Size: 875 B |
Before Width: | Height: | Size: 398 B |
Before Width: | Height: | Size: 655 B |
Before Width: | Height: | Size: 330 B |
Before Width: | Height: | Size: 342 B |
Before Width: | Height: | Size: 375 B |
Before Width: | Height: | Size: 537 B |
|
@ -1,68 +0,0 @@
|
||||||
/*====================================================
|
|
||||||
- ezEditTable SkyBlue theme stylesheet
|
|
||||||
- Edit classes below for your project needs
|
|
||||||
=====================================================*/
|
|
||||||
|
|
||||||
.ezEditableTable{
|
|
||||||
padding:0; color:#000;
|
|
||||||
font:12px/13px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif !important;
|
|
||||||
border-right:1px solid #A4BED4;
|
|
||||||
border-top:1px solid #A4BED4;
|
|
||||||
border-left:1px solid #A4BED4;
|
|
||||||
border-bottom:0;
|
|
||||||
}
|
|
||||||
.ezEditableTable td{
|
|
||||||
margin:0; padding:5px; color:inherit;
|
|
||||||
border-bottom:1px solid #A4BED4;
|
|
||||||
border-left:0; border-top:0; border-right:0;
|
|
||||||
}
|
|
||||||
.ezEditableTable th{
|
|
||||||
margin:0; padding:5px; color:inherit;
|
|
||||||
background:#D1E5FE url("img/sky_blue_grid.gif") 0 0 repeat-x !important;
|
|
||||||
border-color:#FDFDFD #A4BED4 #A4BED4 #FDFDFD;
|
|
||||||
border-width:1px; border-style:solid;
|
|
||||||
}
|
|
||||||
.ezModifiedCell{ background:transparent url(../bg_mod_cell.png) 0 0 no-repeat !important; }
|
|
||||||
|
|
||||||
/* Selection */
|
|
||||||
.ezActiveRow td{ background:#D9E8FB; border-top:1px solid #FDFDFD; border-bottom:1px solid #A4BED4 !important; color:#000 !important; }
|
|
||||||
.ezSelectedRow{ background:#D1E5FE url("img/sky_blue_grid.gif") 0 0 repeat-x !important; color:#000; }
|
|
||||||
td.ezActiveCell{
|
|
||||||
background-color:#fff !important; color:#000 !important;
|
|
||||||
font-weight:bold; font-style:italic; border-bottom:0;
|
|
||||||
border-top:1px solid #FDFDFD !important;
|
|
||||||
border-left:1px solid #A4BED4 !important;
|
|
||||||
border-right:1px solid #A4BED4 !important;
|
|
||||||
}
|
|
||||||
.ezUnselectable{
|
|
||||||
-moz-user-select: -moz-none;
|
|
||||||
-khtml-user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-o-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Editors */
|
|
||||||
.ezInputEditor{ width:100%; height:auto; font:12px/13px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif !important; border:0; }
|
|
||||||
.ezTextareaEditor{ width:100%; height:25px; font:12px/13px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif !important; border:0; overflow:auto; }
|
|
||||||
.ezSelectEditor{ width:100%; font:12px/13px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif !important; border:1px solid #AACCF6; }
|
|
||||||
select[multiple="multiple"].ezSelectEditor{ height:35px; }
|
|
||||||
|
|
||||||
/* Command type editor */
|
|
||||||
.ezCommandEditor button{
|
|
||||||
margin:2px !important; background:#D1E5FE;
|
|
||||||
border:1px solid #A4BED4;
|
|
||||||
font-size:12px !important;
|
|
||||||
border-radius:4px 4px 4px 4px;
|
|
||||||
-moz-border-radius:4px 4px 4px 4px;
|
|
||||||
}
|
|
||||||
.ezCommandEditor button img{ vertical-align:middle; margin:2px; }
|
|
||||||
|
|
||||||
/* Utils */
|
|
||||||
.ezOpacity{
|
|
||||||
filter:alpha(opacity=60); /* for IE */
|
|
||||||
opacity:0.6; /* CSS3 standard */
|
|
||||||
}
|
|
||||||
.alignLeft{ text-align:left; }
|
|
||||||
.alignCenter{ text-align:center; }
|
|
||||||
.alignRight{ text-align:right; }
|
|
Before Width: | Height: | Size: 554 B |
|
@ -65,10 +65,7 @@ export default class AdapterEzEditTable {
|
||||||
}
|
}
|
||||||
|
|
||||||
cfg.base_path = cfg.base_path || tf.basePath + 'ezEditTable/';
|
cfg.base_path = cfg.base_path || tf.basePath + 'ezEditTable/';
|
||||||
// var editable = tf.editable;
|
|
||||||
var editable = cfg.editable;
|
var editable = cfg.editable;
|
||||||
// cfg.editable = editable;
|
|
||||||
// var selectable = tf.selectable;
|
|
||||||
var selectable = cfg.selectable;
|
var selectable = cfg.selectable;
|
||||||
cfg.selection = selectable;
|
cfg.selection = selectable;
|
||||||
|
|
||||||
|
|
|
@ -24,10 +24,9 @@ export class Help{
|
||||||
'operators: <br /><b><</b>, <b><=</b>, <b>></b>, ' +
|
'operators: <br /><b><</b>, <b><=</b>, <b>></b>, ' +
|
||||||
'<b>>=</b>, <b>=</b>, <b>*</b>, <b>!</b>, <b>{</b>, <b>}</b>, ' +
|
'<b>>=</b>, <b>=</b>, <b>*</b>, <b>!</b>, <b>{</b>, <b>}</b>, ' +
|
||||||
'<b>||</b>,<b>&&</b>, <b>[empty]</b>, <b>[nonempty]</b>, ' +
|
'<b>||</b>,<b>&&</b>, <b>[empty]</b>, <b>[nonempty]</b>, ' +
|
||||||
'<b>rgx:</b><br/> Learn more:<br/>' +
|
'<b>rgx:</b><br/>' +
|
||||||
'<a href="https://github.com/koalyptus/TableFilter/wiki/' +
|
'<a href="https://github.com/koalyptus/TableFilter/wiki/' +
|
||||||
'4.-Filter-operators" target="_blank">https://github.com/' +
|
'4.-Filter-operators" target="_blank">Learn more</a>.<hr/>';
|
||||||
'koalyptus/TableFilter/wiki/4.-Filter-operators</a><hr/>';
|
|
||||||
//defines help innerHtml
|
//defines help innerHtml
|
||||||
this.instrHtml = f.help_instructions_html || null;
|
this.instrHtml = f.help_instructions_html || null;
|
||||||
//defines reset button text
|
//defines reset button text
|
||||||
|
|
436
static/partials/countries-table-tiny.html
Normal file
|
@ -0,0 +1,436 @@
|
||||||
|
|
||||||
|
<table id="demo">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>country</th>
|
||||||
|
<th>isocode</th>
|
||||||
|
<th align="right">year</th>
|
||||||
|
<th align="right">POP</th>
|
||||||
|
<th align="right">XRAT</th>
|
||||||
|
<th align="right">PPP</th>
|
||||||
|
<th align="right">cgdp</th>
|
||||||
|
<th align="right">cc</th>
|
||||||
|
<th align="right">ci</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Benin</td>
|
||||||
|
<td>BEN</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">5950.33</td>
|
||||||
|
<td align="right">589.9517822</td>
|
||||||
|
<td align="right">190.95</td>
|
||||||
|
<td align="right">1178.46</td>
|
||||||
|
<td align="right">90.98</td>
|
||||||
|
<td align="right">7.55</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Benin</td>
|
||||||
|
<td>BEN</td>
|
||||||
|
<td align="right">1999</td>
|
||||||
|
<td align="right">6109.53</td>
|
||||||
|
<td align="right">615.6990967</td>
|
||||||
|
<td align="right">200.19</td>
|
||||||
|
<td align="right">1174.90</td>
|
||||||
|
<td align="right">92.61</td>
|
||||||
|
<td align="right">7.86</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Benin</td>
|
||||||
|
<td>BEN</td>
|
||||||
|
<td align="right">2000</td>
|
||||||
|
<td align="right">6272.00</td>
|
||||||
|
<td align="right">711.9763184</td>
|
||||||
|
<td align="right">200.61</td>
|
||||||
|
<td align="right">1224.74</td>
|
||||||
|
<td align="right">92.27</td>
|
||||||
|
<td align="right">8.25</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Burkina Faso</td>
|
||||||
|
<td>BFA</td>
|
||||||
|
<td align="right">1994</td>
|
||||||
|
<td align="right">9755.03</td>
|
||||||
|
<td align="right">555.2047119</td>
|
||||||
|
<td align="right">125.76</td>
|
||||||
|
<td align="right">838.76</td>
|
||||||
|
<td align="right">79.81</td>
|
||||||
|
<td align="right">6.57</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Burkina Faso</td>
|
||||||
|
<td>BFA</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">9988.00</td>
|
||||||
|
<td align="right">499.148407</td>
|
||||||
|
<td align="right">136.65</td>
|
||||||
|
<td align="right">860.89</td>
|
||||||
|
<td align="right">80.41</td>
|
||||||
|
<td align="right">9.29</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Burkina Faso</td>
|
||||||
|
<td>BFA</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">10225.00</td>
|
||||||
|
<td align="right">511.5523987</td>
|
||||||
|
<td align="right">144.18</td>
|
||||||
|
<td align="right">881.11</td>
|
||||||
|
<td align="right">80.40</td>
|
||||||
|
<td align="right">12.12</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Burkina Faso</td>
|
||||||
|
<td>BFA</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">10473.53</td>
|
||||||
|
<td align="right">583.6693726</td>
|
||||||
|
<td align="right">141.78</td>
|
||||||
|
<td align="right">899.01</td>
|
||||||
|
<td align="right">76.94</td>
|
||||||
|
<td align="right">14.94</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Russia</td>
|
||||||
|
<td>RUS</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">146899.01</td>
|
||||||
|
<td align="right">9.705082893</td>
|
||||||
|
<td align="right">2.64</td>
|
||||||
|
<td align="right">7086.39</td>
|
||||||
|
<td align="right">67.73</td>
|
||||||
|
<td align="right">9.20</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Russia</td>
|
||||||
|
<td>RUS</td>
|
||||||
|
<td align="right">1999</td>
|
||||||
|
<td align="right">146308.99</td>
|
||||||
|
<td align="right">24.6199398</td>
|
||||||
|
<td align="right">4.03</td>
|
||||||
|
<td align="right">8074.70</td>
|
||||||
|
<td align="right">57.35</td>
|
||||||
|
<td align="right">8.81</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Russia</td>
|
||||||
|
<td>RUS</td>
|
||||||
|
<td align="right">2000</td>
|
||||||
|
<td align="right">145555.01</td>
|
||||||
|
<td align="right">28.12916946</td>
|
||||||
|
<td align="right">4.85</td>
|
||||||
|
<td align="right">9995.91</td>
|
||||||
|
<td align="right">54.74</td>
|
||||||
|
<td align="right">8.79</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rwanda</td>
|
||||||
|
<td>RWA</td>
|
||||||
|
<td align="right">1994</td>
|
||||||
|
<td align="right">6230.00</td>
|
||||||
|
<td align="right">194.517</td>
|
||||||
|
<td align="right">50.39</td>
|
||||||
|
<td align="right">529.48</td>
|
||||||
|
<td align="right">132.16</td>
|
||||||
|
<td align="right">4.48</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rwanda</td>
|
||||||
|
<td>RWA</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">6400.00</td>
|
||||||
|
<td align="right">262.1975098</td>
|
||||||
|
<td align="right">70.67</td>
|
||||||
|
<td align="right">746.34</td>
|
||||||
|
<td align="right">92.77</td>
|
||||||
|
<td align="right">3.08</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rwanda</td>
|
||||||
|
<td>RWA</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">6727.00</td>
|
||||||
|
<td align="right">306.8200073</td>
|
||||||
|
<td align="right">77.90</td>
|
||||||
|
<td align="right">823.25</td>
|
||||||
|
<td align="right">89.71</td>
|
||||||
|
<td align="right">3.21</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rwanda</td>
|
||||||
|
<td>RWA</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">7895.18</td>
|
||||||
|
<td align="right">301.5297852</td>
|
||||||
|
<td align="right">84.13</td>
|
||||||
|
<td align="right">847.79</td>
|
||||||
|
<td align="right">91.44</td>
|
||||||
|
<td align="right">3.72</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Rwanda</td>
|
||||||
|
<td>RWA</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">8105.00</td>
|
||||||
|
<td align="right">312.3140869</td>
|
||||||
|
<td align="right">85.32</td>
|
||||||
|
<td align="right">914.22</td>
|
||||||
|
<td align="right">89.34</td>
|
||||||
|
<td align="right">4.22</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>El Salvador</td>
|
||||||
|
<td>SLV</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">5669.00</td>
|
||||||
|
<td align="right">8.754583359</td>
|
||||||
|
<td align="right">3.54</td>
|
||||||
|
<td align="right">4143.59</td>
|
||||||
|
<td align="right">89.31</td>
|
||||||
|
<td align="right">10.35</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>El Salvador</td>
|
||||||
|
<td>SLV</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">5798.00</td>
|
||||||
|
<td align="right">8.755000114</td>
|
||||||
|
<td align="right">3.69</td>
|
||||||
|
<td align="right">4235.79</td>
|
||||||
|
<td align="right">88.77</td>
|
||||||
|
<td align="right">7.79</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>El Salvador</td>
|
||||||
|
<td>SLV</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">5911.00</td>
|
||||||
|
<td align="right">8.756250381</td>
|
||||||
|
<td align="right">3.74</td>
|
||||||
|
<td align="right">4408.41</td>
|
||||||
|
<td align="right">87.05</td>
|
||||||
|
<td align="right">7.90</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovak Republic</td>
|
||||||
|
<td>SVK</td>
|
||||||
|
<td align="right">2000</td>
|
||||||
|
<td align="right">5401.00</td>
|
||||||
|
<td align="right">46.0352</td>
|
||||||
|
<td align="right">13.02</td>
|
||||||
|
<td align="right">12618.53</td>
|
||||||
|
<td align="right">52.22</td>
|
||||||
|
<td align="right">24.78</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovenia</td>
|
||||||
|
<td>SVN</td>
|
||||||
|
<td align="right">1994</td>
|
||||||
|
<td align="right">1988.90</td>
|
||||||
|
<td align="right">128.8085938</td>
|
||||||
|
<td align="right">79.97</td>
|
||||||
|
<td align="right">11662.12</td>
|
||||||
|
<td align="right">53.21</td>
|
||||||
|
<td align="right">19.87</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovenia</td>
|
||||||
|
<td>SVN</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">1990.00</td>
|
||||||
|
<td align="right">118.5185013</td>
|
||||||
|
<td align="right">89.03</td>
|
||||||
|
<td align="right">12574.96</td>
|
||||||
|
<td align="right">54.46</td>
|
||||||
|
<td align="right">23.11</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovenia</td>
|
||||||
|
<td>SVN</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">1991.00</td>
|
||||||
|
<td align="right">135.3643036</td>
|
||||||
|
<td align="right">97.27</td>
|
||||||
|
<td align="right">13151.51</td>
|
||||||
|
<td align="right">54.32</td>
|
||||||
|
<td align="right">23.23</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovenia</td>
|
||||||
|
<td>SVN</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">1985.96</td>
|
||||||
|
<td align="right">159.6882935</td>
|
||||||
|
<td align="right">103.96</td>
|
||||||
|
<td align="right">14143.02</td>
|
||||||
|
<td align="right">53.24</td>
|
||||||
|
<td align="right">24.14</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Slovenia</td>
|
||||||
|
<td>SVN</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">1982.60</td>
|
||||||
|
<td align="right">166.134201</td>
|
||||||
|
<td align="right">108.93</td>
|
||||||
|
<td align="right">15067.34</td>
|
||||||
|
<td align="right">52.82</td>
|
||||||
|
<td align="right">25.35</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1994</td>
|
||||||
|
<td align="right">8740.72</td>
|
||||||
|
<td align="right">669.3706055</td>
|
||||||
|
<td align="right">307.48</td>
|
||||||
|
<td align="right">834.19</td>
|
||||||
|
<td align="right">75.43</td>
|
||||||
|
<td align="right">9.86</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">8980.00</td>
|
||||||
|
<td align="right">864.1192017</td>
|
||||||
|
<td align="right">402.40</td>
|
||||||
|
<td align="right">829.37</td>
|
||||||
|
<td align="right">76.55</td>
|
||||||
|
<td align="right">10.31</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">9214.40</td>
|
||||||
|
<td align="right">1207.900024</td>
|
||||||
|
<td align="right">515.01</td>
|
||||||
|
<td align="right">838.05</td>
|
||||||
|
<td align="right">78.74</td>
|
||||||
|
<td align="right">10.99</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">9443.21</td>
|
||||||
|
<td align="right">1314.498047</td>
|
||||||
|
<td align="right">596.97</td>
|
||||||
|
<td align="right">851.47</td>
|
||||||
|
<td align="right">77.59</td>
|
||||||
|
<td align="right">12.15</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">9665.71</td>
|
||||||
|
<td align="right">1862.06897</td>
|
||||||
|
<td align="right">744.91</td>
|
||||||
|
<td align="right">800.69</td>
|
||||||
|
<td align="right">85.12</td>
|
||||||
|
<td align="right">13.75</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">1999</td>
|
||||||
|
<td align="right">9881.21</td>
|
||||||
|
<td align="right">2388.019043</td>
|
||||||
|
<td align="right">941.87</td>
|
||||||
|
<td align="right">765.24</td>
|
||||||
|
<td align="right">91.82</td>
|
||||||
|
<td align="right">15.30</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zambia</td>
|
||||||
|
<td>ZMB</td>
|
||||||
|
<td align="right">2000</td>
|
||||||
|
<td align="right">10089.00</td>
|
||||||
|
<td align="right">3110.843994</td>
|
||||||
|
<td align="right">1157.63</td>
|
||||||
|
<td align="right">840.97</td>
|
||||||
|
<td align="right">86.33</td>
|
||||||
|
<td align="right">15.38</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1994</td>
|
||||||
|
<td align="right">10775.35</td>
|
||||||
|
<td align="right">8.151538849</td>
|
||||||
|
<td align="right">2.01</td>
|
||||||
|
<td align="right">2586.84</td>
|
||||||
|
<td align="right">60.10</td>
|
||||||
|
<td align="right">18.53</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1995</td>
|
||||||
|
<td align="right">11011.00</td>
|
||||||
|
<td align="right">8.66537571</td>
|
||||||
|
<td align="right">2.15</td>
|
||||||
|
<td align="right">2603.37</td>
|
||||||
|
<td align="right">66.89</td>
|
||||||
|
<td align="right">15.03</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1996</td>
|
||||||
|
<td align="right">11242.16</td>
|
||||||
|
<td align="right">10.00234985</td>
|
||||||
|
<td align="right">2.64</td>
|
||||||
|
<td align="right">2860.23</td>
|
||||||
|
<td align="right">72.06</td>
|
||||||
|
<td align="right">11.32</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1997</td>
|
||||||
|
<td align="right">11923.52</td>
|
||||||
|
<td align="right">12.11128998</td>
|
||||||
|
<td align="right">3.17</td>
|
||||||
|
<td align="right">2727.06</td>
|
||||||
|
<td align="right">82.82</td>
|
||||||
|
<td align="right">11.01</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1998</td>
|
||||||
|
<td align="right">12153.85</td>
|
||||||
|
<td align="right">23.67910957</td>
|
||||||
|
<td align="right">4.06</td>
|
||||||
|
<td align="right">2799.85</td>
|
||||||
|
<td align="right">77.66</td>
|
||||||
|
<td align="right">10.75</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">1999</td>
|
||||||
|
<td align="right">12388.32</td>
|
||||||
|
<td align="right">38.30120087</td>
|
||||||
|
<td align="right">6.12</td>
|
||||||
|
<td align="right">2770.48</td>
|
||||||
|
<td align="right">76.89</td>
|
||||||
|
<td align="right">10.73</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Zimbabwe</td>
|
||||||
|
<td>ZWE</td>
|
||||||
|
<td align="right">2000</td>
|
||||||
|
<td align="right">12627.00</td>
|
||||||
|
<td align="right">44.41791916</td>
|
||||||
|
<td align="right">9.48</td>
|
||||||
|
<td align="right">2607.03</td>
|
||||||
|
<td align="right">69.23</td>
|
||||||
|
<td align="right">8.62</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
|
@ -283,7 +283,7 @@ div.grd_Cont .odd{ background-color:#DFE8F6; }/*row bg alternating color*/
|
||||||
|
|
||||||
/* Selection */
|
/* Selection */
|
||||||
.ezActiveRow{ background-color:#2852A8 !important; color:#fff; }
|
.ezActiveRow{ background-color:#2852A8 !important; color:#fff; }
|
||||||
.ezSelectedRow{ background-color:#316AC5; color:#fff; }
|
.ezSelectedRow{ background-color:#316AC5 !important; color:#fff; }
|
||||||
.ezActiveCell{
|
.ezActiveCell{
|
||||||
background-color:#D9E8FB !important;
|
background-color:#D9E8FB !important;
|
||||||
color:#000 !important; font-weight:bold;
|
color:#000 !important; font-weight:bold;
|
||||||
|
|
94
static/templates/advanced-grid.html
Normal file
|
@ -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>
|
60
static/templates/starter.html
Normal file
|
@ -0,0 +1,60 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>{NAME} v{VERSION} - Starter</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>{NAME} v{VERSION}</h1>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- @import partials/countries-table-tiny.html -->
|
||||||
|
|
||||||
|
<script src="tablefilter/tablefilter.js"></script>
|
||||||
|
|
||||||
|
<script data-config>
|
||||||
|
var filtersConfig = {
|
||||||
|
base_path: 'tablefilter/',
|
||||||
|
col_1: "select",
|
||||||
|
col_2: "select",
|
||||||
|
col_3: "select",
|
||||||
|
alternate_rows: true,
|
||||||
|
rows_counter: true,
|
||||||
|
btn_reset: true,
|
||||||
|
loader: true,
|
||||||
|
status_bar: true,
|
||||||
|
mark_active_columns: true,
|
||||||
|
col_number_format: [
|
||||||
|
null, null, 'US',
|
||||||
|
'US', 'US', 'US',
|
||||||
|
'US', 'US', 'US'
|
||||||
|
],
|
||||||
|
custom_options: {
|
||||||
|
cols:[3],
|
||||||
|
texts: [[
|
||||||
|
'0 - 25 000',
|
||||||
|
'100 000 - 1 500 000'
|
||||||
|
]],
|
||||||
|
values: [[
|
||||||
|
'>0 && <=25000',
|
||||||
|
'>100000 && <=1500000'
|
||||||
|
]],
|
||||||
|
sorts: [false]
|
||||||
|
},
|
||||||
|
col_widths: [
|
||||||
|
"150px", "100px", "100px",
|
||||||
|
"70px", "70px", "70px",
|
||||||
|
"70px", "60px", "60px"
|
||||||
|
],
|
||||||
|
extensions:[{ name: 'sort' }]
|
||||||
|
};
|
||||||
|
|
||||||
|
var tf = new TableFilter('demo', filtersConfig);
|
||||||
|
tf.init();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<pre></pre>
|
||||||
|
|
||||||
|
<!-- @import partials/pre-inline-script.html -->
|
||||||
|
</body>
|
||||||
|
</html>
|