mayankrastogi / jQuery.inlineEdit

jQuery.inlineEdit is a simple and lightweight jQuery plugin by Mayank K Rastogi that allows you to edit your html table rows inline.

jQuery.inlineEdit

jQuery.inlineEdit is a simple and lightweight jQuery plugin by Mayank K Rastogi that allows you to edit your html table rows inline.

Features:

• Edit a column's value as input types date, number, select, text, textarea
• Ability to use a column's content as value of a hidden input field
• Special type percentage to edit columns having % symbols as a number input field and append the % symbol automatically after save is successful
• Style the dynamically added fields
• Flexibility to specify different editing styles of a column in different rows
• Attach a custom date-picker on date fields
• Perform custom validation on each input field before the form is submitted
• Automatically toggles the specified containers for edit and save, cancel buttons
• Update the row with new values upon successful save operation
• Perform custom operations by specifying callback functions when save operation is successful, fails or an error occurs during the AJAX call

How to use

1. For each column in a row that you want to be editable, specify the type and name inlineEdit attributes. See the inlineEdit Attributes section for list of supported types

2. Create two divs in the column that will contain your action buttons. One of the divs should contain the edit button and the other should contain the save and cancel buttons. You may add more buttons to these divs as well

3. Add some classes to the two container divs and the buttons inside them. These containers will be toggled while editing Example:

   <tr>
   	<td inlineEdit-type="hidden" inlineEdit-name="employeeId">1</td>
       <td inlineEdit-type="text" inlineEdit-name="name">Johnson</td>
       <td inlineEdit-type="select" inlineEdit-name="job" inlineEdit-data="getJobs">Admin</td>
       <td inlineEdit-type="date" inlineEdit-name="hireDate">1990-12-17</td>
       <td inlineEdit-type="number" inlineEdit-name="salary">18000</td>
       <td inlineEdit-type="percentage" inlineEdit-name="commission">0%</td>
       <td inlineEdit-type="textarea" inlineEdit-name="comments">Hard working</td>
       <td>
   		<div class="inlineEdit-edit-container">
   	        <span class="inlineEdit-action-edit">Edit</span>
   	    </div>
           <div class="inlineEdit-save-container">
               <span class="inlineEdit-action-save">Save</span>&nbsp;
               <span class="inlineEdit-action-cancel">Cancel</span>
           </div>
       </td>
   </tr>
   

4. Attach the plugin to your table

   1. Specify the saveButtonURL option to tell the plugin where to POST the form data
   2. If not using the default class names for the action buttons and their containers, specify the class names in the corresponding option. See the options section for more details

   $('#employeeTable').inlineEdit({
      	saveButtonURL: 'editRecord'
   });
   

5. Make sure that the server returns a JSON with the value of key success as true or false depending upon whether the save was successful or not

inlineEdit Attributes

You can customize how a dynamic field for a column is generated by adding these attributes to its td element.

• To make a column editable, you must specify the type attribute
• If edit type is select you must specify a function name in the data attribute. Check the description for data attribute for more details
• If value of edit type is date you can either use datePicker attribute or datePicker option to specify the name of the function that will be invoked to attach the date picker on that field

Note: All these attributes should be prefixed with inlineEdit-, or you can specify your own prefix by setting the attributePrefix option to the desired value.

Attribute	Description
type	Specifies the editing type of the column. If this attribute is not defined, the column won't be editable. Supported values: "date", "hidden", "number", "percentage", "select", "text", "textarea"
class	The class to be applied to the input element generated for this column. Specifying this attribute will override the class specified in the options for that field's input type
data	The function that will return an object containing a set of key value pairs that will be used to populate list of items in select dropdown lists if the type attribute is select. Key denotes the text that will be displayed in the dropdown. Value denotes the content of value attribute of the option element
datePicker	The function that will be responsible for attaching a date picker to this input field if the type attribute is date. If not specified, the date picker function specified in options is used. If both are not defined, the generated input field will fall back to use HTML5 date input field
name	The content of the name attribute that will be added to the generated input, select or textarea element
validator	The function that will be invoked to validate the input of this column before the data is posted to the server upon clicking the save button. This function should return false to prevent the form from being submitted

Options

Option	Description	Default value
attributePrefix	Prefix of <td> attribute meant for the plugin	'inlineEdit-'
saveButtonURL	URL where form data is posted via AJAX when save button is clicked	'#'
onAjaxFailed	Called when an AJAX request fails	function(jqXHR, textStatus, errorThrown) {}
onSaveFailed	Called when {success: false} is returned in JSON response by server	function(result) {}
onSaveSuccessful	Called when {success: true} is returned in JSON response by server	function(result) {}
editButtonClass	Class for elements acting as Edit buttons	'inlineEdit-action-edit'
saveButtonClass	Class for elements acting as Save buttons	'inlineEdit-action-save'
cancelButtonClass	Class for elements acting as Cancel buttons	'inlineEdit-action-cancel'
editContainerClass	Class of the element that contains the edit button	'inlineEdit-edit-container'
saveContainerClass	Class of the element that contains the save and cancel buttons	'inlineEdit-save-container'
inputFieldClass	Class to be applied to <input> fields created dynamically	'inlineEdit-input'
selectFieldClass	Class to be applied to <select> fields created dynamically	'inlineEdit-select'
textareaFieldClass	Class to be applied to <textarea> fields created dynamically	'inlineEdit-textarea'
datePicker	Callback function that attaches a date picker to date field type	null