ezEditTable 2.1 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.
Main features
Attach to an existing HTML table Advanced selection model Extended keyboard navigation Inline cell or row editing Insert and remove rows Send changes to server via GET or POST methods by form submission or by including script elements in the head section (only GETs) Integration with any server-side technology as this is a pure client-side solution Can be used as an extension of the HTML Table Filter Generator script to provide even more advanced capabilities to regular HTML tables Callbacks for all events, and delegates for most actions Based on plain javascript, that is, independent from any javascript framework but compatible with any of them (no for..in etc.) Exhaustive documentation and API What’s new? This version comes with 2 additional features:
the uploader cell editor the auto save mode: row/cell changes are saved upon row/cell selection change
and an additional AJAX demo (jQuery):
Custom insert and update operations performed with AJAX calls (jQuery)
Demos This collection of samples shows how easy it is to configure this script:
Samples
Styling The script comes with 3 themes and an extensive API for CSS definitions:
Theme roller
Custom layout defined with the API’s CSS properties
Server-side integration Examples showing server-side (Php/MySql) integration available at script’s demos page:
Insert, update and delete operations with auto save mode (updated)
Insert, update and delete operations with command buttons and disabled auto save (updated)
Custom insert and update operations performed with AJAX calls (jQuery) (new)
Configure the uploader editors (updated)
Advanced grid component Combined with the HTML Table Filter Generator this script provides advanced grid component solutions:
Selection grid Checkbox selection grid Editable grid Editable grid with command buttons Editable AJAX grid (jQuery)
Important note The aim of this code is to enhance the HTML tables capabilities, and provide a generic or custom way to send data to server for DB operations no matter what server technology you use. The examples featured on the script’s website use PHP and MySql and are meant to show how to configure the script in order to send data to the server. This is not a PHP / MySql based solution, you could use this script with other server side technologies. Why use this script? If you need to improve users’ experience when dealing with data tables in your website, this code could be a fast and efficient solution. This script focuses in 3 main areas:
Keyboard navigation: an advanced keyboard navigation similar to what you would expect in non-web based applications
Selection model (row and/or cell): an extended selection model, combining rows and cell if needed, and allowing multiple rows selection by holding Ctrl or Shift keys
Edition components (cell or row editor): a simple way to convert a plain HTML data table in an editable grid control and keeping client-side logic completely separated from server-side logic
Moreover, the exhaustive script’s API will also let you easily create your advanced components based on this grid. A complete set of callbacks for every event and delegates for every action makes this grid fully customizable and extensible for your project requirements.
Changelog 2012-10-28 V2.1 comes with 2 additional features:
the uploader cell editor the auto save mode: row/cell changes are saved upon row/cell selection change
2012-06-04 V2.0 launch