2050 lines
73 KiB
HTML
2050 lines
73 KiB
HTML
<!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 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</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>
|
|
|
|
|
|
|
|
<h2>Configuration Object</h2>
|
|
|
|
|
|
<p>You will find here all the properties of the configuration object ( var
|
|
etConfig = { property: value }) needed to configure the EditTable object:</p>
|
|
|
|
<!--[if lt IE 8]>
|
|
<p>
|
|
<a href="#ez_common">General</a> | <a href="#ez_selection">Selection</a> |
|
|
<a href="#ez_sel_events">Selection callback events</a> | <a href="#ez_editable">Editable</a> |
|
|
<a href="#ez_cell_editors">Cell editors</a> | <a href="#ez_command_btns">Command buttons</a> |
|
|
<a href="#ez_editable_events">Editable and cell editors callback events and delegates</a> |
|
|
<a href="#ez_actions">Actions</a> | <a href="#ez_actions_events">Actions callback events</a> |
|
|
<a href="#ez_msg">Messages</a>
|
|
</p>
|
|
<![endif]-->
|
|
|
|
<a name="ez_common" id="ez_common"></a>
|
|
|
|
<h3>General</h3>
|
|
<table id="tblCommon" 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>
|
|
<th>selection</th>
|
|
<td>boolean</td>
|
|
<td>enables / disables selection model (default - true) </td>
|
|
<td> </td>
|
|
<td><code>var etConfig = { selection: false }</code></td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<th>editable</th>
|
|
<td>boolean</td>
|
|
<td>enables / disables inline cell editing(default - false) </td>
|
|
<td> </td>
|
|
<td><code>var etConfig = { editable: true }</code></td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<th>key_navigation</th>
|
|
<td>boolean</td>
|
|
<td>enables / disables keyboard navigation (default - true)</td>
|
|
<td> </td>
|
|
<td><code>var etConfig = { key_navigation: false }</code></td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<th>table_css</th>
|
|
<td>string</td>
|
|
<td>defines the css class of the table element (default - 'ezEditableTable')</td>
|
|
<td>Check out the ezEditTable.css stylesheet and edit the css classes
|
|
for your project's needs</td>
|
|
<td> <code>var etConfig = { table_css: "myclass" }</code></td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<th>unselectable_css</th>
|
|
<td> string</td>
|
|
<td> defines the css class that makes the table text unselectable (default
|
|
- 'ezUnselectable')</td>
|
|
<td>Older versions of IE do not support this css class, as an alternative
|
|
use unselectable="on" to expect same result</td>
|
|
|
|
<td> <code>var etConfig = { unselectable_css: "myclass" }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>activity_indicator_css</th>
|
|
<td> string</td>
|
|
<td> defines the css class to be applied to the table in order to indicate
|
|
server activity </td>
|
|
|
|
<td> </td>
|
|
<td> <code>var etConfig = { activity_indicator_css: "myclass" }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_server_activity_start</th>
|
|
<td> function</td>
|
|
<td> callback event function called before server activity starts (default:
|
|
null) </td>
|
|
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>row is the current row to be processed server-side</li>
|
|
</ul></td>
|
|
<td> <code>var etConfig = { on_server_activity_start: function(o, row){
|
|
alert('Row data to be processed: ' + o.Selection.GetRowValues(row)); } }</code></td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<th>on_server_activity_stop</th>
|
|
<td> function </td>
|
|
<td> callback event function called when server activity stopped (default:
|
|
null) </td>
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
|
|
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>row is the current row to be processed server-side</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = { on_server_activity_stop: function(o, row){
|
|
alert('Row data processed server-side: ' + o.Selection.GetRowValues(row));
|
|
} }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>base_path</th>
|
|
|
|
<td>string</td>
|
|
<td> defines the path to the script's directory (default: 'ezEditTable/')</td>
|
|
<td>This is used for the command editor icons' path</td>
|
|
<td> <code>var etConfig = { base_path: "myDir/" }</code></td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
</table>
|
|
<a href="javascript:window.scroll(0,0);">Top of page</a>
|
|
<hr/>
|
|
|
|
<a name="ez_selection" id="ez_selection"></a>
|
|
|
|
<h3>Selection</h3>
|
|
<table id="tblSelection" 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>
|
|
<th>selection_model</th>
|
|
<td>string</td>
|
|
<td> defines the selection model: "single" or "multiple"
|
|
(default: 'single') </td>
|
|
|
|
<td>2 possible values: 'single' or 'multiple'</td>
|
|
<td><code>var etConfig = { selection_model: 'multiple' }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>default_selection</th>
|
|
<td>string</td>
|
|
<td>defines the selection type (default: 'row')</td>
|
|
|
|
<td>3 possible values: 'row', 'cell' or 'both'</td>
|
|
<td><code>var etConfig = { default_selection: 'both' }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>key_selection</th>
|
|
<td>boolean</td>
|
|
<td>enables / disable multiple selection by using Ctrl and Shift keys
|
|
(default: true)</td>
|
|
|
|
<td>select multiple rows by holding Ctrl or Shift key down, only if
|
|
selection model is 'multiple'</td>
|
|
<td><code>var etConfig = { key_selection: false }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>select_row_at_start</th>
|
|
<td>boolean</td>
|
|
<td>first row is selected at start if set true (default: false)</td>
|
|
|
|
<td> </td>
|
|
<td><code>var etConfig = { select_row_at_start: true }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>row_index_at_start</th>
|
|
<td>number</td>
|
|
<td>defines which row has to be selected at start (default: this.startRow)</td>
|
|
|
|
<td>this.startRow = numeric parameter passed to constructor:<br>
|
|
var et = new EditTable('myTableId', <strong>3</strong>, etConfig);</td>
|
|
<td><code>var etConfig = { row_index_at_start: 3 }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>scroll_into_view</th>
|
|
|
|
<td>boolean</td>
|
|
<td>If set true selected row scrolls into view; useful when row is selected
|
|
by using keyboard (default: false)</td>
|
|
<td> </td>
|
|
<td><code>var etConfig = { scroll_into_view: true }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>active_row_css</th>
|
|
|
|
<td>string</td>
|
|
<td>defines css class for active row (default: 'ezActiveRow')</td>
|
|
<td> </td>
|
|
<td><code>var etConfig = { active_row_css: 'myClass' }</code></td>
|
|
</tr>
|
|
<tr class="newBg">
|
|
<th>selected_row_css</th>
|
|
|
|
<td>string</td>
|
|
<td>defines css class for selected rows (default: 'ezSelectedRow')</td>
|
|
<td><p>only if 'multiple' selection model is enabled</p>
|
|
</td>
|
|
<td><code>var etConfig = { selected_row_css: 'myClass' }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>active_cell_css</th>
|
|
|
|
<td>string</td>
|
|
<td> defines css class for active cell (default: 'ezActiveCell')</td>
|
|
<td>only if 'cell' or 'both' selection type is enabled</td>
|
|
<td><code>var etConfig = { active_cell_css: 'myClass' };</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>nb_rows_per_page</th>
|
|
|
|
<td>number</td>
|
|
<td> defines number of rows to jump when PgDown or PgUp keys are pressed
|
|
(default: 10) </td>
|
|
<td><p>specify a huge number to jump straight to 1st or last row (1000)</p>
|
|
</td>
|
|
<td><code>var etConfig = { nb_rows_per_page: 1000 }</code></td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
<a href="javascript:window.scroll(0,0);">Top of page</a>
|
|
<hr/>
|
|
|
|
<a name="ez_sel_events" id="ez_sel_events"></a>
|
|
<h3>Selection callback events</h3>
|
|
<table id="tblSelEvents" 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>
|
|
<th>on_selection_initialized</th>
|
|
<td>function</td>
|
|
<td>callback event function called when Selection object is initialised
|
|
(default: null) </td>
|
|
<td><p>1 parameter is passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
|
|
</ul></td>
|
|
<td><code>var etConfig = { on_selection_initialized: function(o){ alert(o.id+'
|
|
Selection object is initialised!'); } }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_before_selected_row</th>
|
|
<td>function</td>
|
|
<td>callback event function called before a row is selected (default:
|
|
null) )</td>
|
|
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>row is the current row to be selected</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = { on_before_selected_row: function(o, row){
|
|
alert('Row index: ' + row.rowIndex); } }</code></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th>on_after_selected_row</th>
|
|
<td>function</td>
|
|
<td>callback event function called after a row is selected (default:
|
|
null) </td>
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
|
|
<li>row is the current selected row</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = { on_after_selected_row: function(o, row){
|
|
alert('Row index: ' + row.rowIndex); } }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_before_selected_cell</th>
|
|
<td>function</td>
|
|
|
|
<td>callback event function called before a cell is selected (default:
|
|
null) </td>
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>cell is the current cell to be selected</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = { on_before_selected_cell: function(o, cell){
|
|
alert('Cell index: ' + cell.cellIndex); } }</code></td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<th>on_after_selected_cell</th>
|
|
<td>function</td>
|
|
<td>callback event function called (default: null) </td>
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
<ul>
|
|
|
|
<li>o is the current EditTable object</li>
|
|
<li>cell is the current selected cell</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = { on_after_selected_cell: function(o, cell){
|
|
alert('Cell index: ' + cell.cellIndex); } }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_before_deselected_row</th>
|
|
|
|
<td>function</td>
|
|
<td>callback event function called before a row is deselected (default:
|
|
null) </td>
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>row is the current row to be deselected</li>
|
|
|
|
</ul></td>
|
|
<td><code>var etConfig = { on_before_deselected_row: function(o, row){
|
|
alert('Row index: ' + row.rowIndex); } }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_after_deselected_row</th>
|
|
<td>function</td>
|
|
<td>callback event function called after a row is deselected (default:
|
|
null) </td>
|
|
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>row is the current deselected row</li>
|
|
</ul></td>
|
|
<td><code> var etConfig = { on_after_deselected_row: function(o, row){
|
|
alert('Row index: ' + row.rowIndex); } }</code></td>
|
|
|
|
</tr>
|
|
<tr class="newBg">
|
|
<th>on_before_deselected_cell</th>
|
|
<td>function</td>
|
|
<td>callback event function called before a cell is deselected (default:
|
|
null) </td>
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
<ul>
|
|
|
|
<li>o is the current EditTable object</li>
|
|
<li>cell is the current cell to be deselected</li>
|
|
</ul></td>
|
|
<td><code> var etConfig = { on_before_deselected_cell: function(o, cell){
|
|
alert('Cell index: ' + cell.cellIndex); } }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_after_deselected_cell</th>
|
|
|
|
<td>function</td>
|
|
<td>callback event function called after a cell is deselected (default:
|
|
null) </td>
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>cell is the current deselected cell</li>
|
|
|
|
</ul></td>
|
|
<td><code>var etConfig = { on_after_deselected_cell: function(o, cell){
|
|
alert('Cell index: ' + cell.cellIndex); } }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_validate_row</th>
|
|
<td>function</td>
|
|
<td>callback event function called after a row is validated by pressing enter key or on double-click (default:
|
|
null) </td>
|
|
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>row is the current validated row</li>
|
|
</ul>
|
|
<p>Note the <b>editable</b> property needs to be set to <b>false</b></p>
|
|
|
|
</td>
|
|
<td><code>var etConfig = { on_validate_row: function(o, row){
|
|
alert('Row index: ' + row.rowIndex); } }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_validate_cell</th>
|
|
<td>function</td>
|
|
<td>callback event function called after a cell is validated by pressing enter key or on double-click (default:
|
|
null) </td>
|
|
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>cell is the current validated cell</li>
|
|
</ul>
|
|
<p>Note the <b>editable</b> property needs to be set to <b>false</b></p>
|
|
|
|
</td>
|
|
<td><code>var etConfig = { on_validate_cell: function(o, cell){
|
|
alert('Cell index: ' + cell.cellIndex); } }</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<a href="javascript:window.scroll(0,0);">Top of page</a>
|
|
<hr/>
|
|
|
|
<a name="ez_editable" id="ez_editable"></a>
|
|
|
|
<h3>Editable</h3>
|
|
|
|
<table id="tblEditable" cellspacing="0" class="ezEditableTable" >
|
|
<thead>
|
|
<tr>
|
|
<th width="193" >Property</th>
|
|
<th width="52" >Type</th>
|
|
<th width="239" >Description</th>
|
|
|
|
<th width="154" >Remarks</th>
|
|
<th width="185" >Example</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th>editor_model</th>
|
|
<td>string</td>
|
|
|
|
<td>defines the editor model (default: 'cell')</td>
|
|
<td>2 possible values: 'cell' or 'row'</td>
|
|
<td><code>var etConfig = { editor_model: 'row' }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th height="178">open_editor_action</th>
|
|
<td>string</td>
|
|
|
|
<td>defines which mouse action opens the inline editing feature (default:
|
|
'dblclick') </td>
|
|
<td>2 possible values: 'dblclick', 'click'</td>
|
|
<td><code>var etConfig = { open_editor_action: 'click' }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>ajax <sup>new</sup></th>
|
|
<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>var etConfig = { editable: true, ajax: false }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>cell_editors</th>
|
|
<td>array</td>
|
|
<td>array defining the editor configuration for each column (default:
|
|
[]) </td>
|
|
<td>the number of editors must be equal to the number of columns. Refer
|
|
to <a href="#ez_cell_editors">Cell editors properties</a> for details
|
|
about editors' configuration</td>
|
|
<td><p><code>var etConfig = { cell_editors: [<br>
|
|
{ type: 'select' },<br>
|
|
{ type: 'textarea' },<br>
|
|
{ type: 'input' },<br>
|
|
{ type: 'uploader' },<br>
|
|
{ type: 'none' }, <br>
|
|
{ type: 'command' }<br>
|
|
] }</code></p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>input_editor_css</th>
|
|
|
|
<td>string</td>
|
|
<td>defines the css class for 'input' type editors (default: 'ezInputEditor')</td>
|
|
<td> </td>
|
|
<td><code>var etConfig = { input_editor_css: 'myClass' };</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>textarea_editor_css</th>
|
|
|
|
<td>string</td>
|
|
<td>defines the css class for 'textarea' type editors (default: 'ezTextAreaEditor')</td>
|
|
<td> </td>
|
|
<td><code>var etConfig = { textarea_editor_css: 'myClass' };</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>select_editor_css</th>
|
|
<td>string</td>
|
|
<td>defines the css class for 'input' type editors (default: 'ezSelectEditor')</td>
|
|
<td> </td>
|
|
<td><code>var etConfig = { select_editor_css: 'myClass' };</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>command_editor_css</th>
|
|
|
|
<td>string</td>
|
|
<td>css class applied to command editor buttons container (default:
|
|
'ezCommandEditor')</td>
|
|
<td> </td>
|
|
<td><code>var etConfig = { command_editor_css: 'myClass' };</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>modified_cell_css</th>
|
|
<td>string</td>
|
|
<td>css class applied to modified cells (default: 'ezModifiedCell')</td>
|
|
<td>this css class shows the green small triangle in the left-upper
|
|
corner of the cell</td>
|
|
<td><code>var etConfig = { modified_cell_css: 'myClass' };</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>auto_save</th>
|
|
<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>var etConfig = { auto_save: false };</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>auto_save_model</th>
|
|
<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>var etConfig = { auto_save_model: 'cell' };</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>auto_save_type</th>
|
|
<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>var etConfig = { auto_save_type: 'update' };</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>editable_on_keystroke <sup>new</sup></th>
|
|
<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>var etConfig = { editable: true, editable_on_keystroke: true };</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>new_row_prefix</th>
|
|
<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>var etConfig = { new_row_prefix: 'row' };</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>form_submit_interval</th>
|
|
<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 / network
|
|
security policies, multiple submissions to same page are blocked by the server.
|
|
This interval can be useful to fine tune the form submissions when those server restrictions apply.</td>
|
|
<td><code>var etConfig = { form_submit_interval: 750 };</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>new_row_pos <sup>new</sup></th>
|
|
<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>var etConfig = { new_row_pos: 'bottom' };</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<a href="javascript:window.scroll(0,0);">Top of page</a>
|
|
<hr/>
|
|
|
|
<a name="ez_cell_editors" id="ez_cell_editors"></a>
|
|
<h3>Cell editors</h3>
|
|
<table id="tblCellEditors" 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>
|
|
<th>type</th>
|
|
<td>string</td>
|
|
<td>sets the editor type (default: 'input')</td>
|
|
<td>these are the editor types: 'none', 'input', 'textarea', 'select',
|
|
'multiple', 'boolean', 'command', 'custom', 'uploader'</td>
|
|
<td><code> var etConfig = { cell_editors: [<br>
|
|
{ type: 'select' },<br>
|
|
{ type: 'textarea' },<br>
|
|
{ type: 'input' },<br>
|
|
{ type: 'uploader' },<br>
|
|
{ type: 'none' }, <br>
|
|
{ type: 'command' }<br>
|
|
]}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>css</th>
|
|
<td>string</td>
|
|
<td>defines a css class for the editor (default: null)</td>
|
|
<td> </td>
|
|
<td><code> var etConfig = { cell_editors: [<br>
|
|
{ type: 'select', css:'myClass' },...<br>
|
|
]}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>attributes</th>
|
|
<td>array</td>
|
|
<td> defines the additional attributes for the editor's DOM element
|
|
(default: null)</td>
|
|
<td>useful for specifying the max length of characters for input and
|
|
textarea types</td>
|
|
<td><code>var etConfig = { cell_editors: [<br>
|
|
|
|
{ type: 'input', attributes:[['maxLength',5],['title','5 chars max']]
|
|
},...<br>
|
|
]}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>style</th>
|
|
<td>string</td>
|
|
<td>sets the inline style for the editor's DOM element (default: null)</td>
|
|
|
|
<td> </td>
|
|
<td><code>var etConfig = { cell_editors: [<br>
|
|
{ type: 'textarea', style: 'background-color:#fff;' },...<br>
|
|
]}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>custom_slc_options</th>
|
|
<td>array</td>
|
|
<td>defines the options of a 'select' editor type (default: null)</td>
|
|
<td>this property applies only to 'select' and 'multiple' editors {
|
|
type: 'multiple', custom_slc_options:['a','b','c'], sort_slc_options:
|
|
'string', values_separator: ', ' },</td>
|
|
<td><code>var etConfig = { cell_editors: [<br>
|
|
{ type: 'select', custom_slc_options:['a','b','c'] },...<br>
|
|
]}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>custom_slc_values</th>
|
|
<td>array</td>
|
|
<td>defines the options values of a 'select' editor type (default: null)</td>
|
|
<td>this property applies only to 'select' and 'multiple' editors {
|
|
type: 'multiple', custom_slc_options:['a','b','c'], custom_slc_values:['1','2','3'], sort_slc_options:
|
|
'string', values_separator: ', ' },</td>
|
|
<td><code>var etConfig = { cell_editors: [<br>
|
|
{ type: 'select', custom_slc_options:['a','b','c'], custom_slc_values:['1','2','3'] },...<br>
|
|
]}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>sort_slc_options</th>
|
|
<td>string</td>
|
|
<td>sorts the custom options (default: null)</td>
|
|
<td><p>this property applies only to 'select' and 'multiple' editors.
|
|
3 possible values:</p>
|
|
<ul>
|
|
|
|
<li>'string': sorts string values </li>
|
|
<li>'numasc': sorts numeric values in ascending manner</li>
|
|
<li>'numdesc': sorts numeric values in descending manner</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = { cell_editors: [<br>
|
|
{ type: 'select', custom_slc_options:['a','b','c'], sort_slc_options:
|
|
'string' },...<br>
|
|
]}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>values_separator</th>
|
|
<td>string</td>
|
|
<td>defines the value separator for 'multiple' type editors (default:
|
|
', ') </td>
|
|
<td>this property applies only to 'multiple' editors</td>
|
|
|
|
<td><code>var etConfig = { cell_editors: [<br>
|
|
{ type: 'multiple', custom_slc_options:['a','b','c'], sort_slc_options:
|
|
'string', values_separator: '; ' },...<br>
|
|
]}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>allow_empty_value</th>
|
|
<td>boolean</td>
|
|
|
|
<td>defines the columns accepting empty values (default: false)</td>
|
|
<td></td>
|
|
<td><code>var etConfig = { cell_editors: [<br>
|
|
{ type: 'input', allow_empty_value:true },...<br>
|
|
]}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>target</th>
|
|
<td>string</td>
|
|
<td>defines the custom editor target element id (default: 'null')</td>
|
|
<td>this property applies only to 'custom' editors</td>
|
|
<td><code>var etConfig = { cell_editors: [<br>
|
|
{ type: 'custom', target: 'datePick' },...<br>
|
|
]}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>command_column_index</th>
|
|
<td>number</td>
|
|
<td>tells the script in which column command buttons have to be generated
|
|
(default: this.nbCells-1)</td>
|
|
<td>this property applies only to 'command' editors. Default value is
|
|
the last column of the table</td>
|
|
<td><code>var etConfig = { cell_editors: [<br>
|
|
{ type: 'command', command_column_index: 4 },...<br>
|
|
]}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>buttons</th>
|
|
<td>object</td>
|
|
<td><p>this literal object is the configuration object of the command
|
|
buttons generated in column (default: {})</p></td>
|
|
<td>this property applies only to 'command' editors. Refer to <a href="#ez_command_btns">Command
|
|
buttons properties</a> for details about 'command' editor buttons
|
|
configuration</td>
|
|
<td><p><code>var etConfig = { cell_editors: [<br>
|
|
{ type: 'command', command_column_index: 4,<br>
|
|
buttons:{ <br>
|
|
enable: ['update', 'insert', 'delete', 'submit', 'cancel'], <br>
|
|
'update': { title:'Edit row' },<br>
|
|
'insert': { title:'Add row', scrollIntoView: false },<br>
|
|
'delete': { title:'Delete row' },<br>
|
|
'submit': { text:'Save', title:'Save' },<br>
|
|
'cancel': { text:'Cancel', title:'Cancel' } }<br>
|
|
},...<br>
|
|
|
|
]}</code></p></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<a href="javascript:window.scroll(0,0);">Top of page</a>
|
|
<hr/>
|
|
|
|
<a name="ez_command_btns" id="ez_command_btns"></a>
|
|
<h3>Command buttons</h3>
|
|
|
|
<table id="tblCommandBtns" 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>
|
|
<th>enable</th>
|
|
<td>array</td>
|
|
<td>enables the command buttons to be generated (default: ['update',
|
|
'insert', 'delete', 'submit', 'cancel'])</td>
|
|
|
|
<td>command buttons types: 'update', 'insert', 'delete', 'submit', 'cancel'.
|
|
To disable a particular button remove it from the array</td>
|
|
<td><code>var etConfig = { cell_editors: [<br>
|
|
{ type: 'command', command_column_index: 4,<br>
|
|
buttons:{ <br>
|
|
enable: ['update', 'submit', 'cancel'], <br>
|
|
'update': { title:'Edit row' },<br>
|
|
|
|
'submit': { text:'Save', title:'Save' },<br>
|
|
'cancel': { text:'Cancel', title:'Cancel' } }<br> },...<br>
|
|
]}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>update</th>
|
|
|
|
<td>object</td>
|
|
<td>configuration object of the 'update' button (default: {})</td>
|
|
<td><p>Below a list of the properties for the 'update' button:</p>
|
|
<ul>
|
|
<li>'text': text of the button (default: '')</li>
|
|
<li>'icon': icon image html (default: '<img src="'+this.basePath+'themes/icn_edit.gif"
|
|
alt="" />')</li>
|
|
|
|
<li>'title': tooltip for the button (default: 'Edit record')</li>
|
|
<li>'css': additional css class (default: null)</li>
|
|
<li>'style': inline style element (default: null)</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = { cell_editors: [<br>
|
|
{ type: 'command', command_column_index: 4,<br>
|
|
|
|
buttons:{ <br>
|
|
enable: ['update'], <br>
|
|
'update': { text:'Edit', title:'Edit row', css:'myClass'}</code><code>},...</code><code><br>
|
|
]}</code></td>
|
|
</tr>
|
|
<tr class="newBg">
|
|
<th>insert</th>
|
|
<td>object</td>
|
|
<td> configuration object of the 'insert' button (default: {})</td>
|
|
<td><p>Below a list of the properties for the 'insert' button:</p>
|
|
<ul>
|
|
<li>'text': text of the button (default: '')</li>
|
|
<li>'icon': icon image html (default: '<img src="'+this.basePath+'themes/icn_edit.gif"
|
|
alt="" />')</li>
|
|
|
|
<li>'title': tooltip for the button (default: 'Create record')</li>
|
|
<li>'css': additional css class (default: null)</li>
|
|
<li>'style': inline style element (default: null)</li>
|
|
<li>'scrollIntoView': scrolls into view inserted row (default: false)</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = { cell_editors: [<br>
|
|
{ type: 'command', command_column_index: 4,<br>
|
|
buttons:{ <br>
|
|
enable: ['insert'], <br>
|
|
'insert': { text:'Add', title:'Add row', css:'myClass'}</code><code>},...</code><code><br>
|
|
]}</code></td>
|
|
</tr>
|
|
|
|
<tr class="newBg">
|
|
<th>delete</th>
|
|
<td>object</td>
|
|
<td>configuration object of the 'delete' button (default: {})</td>
|
|
<td><p>Below a list of the properties for the 'delete' button:</p>
|
|
<ul>
|
|
<li>'text': text of the button (default: '')</li>
|
|
|
|
<li>'icon': icon image html (default: '<img src="'+this.basePath+'themes/icn_edit.gif"
|
|
alt="" />')</li>
|
|
<li>'title': tooltip for the button (default: 'Delete record')</li>
|
|
<li>'css': additional css class (default: null)</li>
|
|
<li>'style': inline style element (default: null)</li>
|
|
|
|
</ul></td>
|
|
<td><code>var etConfig = { cell_editors: [<br>
|
|
{ type: 'command', command_column_index: 4,<br>
|
|
buttons:{ <br>
|
|
enable: ['delete'], <br>
|
|
'delete': { text:'Remove', title:'Remove row', css:'myClass'}</code><code>},...</code><code><br>
|
|
|
|
]}</code></td>
|
|
</tr>
|
|
<tr class="newBg">
|
|
<th>submit</th>
|
|
<td>object</td>
|
|
<td>configuration object of the 'submit' button (default: {})</td>
|
|
<td><p>Below a list of the properties for the 'submit' button:</p>
|
|
<ul>
|
|
<li>'text': text of the button (default: 'Submit')</li>
|
|
<li>'icon': icon image html (default: '<img src="'+this.basePath+'themes/icn_edit.gif"
|
|
alt="" />')</li>
|
|
<li>'title': tooltip for the button (default: 'Submit record')</li>
|
|
|
|
<li>'css': additional css class (default: null)</li>
|
|
<li>'style': inline style element (default: null)</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = { cell_editors: [<br>
|
|
{ type: 'command', command_column_index: 4,<br>
|
|
buttons:{ <br>
|
|
|
|
enable: ['submit'], <br>
|
|
'submit': { text:'Save', title:'Save row', css:'myClass'}</code><code>},...</code><code><br>
|
|
]}</code></td>
|
|
</tr>
|
|
<tr class="newBg">
|
|
<th>cancel</th>
|
|
<td>object</td>
|
|
|
|
<td>configuration object of the 'cancel' button (default: {})</td>
|
|
<td><p>Below a list of the properties for the 'cancel' button:</p>
|
|
<ul>
|
|
<li>'text': text of the button (default: 'Cancel')</li>
|
|
<li>'icon': icon image html (default: '<img src="'+this.basePath+'themes/icn_edit.gif"
|
|
alt="" />')</li>
|
|
|
|
<li>'title': tooltip for the button (default: 'Cancel')</li>
|
|
<li>'css': additional css class (default: null)</li>
|
|
<li>'style': inline style element (default: null)</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = { cell_editors: [<br>
|
|
{ type: 'command', command_column_index: 4,<br>
|
|
|
|
buttons:{ <br>
|
|
enable: ['cancel'], <br>
|
|
'cancel': { css:'myClass'}</code><code>},...</code><code><br>
|
|
]}</code></td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
</table>
|
|
<a href="javascript:window.scroll(0,0);">Top of page</a>
|
|
<hr/>
|
|
|
|
<a name="ez_uploader" id="ez_uploader"></a>
|
|
<h3>Uploader editor</h3>
|
|
<table id="tblUploader" 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>
|
|
<th>uploader</th>
|
|
<td>object</td>
|
|
<td>defines the uploader editor settings (default: {})</td>
|
|
<td> </td>
|
|
<td><code>...cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: { uri: 'php/uploadFile.php', path: 'images/uploads/', max_file_size: '51200', show_link: false }
|
|
},...
|
|
]
|
|
</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>uri</th>
|
|
<td>string</td>
|
|
<td>defines the URL of the resource performing the upload operation (default: null)</td>
|
|
<td> </td>
|
|
<td><code>...cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: { uri: 'php/uploadFile.php' }
|
|
},...
|
|
]
|
|
</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>path</th>
|
|
<td>string</td>
|
|
<td>defines the path to the uploads folder repository (default: null)</td>
|
|
<td> </td>
|
|
<td><code>...cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: { path: 'images/uploads/' }
|
|
},...
|
|
]
|
|
</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>show_upload</th>
|
|
<td>boolean</td>
|
|
<td>shows or hides uploaded file (default: true)</td>
|
|
<td> </td>
|
|
<td><code>...cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: { show_upload: false }
|
|
},...
|
|
]
|
|
</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>sql_field</th>
|
|
<td>string</td>
|
|
<td>defines the name of the SQL field name storing upload filename (default: 'IMAGENAME')</td>
|
|
<td>optional depending on how the upload server-side operation is implemented.
|
|
On the script's website, the name of the SQL field storing the filename is rerquired by the PHP resource.
|
|
This does not mean that it is a good practice, it is just for demoing purposes.</td>
|
|
<td><code>...cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: { sql_field: 'FILENAME' }
|
|
},...
|
|
]
|
|
</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>record_id_column_index</th>
|
|
<td>number</td>
|
|
<td>tells the script which is the index of the column containing the record id (default: null)</td>
|
|
<td>optional depending on how the id of a record is used in the HTML table.
|
|
If this property is defined, the script will use it in order to retrieve the
|
|
record id of working row. Otherwise, it will extract it from the id of the
|
|
working row, by default 'tr'+Id.
|
|
</td>
|
|
<td><code>...cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: { record_id_column_index: 0 }
|
|
},...
|
|
]
|
|
</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>show_link</th>
|
|
<td>boolean</td>
|
|
<td>Uploaded file appears as a link in the uploader box and in the cell if set true (default: true)</td>
|
|
<td> </td>
|
|
<td><code>...cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: { show_link: false }
|
|
},...
|
|
]
|
|
</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>link_css</th>
|
|
<td>string</td>
|
|
<td>defines the css class for the upload link (default: '')</td>
|
|
<td> </td>
|
|
<td><code>...cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: { show_link: true, link_css: 'myClass' }
|
|
},...
|
|
]
|
|
</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>loader_image</th>
|
|
<td>string</td>
|
|
<td>defines the path of the loader image displayed during the upload operation (default: this.basePath + 'themes/img_loader.gif')</td>
|
|
<td> </td>
|
|
<td><code>...cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: { loader_image: 'myFolder/loader.gif' }
|
|
},...
|
|
]
|
|
</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>ok_image</th>
|
|
<td>string</td>
|
|
<td>sets the path of the image used to notify users that cell contains an uploaded file (default: this.basePath + 'themes/img_loader.gif')</td>
|
|
<td>If <code>show_upload</code> is active and <code>show_link</code> property is set false this property applies.</td>
|
|
<td><code>...cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: { ok_image: 'myFolder/ok.gif' }
|
|
},...
|
|
]
|
|
</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>max_file_size</th>
|
|
<td>number</td>
|
|
<td>sets the maximum file size allowed, default value is 100Kb (default: 102400)</td>
|
|
<td>Optional depending on the server-side implementation. This value is passed to the server in the online script's demos.</td>
|
|
<td><code>...cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: { max_file_size: 51200 }
|
|
},...
|
|
]
|
|
</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>valid_extensions</th>
|
|
<td>string</td>
|
|
<td>sets a list of comma separated file extensions to pass to the server logic (default: 'jpg, jpeg, gif, png')</td>
|
|
<td>Optional depending on the server-side implementation. This value is passed to the server in the online script's demos.</td>
|
|
<td><code>...cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: { valid_extensions: 'doc,docx,pdf,rtf' }
|
|
},...
|
|
]
|
|
</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>css</th>
|
|
<td>string</td>
|
|
<td>defines the css class applied to the uploader container element (default: 'ezUploaderEditor')</td>
|
|
<td></td>
|
|
<td><code>...cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: { css: 'myClass' }
|
|
},...
|
|
]
|
|
</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>output_css</th>
|
|
<td>string</td>
|
|
<td>defines the css class applied to the uploader output messages container (default: 'ezUploaderEditorOutput')</td>
|
|
<td></td>
|
|
<td><code>...cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: { output_css: 'myClass' }
|
|
},...
|
|
]
|
|
</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>display_css</th>
|
|
<td>string</td>
|
|
<td>defines the css class applied to the image displayer container (default: 'ezUploaderEditorOutput')</td>
|
|
<td></td>
|
|
<td><code>...cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: { output_css: 'myClass' }
|
|
},...
|
|
]
|
|
</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>javascript_code_success</th>
|
|
<td>string</td>
|
|
<td>defines javascript code to be injected by the server after a successfull upload operation
|
|
(default: '<script>window.parent["{1}"].SetUploadSuccess(true); window.parent["{1}"].SetUploadName("{0}");' +
|
|
'window.parent["{1}"].ShowUpload();</script>')</td>
|
|
<td>Optional depending on server-side implementation. This value is passed to the server in the online script's demos.</td>
|
|
<td><code>...cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: { javascript_code_success: '<script>alert('Upload name: {0}');</script>' }
|
|
},...
|
|
]
|
|
</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<a href="javascript:window.scroll(0,0);">Top of page</a>
|
|
<hr/>
|
|
|
|
<a name="ez_editable_events" id="ez_editable_events"></a>
|
|
<h3>Editable and cell editors callback events and delegates</h3>
|
|
|
|
<table id="tblEditEvents" 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>
|
|
<th>on_editable_initialized</th>
|
|
<td>function</td>
|
|
<td>callback event function called when Editable object is initialised
|
|
(default: null)</td>
|
|
<td><p>1 parameter is passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
|
|
</ul></td>
|
|
<td><code> var etConfig = { on_editable_initialized: function(o){ alert(o.id+
|
|
' Editable object is initialised!'); } }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_before_open_editor</th>
|
|
<td>function</td>
|
|
<td>callback event function called before a cell editor is opened
|
|
(default: null)
|
|
</td>
|
|
|
|
<td><p>3 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>cell is the current cell</li>
|
|
<li>editor is the current opened editor</li>
|
|
</ul></td>
|
|
<td><code> var etConfig = { on_before_open_editor: function(o, cell,
|
|
editor){ cell.style.backgroundColor = 'pink'; } }</code></td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<th>on_after_open_editor</th>
|
|
<td>function</td>
|
|
<td> callback event function called after a cell editor is opened (default:
|
|
null)</td>
|
|
<td><p>3 parameters are passed to the function:</p>
|
|
<ul>
|
|
|
|
<li>o is the current EditTable object</li>
|
|
<li>cell is the current cell</li>
|
|
<li>editor is the current opened editor</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = { on_after_open_editor: function(o, cell, editor){
|
|
cell.style.backgroundColor = 'transparent'; } }</code></td>
|
|
</tr>
|
|
<tr>
|
|
|
|
<th>on_before_close_editor</th>
|
|
<td>function</td>
|
|
<td>callback event function called before a cell editor is closed (default:
|
|
null)</td>
|
|
<td><p>3 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
|
|
<li>cell is the current cell</li>
|
|
<li>editor is the current opened editor</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = { on_before_close_editor: function(o, cell,
|
|
editor){ cell.style.backgroundColor = 'pink'; } }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_after_close_editor</th>
|
|
|
|
<td>function</td>
|
|
<td>callback event function called after a cell editor is closed (default:
|
|
null)</td>
|
|
<td><p>3 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>cell is the current cell</li>
|
|
|
|
<li>editor is the current opened editor</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = { on_after_close_editor: function(o, cell,
|
|
editor){ cell.style.backgroundColor = 'transparent'; } }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>set_custom_editor_value</th>
|
|
<td>function</td>
|
|
|
|
<td>delegate function called to set 'custom' editor value (default:
|
|
null)</td>
|
|
<td><p>4 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>editor is the current opened editor</li>
|
|
<li>colIndex is the column index</li>
|
|
|
|
<li>val is the value to set in the custom editor</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = { set_custom_editor_value: function(o, editor,
|
|
colIndex, val){ alert('Value to set in custom editor:' + val); } }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>get_custom_editor_value</th>
|
|
<td>function</td>
|
|
|
|
<td>delegate function called to get 'custom' editor value (default:
|
|
null)</td>
|
|
<td><p>3 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>editor is the current opened editor</li>
|
|
<li>colIndex is the column index</li>
|
|
|
|
</ul></td>
|
|
<td><code>var etConfig = { get_custom_editor_value: function(o, editor,
|
|
colIndex){ alert('Call function to retrieve custom editor value for
|
|
column '+colIndex); } }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>set_cell_modified_value</th>
|
|
<td>function</td>
|
|
<td>delegate function called to write modified value in cell (default:
|
|
null)</td>
|
|
|
|
<td><p>3 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>cell is the current cell</li>
|
|
<li>val is the value to write in the cell</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = { set_cell_modified_value: function(o, cell,
|
|
val){ alert('This value has to be written in the cell: ' + val); }
|
|
}</code></td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<th>validate_modified_value</th>
|
|
<td>function</td>
|
|
<td>delegate function called to validate modified value to be written
|
|
in cell (default: null)</td>
|
|
<td><p>3 parameters are passed to the function:</p>
|
|
<ul>
|
|
|
|
<li>o is the current EditTable object</li>
|
|
<li> colIndex is the column index</li>
|
|
<li> cellVal is the cell value</li>
|
|
<li>edtVal is the editor value</li>
|
|
<li>cell is the current cell</li>
|
|
|
|
<li>editor is the current editor</li>
|
|
</ul>
|
|
<p>The validation delegate must return a boolean</p></td>
|
|
<td><code>var etConfig = { validate_modified_value: function(o, colIndex,
|
|
cellVal, edtVal, cell, editor){ alert('Validation function returns
|
|
a boolean'); } }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>open_custom_editor</th>
|
|
|
|
<td>function</td>
|
|
<td>delegate function called to open 'custom' editor (default: null)</td>
|
|
<td><p>3 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>cell is the current cell</li>
|
|
|
|
<li>editor is the current opened editor</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = { open_custom_editor: function(o, cell, editor){
|
|
alert('Custom editor for column '+cell.cellIndex+' is being opened!');
|
|
} }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>close_custom_editor</th>
|
|
<td>function</td>
|
|
|
|
<td>delegate function called to close 'custom' editor (default: null)</td>
|
|
<td><p>3 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>cell is the current cell</li>
|
|
<li>editor is the current opened editor</li>
|
|
|
|
</ul></td>
|
|
<td><code>var etConfig = { close_custom_editor: function(o, cell, editor){
|
|
alert('Custom editor for column '+cell.cellIndex+' is closed!'); }
|
|
}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>show_upload</th>
|
|
<td>function</td>
|
|
<td>delegate function called by uploader editor to display uploaded file (default: null)</td>
|
|
<td><p>4 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>divUplDisplay is the container element containing the upload</li>
|
|
<li>uploadName is the filename of the uploaded file</li>
|
|
<li>path is the upload path</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = {
|
|
cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: {
|
|
show_upload: function(o, divUplDisplay, uploadName, path){
|
|
divUplDisplay.style.display = '';
|
|
divUplDisplay.innerHTML = uploadName;
|
|
}
|
|
}
|
|
}]
|
|
}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_before_open</th>
|
|
<td>function</td>
|
|
<td>callback called before uploader editor is opened (default: null)</td>
|
|
<td><p>3 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>editor is the current opened uploader editor</li>
|
|
<li>cell is the current cell</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = {
|
|
cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: {
|
|
on_before_open: function(o, editor, cell){
|
|
alert('uploader is going to be opened');
|
|
}
|
|
}
|
|
}]
|
|
}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_after_open</th>
|
|
<td>function</td>
|
|
<td>callback called after uploader editor is opened (default: null)</td>
|
|
<td><p>3 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>editor is the current opened uploader editor</li>
|
|
<li>cell is the current cell</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = {
|
|
cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: {
|
|
on_after_open: function(o, editor, cell){
|
|
alert('uploader is opened now');
|
|
}
|
|
}
|
|
}]
|
|
}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_before_close</th>
|
|
<td>function</td>
|
|
<td>callback called before uploader editor is closed (default: null)</td>
|
|
<td><p>3 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>editor is the current opened uploader editor</li>
|
|
<li>cell is the current cell</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = {
|
|
cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: {
|
|
on_before_close: function(o, editor, cell){
|
|
alert('uploader is going to be closed');
|
|
}
|
|
}
|
|
}]
|
|
}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_after_close</th>
|
|
<td>function</td>
|
|
<td>callback called after uploader editor is closed (default: null)</td>
|
|
<td><p>3 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>editor is the current opened uploader editor</li>
|
|
<li>cell is the current cell</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = {
|
|
cell_editors:[
|
|
{
|
|
type: 'uploader',
|
|
uploader: {
|
|
on_after_close: function(o, editor, cell){
|
|
alert('uploader is closed now');
|
|
}
|
|
}
|
|
}]
|
|
}</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<a href="javascript:window.scroll(0,0);">Top of page</a>
|
|
<hr/>
|
|
|
|
<a name="ez_actions" id="ez_actions"></a>
|
|
<h3>Actions</h3>
|
|
|
|
|
|
<table id="tblActions" 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>
|
|
<th>actions</th>
|
|
<td>object</td>
|
|
<td>server actions configuration object (default: {}) </td>
|
|
|
|
<td> </td>
|
|
<td><p><code> var etConfig = {<br>
|
|
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>
|
|
}<br>
|
|
|
|
</code><code>}</code></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>update</th>
|
|
<td> object</td>
|
|
<td>'update' action configuration object (default: {})</td>
|
|
|
|
<td><p>Below the list of properties for the 'update' actions:</p>
|
|
<ul>
|
|
<li>uri: server-side page</li>
|
|
<li>form_method: 2 possible values 'form' or 'script'</li>
|
|
<li>submit_method: 'POST' or 'GET' requests, if form_method is script
|
|
only GET requests</li>
|
|
<li>param_names: collection of parameters expected by the server-side
|
|
page (uri property)</li>
|
|
|
|
</ul></td>
|
|
<td><code> var etConfig = {<br>
|
|
actions:{<br>
|
|
'update': { <br>
|
|
uri: 'updateRow.php', submit_method: 'form', form_method: 'POST',
|
|
<br>
|
|
param_names: ['iso', 'name', 'printablename', 'iso3', 'code'] } }<br>
|
|
|
|
</code><code>}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>insert</th>
|
|
<td>object</td>
|
|
<td> 'insert' action configuration object (default: {})</td>
|
|
<td><p>Below the list of properties for the 'insert' actions:</p>
|
|
|
|
<ul>
|
|
<li>uri: server-side page</li>
|
|
<li>form_method: 2 possible values 'form' or 'script'</li>
|
|
<li>submit_method: 'POST' or 'GET' requests, if form_method is script
|
|
only GET requests</li>
|
|
<li>param_names: collection of parameters expected by the server-side
|
|
page (uri property)</li>
|
|
<li>default_record: collection of values to add when a row is added
|
|
to table (insert command button)</li>
|
|
|
|
</ul></td>
|
|
<td><p><code>var etConfig = {<br>
|
|
actions:{<br>
|
|
'insert': { <br>
|
|
uri: 'insertRow.php', submit_method: 'form', form_method: 'POST',
|
|
<br>
|
|
param_names: ['iso', 'name', 'printablename', 'iso3', 'code'],<br>
|
|
|
|
default_record: ['', 'New country', 'New country', 'XXX', '0']</code><code>}
|
|
}<br>
|
|
</code><code>}</code></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>delete</th>
|
|
<td>object</td>
|
|
|
|
<td>'delete' action configuration object (default: {})</td>
|
|
<td><p>Below the list of properties for the 'update' actions:</p>
|
|
<ul>
|
|
<li>uri: server-side page</li>
|
|
<li>form_method: 2 possible values 'form' or 'script'</li>
|
|
<li>submit_method: 'POST' or 'GET' requests, if form_method is script
|
|
only GET requests</li>
|
|
|
|
<li>param_names: collection of parameters expected by the server-side
|
|
page (uri property)</li>
|
|
<li>bulk_delete: enables multiple rows deletion operations</li>
|
|
</ul></td>
|
|
<td><code>var etConfig = {<br>
|
|
actions:{<br>
|
|
'delete': { <br>
|
|
|
|
uri: 'script.delete.php', submit_method: 'script', bulk_delete: true
|
|
} } </code><code>}</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<a name="ez_actions_events" id="ez_actions_events"></a>
|
|
<h3>Actions callback events</h3>
|
|
|
|
<table id="tblActionsEvents" 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>
|
|
<th>on_update_submit</th>
|
|
<td>function</td>
|
|
<td>delegate function called for submitting modified data to server
|
|
(default: null) </td>
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>treated rows: array of modified rows objects</li>
|
|
</ul></td>
|
|
<td><p><code> <br>
|
|
var etConfig = {<br>
|
|
</code><code>actions:{<br>
|
|
|
|
'update': { <br>
|
|
uri: 'updateRow.php', submit_method: 'form', form_method: 'POST',
|
|
<br>
|
|
on_update_submit: function(o, treatedRows){ alert(treatedRows);
|
|
}<br>
|
|
} } } }</code></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_insert_submit</th>
|
|
|
|
<td> function</td>
|
|
<td> delegate function called for submitting inserted data to server
|
|
(default: null) </td>
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>treated rows: array of inserted rows objects</li>
|
|
|
|
</ul></td>
|
|
<td><code> var etConfig = { <br>
|
|
actions:{<br>
|
|
'insert': { <br>
|
|
uri: 'insertRow.php', submit_method: 'form', form_method: 'POST',
|
|
<br>
|
|
on_insert_submit: function(o, treatedRows){ alert(treatedRows); }<br>
|
|
|
|
} } } }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_delete_submit</th>
|
|
<td>function</td>
|
|
<td> delegate function called for submitting deleted data to server
|
|
(default: null) </td>
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>treated rows: array of deleted rows objects</li>
|
|
</ul></td>
|
|
<td> <code><br>
|
|
var etConfig = { <br>
|
|
actions:{<br>
|
|
|
|
'delete': { <br>
|
|
uri: 'script.delete.php', submit_method: 'script', bulk_delete: false,<br>
|
|
on_delete_submit: function(o, treatedRows){ alert(treatedRows); }<br>
|
|
} } } }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_before_submit</th>
|
|
|
|
<td> function</td>
|
|
<td> callback function called before data is sent to server (default:
|
|
null)</td>
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>treated rows: array of modified rows objects</li>
|
|
|
|
</ul></td>
|
|
<td> <p><code>var etConfig = { <br>
|
|
actions:{<br>
|
|
'update': { <br>
|
|
uri: 'updateRow.php', submit_method: 'form', form_method: 'POST',<br>
|
|
on_before_submit: function(o, modifiedRows){ alert('before update');
|
|
}<br>
|
|
|
|
},<br>
|
|
'insert': { <br>
|
|
uri: 'insertRow.php', submit_method: 'form', form_method: 'POST',
|
|
<br>
|
|
on_before_submit: function(o, modifiedRows){ alert('before insert');
|
|
}<br>
|
|
},<br>
|
|
'delete': { <br>
|
|
|
|
uri: 'script.delete.php', submit_method: 'script', bulk_delete:
|
|
false,<br>
|
|
on_before_submit: function(o, modifiedRows){ alert('before delete');
|
|
} } </code><code>} }</code></p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_after_submit</th>
|
|
<td> function</td>
|
|
|
|
<td> callback function called after data is sent to server (default:
|
|
null)</td>
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>treated rows: array of modified rows objects</li>
|
|
</ul> </td>
|
|
|
|
<td> <code>var etConfig = { <br>
|
|
actions:{<br>
|
|
'update': { <br>
|
|
uri: 'updateRow.php', submit_method: 'form', form_method: 'POST',<br>
|
|
on_after_submit: function(o, modifiedRows){ alert('before update');
|
|
}<br>
|
|
},<br>
|
|
|
|
'insert': { <br>
|
|
uri: 'insertRow.php', submit_method: 'form', form_method: 'POST',
|
|
<br>
|
|
on_after_submit: function(o, modifiedRows){ alert('before insert');
|
|
}<br>
|
|
},<br>
|
|
'delete': { <br>
|
|
uri: 'script.delete.php', submit_method: 'script', bulk_delete: false,<br>
|
|
|
|
on_after_submit: function(o, modifiedRows){ alert('before delete');
|
|
} } </code><code>}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>on_submit_error</th>
|
|
<td> function</td>
|
|
<td> callback function called when error occurs when data is sent to
|
|
server (default: null)</td>
|
|
|
|
<td><p>2 parameters are passed to the function:</p>
|
|
<ul>
|
|
<li>o is the current EditTable object</li>
|
|
<li>e is the error object</li>
|
|
<li>desc is the error object description</li>
|
|
</ul> </td>
|
|
|
|
<td>
|
|
<pre>
|
|
var etConfig = {
|
|
actions: {
|
|
'update': {
|
|
uri: 'updateRow.php',
|
|
submit_method: 'form',
|
|
form_method: 'POST',
|
|
on_submit_error: function (o, e, desc) {
|
|
alert('An error occured');
|
|
}
|
|
},
|
|
'insert': {
|
|
|
|
uri: 'insertRow.php',
|
|
submit_method: 'form',
|
|
form_method: 'POST',
|
|
|
|
on_submit_error: function (o, e, desc) {
|
|
alert('An error occured');
|
|
}
|
|
},
|
|
'delete': {
|
|
uri: 'script.delete.php',
|
|
submit_method: 'script',
|
|
bulk_delete: false,
|
|
on_submit_error: function (o, e, desc) {
|
|
alert('An error occured');
|
|
}
|
|
}
|
|
}
|
|
</pre>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>check_response_sanity <sup>new</sup></th>
|
|
<td>function</td>
|
|
<td>callback function called when the AJAX request returns a response object
|
|
usually in JSON format. This delegate checks the sanity of the response object and
|
|
returns a boolean (default: null)</td>
|
|
|
|
<td>
|
|
<p>This callback is invoked only when <code>ajax</code> is on.</p>
|
|
<p>1 parameter is passed to the function:</p>
|
|
<ul>
|
|
<li>data: response object, usually in JSON format</li>
|
|
</ul>
|
|
</td>
|
|
|
|
<td>
|
|
<pre>
|
|
actions: {
|
|
'update': {
|
|
uri: 'php/json.update.record.php',
|
|
form_method: 'POST',
|
|
param_names: [
|
|
'id', 'name', 'email', 'startdate', 'salary'
|
|
],
|
|
check_response_sanity: function (data) {
|
|
return (data && data.hasOwnProperty('result') &&
|
|
data.result.hasOwnProperty('success'));
|
|
}
|
|
},
|
|
'insert': {
|
|
uri: 'php/json.insert.record.php',
|
|
form_method: 'POST',
|
|
param_names: [
|
|
'id', 'name', 'email', 'startdate', 'salary'
|
|
],
|
|
default_record: [
|
|
'', 'Employee name...',
|
|
'employee@email.com', '2011-01-01',
|
|
'0.00'
|
|
],
|
|
check_response_sanity: function (data) {
|
|
return (data && data.hasOwnProperty('result') &&
|
|
data.result.hasOwnProperty('success'));
|
|
}
|
|
},
|
|
'delete': {
|
|
uri: 'php/json.delete.record.php',
|
|
form_method: 'POST',
|
|
bulk_delete: false,
|
|
param_names: ['id'],
|
|
check_response_sanity: function (data) {
|
|
return (data && data.hasOwnProperty('result') &&
|
|
data.result.hasOwnProperty('success'));
|
|
}
|
|
}
|
|
};
|
|
</pre>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th>process_response <sup>new</sup></th>
|
|
<td>function</td>
|
|
<td>callback function called when the AJAX request returns a response object
|
|
usually in JSON format. This delegate gives the possibility to add custom
|
|
processing of the response object (default: null)</td>
|
|
|
|
<td>
|
|
<p>This callback is invoked only when <code>ajax</code> is on.</p>
|
|
<p>1 parameter is passed to the function:</p>
|
|
<ul>
|
|
<li>data: response object, usually in JSON format</li>
|
|
</ul>
|
|
</td>
|
|
|
|
<td>
|
|
<pre>
|
|
actions: {
|
|
'update': {
|
|
uri: 'php/json.update.record.php',
|
|
form_method: 'POST',
|
|
param_names: [
|
|
'id', 'name', 'email', 'startdate', 'salary'
|
|
],
|
|
process_response: function (data) {
|
|
alert(data.result.description);
|
|
}
|
|
},
|
|
'insert': {
|
|
uri: 'php/json.insert.record.php',
|
|
form_method: 'POST',
|
|
param_names: [
|
|
'id', 'name', 'email', 'startdate', 'salary'
|
|
],
|
|
default_record: [
|
|
'', 'Employee name...',
|
|
'employee@email.com', '2011-01-01',
|
|
'0.00'
|
|
],
|
|
process_response: function (data) {
|
|
alert(data.result.description +
|
|
' ('+ data.result.id +')');
|
|
}
|
|
},
|
|
'delete': {
|
|
uri: 'php/json.delete.record.php',
|
|
form_method: 'POST',
|
|
bulk_delete: false,
|
|
param_names: ['id'],
|
|
process_response: function (data) {
|
|
alert(data.result.description +
|
|
' ('+ data.result.id +')');
|
|
}
|
|
}
|
|
};
|
|
</pre>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<a name="ez_msg" id="ez_msg"></a>
|
|
<h3>Messages</h3>
|
|
|
|
<table id="tblMsg" 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>
|
|
<th>msg_submit_ok</th>
|
|
|
|
<td>string</td>
|
|
<td>text displayed when data was successfully sent to the server (default:
|
|
'Modified rows were successfully submitted to server!') </td>
|
|
<td><p> </p></td>
|
|
<td><code> var etConfig = { msg_submit_ok: 'Data saved successfully!'}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>msg_confirm_delete_selected_rows</th>
|
|
|
|
<td>string</td>
|
|
<td>text displayed to ask confirmation for deleting operation (default:
|
|
''Do you want to delete the selected row(s)?'') </td>
|
|
<td> </td>
|
|
<td><code>var etConfig = { msg_confirm_delete_selected_rows: 'Are you
|
|
sure you want to delete selected rows?' }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>msg_error_occured</th>
|
|
|
|
|
|
<td>string</td>
|
|
<td>text displayed when an error occurs in general (default: 'An error
|
|
occured!') </td>
|
|
<td> </td>
|
|
<td><code>var etConfig = { msg_error_occured: 'Error!' }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>msg_submit_unsuccessful</th>
|
|
|
|
<td>string</td>
|
|
<td>text displayed when an error occurs when data is sent to server
|
|
(default: 'Modified rows could not be saved correctly!') </td>
|
|
<td> </td>
|
|
<td><code>var etConfig = { msg_submit_unsuccessful: 'Data could not
|
|
be saved correctly!' }</code></td>
|
|
</tr>
|
|
<tr>
|
|
<th>undefined_submit_url</th>
|
|
|
|
<td>string</td>
|
|
<td>text displayed when data cannot be sent to server because URI is
|
|
missing (default: 'Modified rows could not be saved! Submit URL is
|
|
not defined') </td>
|
|
<td> </td>
|
|
<td><code>var etConfig = { msg_filter: 'Please provide a URL to which
|
|
submit data!' }</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<a href="javascript:window.scroll(0,0);">Top of page</a>
|
|
<hr/>
|
|
|
|
|
|
</div>
|
|
<!-- END CONTENT -->
|
|
|
|
<div id="footer"></div>
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|