Documentation

EditTable Class

General Public Properties

Property Type Description Remarks Example
id string returns the HTML table's id used by the EditTable object use it as getter only alert( myET.id );
table HTMLTableElement returns the HTML table element used by the EditTable object use it as getter only alert( myET.table );
config object returns the EditTable configuration object (literal object) use it as getter or setter alert( myET.config );
startRow number index of the first row from which row selection can start use it as getter only alert( myET.startRow );
nbCells number returns the number of table columns use it as getter only alert( myET.nbCells );
selection boolean enables / disables selection model use it as getter or setter myET.selection = false;
keyNav boolean enables / disables keyboard navigation use it as getter or setter myET.keyNav = false;
editable boolean enables / disables inline editing use it as getter or setter myET.editable = true;
tableCss string defines the css class of the table element use it as getter or setter myET.tableCss = 'myClass';
unselectableCss string defines the css class that makes the table text unselectable use it as getter or setter alert( myET.unselectableCss );
activityIndicatorCss string defines the css class to be applied to the table in order to indicate server activity use it as getter or setter alert( myET.activityIndicatorCss );
basePath string defines the path to the script's directory use it as getter or setter alert( myET.basePath );
Top of page

Selection Public Properties

Property Type Description Remarks Example
selectionModel string defines the selection model: "single" or "multiple" use it as getter or setter - 2 possible values: 'single' or 'multiple' myET.selectionModel = 'multiple';
defaultSelection string defines the selection type use it as getter or setter - 3 possible values: 'row', 'cell' or 'both' myET.defaultSelection = 'both';
keySelection boolean enables / disable multiple selection by using Ctrl and Shift keys use it as getter or setter - select multiple rows by holding Ctrl or Shift key down, only if selection model is 'multiple' myET.keySelection = false;
selectRowAtStart boolean first row is selected at start if set true use it as getter or setter myET.selectRowAtStart = true;
rowIndexAtStart number defines which row has to be selected at start use it as getter or setter myET.rowIndexAtStart = 5;
scrollIntoView boolean If set true selected row scrolls into view; useful when row is selected by using keyboard use it as getter or setter myET.scrollIntoView = true;
activeRowCss string defines css class for active row use it as getter or setter myET.activeRowCss = 'myClass';
selectedRowCss string defines css class for selected rows use it as getter or setter - only if 'multiple' selection model is enabled myET.selectedRowCss = 'myClass';
activeCellCss string defines css class for active cell use it as getter or setter - only if 'cell' or 'both' selection type is enabled myET.activeCellCss = 'myClass';
nbRowsPerPage number defines number of rows to jump when PgDown or PgUp keys are pressed use it as getter or setter - specify a huge number to jump straight to 1st or last row (1000) myET.nbRowsPerPage = 1000;
Top of page

Editable Public Properties

Property Type Description Remarks Example
editorModel string defines the editor model use it as getter or setter - 2 possible values: 'cell' or 'row' myET.editorModel = 'row';
openEditorAction string defines which mouse action opens the inline editing feature use it as getter or setter - 2 possible values: 'dblclick', 'click' myET.openEditorAction = 'click';
ajax new boolean enables AJAX requests (default: true if jQuery is detected) it is enabled if jQuery is detected and the ajax property is not explicitly set false myET.ajax = false;
inputEditorCss boolean defines the css class for 'input' type editors use it as getter or setter - select multiple rows by holding Ctrl or Shift key down, only if selection model is 'multiple' myET.inputEditorCss = 'myClass';
textareaEditorCss boolean defines the css class for 'textarea' type editors use it as getter or setter myET.textareaEditorCss = 'myClass';
selectEditorCss number defines the css class for 'input' type editors use it as getter or setter myET.selectEditorCss = 'myClass';
commandEditorCss boolean css class applied to command editor buttons container use it as getter or setter myET.commandEditorCss = 'myClass';
modifiedCellCss string css class applied to modified cells use it as getter or setter - this css class shows the green small triangle in the left-upper corner of the cell myET.modifiedCellCss = 'myClass';
cellEditors array array defining the editor configuration for each column use it as getter or setter - the number of editors must be equal to the number of columns. Refer to Cell editors properties for details about editors' configuration myET.cellEditors = [
{ type: 'select' },
{ type: 'textarea' },
{ type: 'input' },
{ type: 'uploader' },
{ type: 'none' },
{ type: 'command' }
];
actions object server actions configuration object use it as getter or setter - Refer to actions properties for details about server actions configuration myET.actions = {
'update': {
uri: 'updateRow.php', submit_method: 'form', form_method: 'POST',
param_names: ['iso', 'name', 'printablename', 'iso3', 'code'] },
'insert': {
uri: 'insertRow.php', submit_method: 'form', form_method: 'POST',
param_names: ['iso', 'name', 'printablename', 'iso3', 'code'] },
'delete': {
uri: 'script.delete.php', submit_method: 'script', bulk_delete: true }
}
autoSave boolean saves automatically pending changes upon selection change editable property needs to be activated (default: true if editable is on) myET.autoSave = false;
autoSaveModel string determines when modified and/or added data is saved, upon row or cell selection change (default: 'row') 2 possible values 'row' or 'cell' myET.autoSaveModel = 'cell';
autoSaveType string defines if only insertions or updates, or both are saved automatically (default: 'both') 3 possible values 'insert', 'update' or 'both' myET.autoSaveType = 'update';
editableOnKeystroke new boolean makes the inline cell editor appear upon keystroke (default: false) only if edition is enabled and editorModel is set to 'cell' and selectionModel to 'single' myET.editableOnKeystroke = true;
newRowPrefix string defines the prefix for new added row ids (default: 'tr') prefix should match the prefix assigned to already existing rows myET.newRowPrefix = 'row';
formSubmitInterval number defines the interval in ms separating rows data submissions (default: 50) 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. myET.formSubmitInterval = 750;
newRowPos new string or number defines the row position of a newly created row (default: 'top') 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' myET.newRowPos = 'bottom';
Top of page