Demos
Custom Layout
This demo shows how to
- customise the table appearance by using the script's css properties
- configure a select editor
- define a default record for added rows
Note: in this demo the default stylesheet (ezEditTable.css) is not imported. The appearance of the table below is all based on the css properties defined in the configuration object.
| Book | Price | Delivery Items | |||
|---|---|---|---|---|---|
| Title | Author | $ | In store | Shipping | Publication Date |
| Boris Godunov | Alexandr Pushkin | 7.15 |
1 Hour | 01/01/1999 |
|
| The Rainmaker | John Grisham | 7.99 |
2 Days | 12/01/2001 |
|
| The Green Mile | Stephen King | 11.10 |
24 Hours | 01/01/1992 |
|
| Misery | Stephen King | 7.70 |
na | 01/01/2003 |
|
| The Dark Half | Stephen King | 0 |
2 Days | 10/30/1999 |
|
| The Partner | John Grisham | 12.99 |
24 Hours | 01/01/2005 |
|
| It | Stephen King | 9.70 |
12 Hours | 10/15/2001 |
|
| Cousin Bette | Honore de Balzac | 0 |
1 Hour | 12/01/1991 |
|
| The Testament | John Grisham | 19.10 |
2 Days | 12/17/1999 |
|
| Eugene Onegin | Alexandr Pushkin | 11.20 |
24 Hours | 09/27/2005 |
|
| Dark Avenues | Ivan Bunin | 14.96 |
1 Hour | 10/01/2008 |
|
| Father Goriot | Honore de Balzac | 9.99 |
2 Days | 06/06/2010 |
|
| The Captain's Daughter | Alexandr Pushkin | 10.21 |
2 Days | 03/01/2001 |
|
| Hamlet | William Shakespeare | 5.99 |
1 Hour | 04/15/2003 |
|
| The Village | Ivan Bunin | 11.66 |
24 Hours | 01/02/2010 |
|
| The Winter's Tale | William Shakespeare | 19.31 |
1 Hour | 02/12/2010 |
|
| The Black Sheep | Honore de Balzac | 16.00 |
1 Hour | 08/28/1976 |
|
| Lost Illusions | Honore de Balzac | 8.0 |
na | 07/10/2010 |
|
Configuration object:
//ezEditTable configuration object
var demoConfig = {
editable: true,
auto_save: false,
selection_model: 'multiple',
default_selection: 'both',
table_css:'demoBooks', //table css class
unselectable_css: 'unselectable', //makes the table unselectable (only for the latest browsers)
active_row_css: 'activeRow', //active row
selected_row_css: 'selectedRow', //selected row(s)
active_cell_css: 'activeCell', //active cell
modified_cell_css: 'modifiedCell', //modified cell
input_editor_css: 'inputEditor', //input editor
textarea_editor_css: 'textareaEditor', //textarea editor
select_editor_css: 'selectEditor', //select editor
cell_editors:[
{ type: 'textarea', attributes:[['title', 'Title']] },
{ type: 'input', attributes:[['title', 'Author']] },
{ type: 'input', attributes:[['maxLength', 8], ['title', '8 digits max.\n numbers with 2 decimal places only']], style:'width:35px;', css:'alignRight' },
{ type: 'boolean' },
{ type: 'select', style:'width:70px;', custom_slc_options:['1 Hour', '12 Hours', '24 Hours', '2 Days', '1 Week', 'Pick up', 'na'] },
{ type: 'none' }
],
actions:{
'insert': { default_record:['Title...', 'Author...', '0.00', '', 'na', '01/01/2000'] }
}
}
Custom CSS classes used for this demo:
/* ezEditTable custom layout */
.demoBooks{
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;
}
.demoBooks td{
margin:0; padding:5px; color:inherit;
border-bottom:1px solid #A4BED4;
border-left:0; border-top:0; border-right:0;
}
.demoBooks th{
margin:0; padding:5px; color:inherit;
background:#D1E5FE url("images/sky_blue_grid.gif") 0 0 repeat-x;
border-color:#FDFDFD #A4BED4 #A4BED4 #FDFDFD;
border-width:1px; border-style:solid;
}
.unselectable{
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
.activeRow td{ background:#D9E8FB; border-top:1px solid #FDFDFD; border-bottom:1px solid #A4BED4 !important; }
.selectedRow{ background:#D1E5FE url("images/sky_blue_grid.gif") 0 0 repeat-x; }
td.activeCell{
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;
}
.modifiedCell{ background:#FFFF99 url(ezEditTable/themes/bg_mod_cell.png) 0 0 no-repeat !important; }
.inputEditor{ width:100%; height:auto; font:12px/13px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif !important; border:0; }
.textareaEditor{ width:100%; height:25px; font:12px/13px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif !important; border:0; overflow:auto; }
.selectEditor{ width:100%; font:12px/13px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif !important; border:1px solid #AACCF6; }
.commandEditor 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;
}
.commandEditor button img{ vertical-align:middle; margin:2px; }
Top of page
