editrowform

"A jquery plugin which allows you to edit each row of a table in line complete with a save and cancel button. You can also use it to add or delete rows."

Below are a couple of screen shots.

/* 
 * An id to use for the plugin, if empty one will be generated 
 */
id: "",


/* 
 * An optional css class to add to the plugin 
 */
cssClass: "",

	    		
/* 
 * True or false to turn on or off the double click and single click feature.  
 * Defaults to true.
 */
click: true,


/* 
 * The text of the save button 
 */
saveText: "Save",


/* 
 * The text of the cancel button 
 */
cancelText: "Cancel",


/* 
 * A time in milliseconds to disable the save button when it's clicked
 */
saveButtonTimeout: "",

 		
/* 
 * A time in milliseconds to disable the cancel button when it's clicked
 */
cancelButtonTimeout: "",
		    		

/* 
 * Hides the form when you click outside of the form or table.
 * Defaults to true.
 */
hideOnBlur: true,


/* 
 * True to focus on the first input when the form is shown.
 * Defaults to false.
 */
focusOnInput: false,


/* 
 * True to disable the up and down arrow keys for navigating the table.
 * Defaults to false.
 */
 disableArrowKeys: false,		
		
/* 
 * A array of column objects.  The column object has the same set of properties 
 * as defined in the defaultColumn option below.  The defaultColumn option 
 * list all the available properties that can be set. 
 * 
 * Note: If colIndex is not specified as a property, it will use the index 
 * of this array as the colIndex.
 * 
 * Usage e.g. [  {id: "myid", colIndex:0, type: "checkbox"}, { colIndex:1, disabled: true} ]
 */
columns: "", 


defaultColumn: {
	/* 
	 * The index of the column you want to set these properties for.
	 */
	colIndex: "",
	
	
	/* 
	 * If set, it is used as the id for input element for that column. 
	 * One is generated if left empty. 
	 */
	id: "",
	
	
	/* 
	 * If set, it is used as the name of the input element for that column.
	 * If empty, it will use the id.  If the id is not set then it will use the 
	 * header text.  Finally if that is not available, then it generates a name.
	 */
	name: "", 
	
	
	/* 
	 * The type of input to display on the form.
	 * Current supported options are: text, checkbox, datepicker.
	 */
	type: "", 
	
	
	/* 
	 * If true, it will render the input for that column as disabled 
	 */
	disabled: "",
	
	
	/* 
	 * Unlike disabled, ignore will simply not render any input 
	 * for the column when set to true.
	 */
	ignore: "", 
	
	/* 
	 * A default value to set the input to
	 */			
	defaultValue: ""		
}
		
		
onSave
	/* 
	 * Called when the save button is clicked.  Can be overridden to perform 
	 * your own save action.  
	 * 
	 * @example
	 * function(form, rowIndex, row, rowValues){}. 
	 * 
	 * @param form is the form element displayed by the plugin.
	 * @param rowIndex is the index of the row being edited.
	 * @param row is the row element being edited
	 * @param rowValues is an array of values entered into the form.  
	 * 
	 * @return false to stop the plugin from updating the row values 
	 * and hiding the dialog.  For example you may want to wait untill 
	 * after a ajax callback before updating the row.
	 * True to contine as normal.
	 */

		
		
onCancel    		
	/* 
	 * Called when the cancel button is clicked.
	 * 
	 * @example
	 * function(form, rowIndex, row){}. 
	 * 
	 * @param form is the form element displayed by the plugin.
	 * @param rowIndex is the index of the row being edited.
	 * @param row is the row element being edited.
	 *  
	 * @return false to stop the save.  True to continue as normal.
	 */


onHide
	/* 
	 * Triggered when the plugin form is hidden.  
     * This callback will only trigger when the form goes from a 
     * visible state to a hidden state. 
	 * 
	 * @example
	 * function(form, rowIndex, row){}. 
	 * 
	 * @param form is the form element.
	 * @param rowIndex is the index of the row being edited.
	 * @param row is the row element being edited. 
	 */

		
		
onDeleteRow    		
	/* 
	 * Trigger when deleteRow is called.  Can be used to perform additional 
	 * task associated with deletion of a row.  For example you can override to
	 * have deletion gray out a row instead of actually deleting it.
	 * 
	 * @example
	 * function(rowIndex, row){}. 
	 * 
	 * @param rowIndex is the index of the row being deleted.
	 * @param row is the row element being deleted.
	 * 
	 * @return false to stop the plugin from removing the row from 
	 * the table.  True or empty to remove the row.
	 */

		
		
onAddRow   		
	/* 
	 * Called when addRow is called.  Can be used to perform additional
	 * task associated with adding the row. For example you can add 
	 * a css class to the row.
	 * 
	 * @example
	 * function(rowIndex, row){}. 
	 * 
	 * @param rowIndex is the index of the newly created row.
	 * @param row is the row element of the newly created row.
	 * 
	 * @return false to stop the plugin from adding the row to the table.  
	 * True or empty to continue as normal.
	 */


		
getCellValue   			
	/* 
	 * Override to return your own interpretation of what the cell 
	 * value should be.  By default it will read the text from the td element (cell).
	 * 
	 * @example
	 * function(rowIndex, colIndex, computedValue, row, cell){} 
	 * 
	 * @param rowIndex is the row index of the row.
	 * @param colIndex is the column index of the column.
	 * @param computedValue is the value the plugin extracted from the cell.
	 * @param row is the row element the cell is in.
	 * @param cell is the cell element.
	 */

		
		
setCellValue   				    		
	/* 
	 * Override this to get complete control of how the cell value 
	 * should be set on the table.
	 * 
	 * @example
	 * function(rowIndex, colIndex, value, row, cell){} 
	 * 
	 * @param rowIndex is the row index of the row.
	 * @param colIndex is the column index of the column.
	 * @param value is the value being set to the cell.
	 * @param row is the row element the cell is in.
	 * @param cell is the cell element.
	 */   		

		
		
getInputValue    			    		
	/* 
	 * Override this to determine the value the plugin gets from 
	 * the form input.                    
	 * 
	 * @example
	 * function(rowIndex, colIndex, computedValue, inputId, form, row, cell, header){} 
	 * 
	 * @param rowIndex is the row index of the row.
	 * @param colIndex is the column index of the column.
	 * @param computedValue is the value the plugin extracted from the input.
	 * @param inputId is the id of the input.
	 * @param form is the form element.
	 * @param row is the row element.
	 * @param cell is the cell element.
	 * @param header is the header element.
	 * 
	 * @return a value from the input.
	 */    

		
		
setInputValue    				    		
	/* 
	 * Override to determine how the plugin sets the value of the plugin.
	 * 
	 * @example
	 * function( rowIndex, colIndex, value, inputId, form, row, cell, header ){} 
	 * 
	 * @param rowIndex is the row index of the row.
	 * @param colIndex is the column index of the column.
	 * @param value is the value being set.
	 * @param inputId is the id of the input.
	 * @param form is the form element.
	 * @param row is the row element.
	 * @param cell is the cell element.
	 * @param header is the header element.
	 */

		
		
renderInput	    				    		
	/* 
	 * Override to render your own custom input.  For example you can 
	 * override this to return a select element for a specific column.
	 * 
	 * @example
	 * function(input, rowIdex, colIndex, header ){} 
	 * 
	 * @param input is the input element the plugin created to add to the form.
	 * @param rowIndex is the index of the row.
	 * @param colIndex is the index of the column.
	 * @param header is the header element
	 * 
	 * @return a form element to display on the edit form.
	 */

save
    /**
     * Saves the input to the table and hides the dialog.
     * 
     * @example
     * .editrowform( "save" )
     */

        
addRow
    /* 
     * Add a row to the table. 
     * If templateRow is passed in, it will use that to add the row.  
     * Otherwise it will create a new row.
     *  
     * @example
     * .editrowform( "addRow", templateRow )
     * 
     * @param templateRow is an optional argument. It can be
     * a dom element or string representing a row or a function
		* which return a row to add.
        * 
        * For backward compatibility if left empty or set to true, it will still   
        * attempt to clone an the existing last row.  In future releases
        * this will be removed.
        * 
        * @return the rowIndex of the newly created row or false if the 
        * function call did not add the row.
        */	   
     
		
deleteRow			
    /* 
     * Remove the indicated row from the table.  This will remove it 
     * from the table DOM. 
     *
     * @example
     * .editrowform( "deleteRow", rowIndex )
     *  
     * @param rowIndex is the row index to perform the operation on.
     */

        
setRowValues
    /* 
     * Set the value for the given row index.  Takes an array of values.
     *
     * @example
     * .editrowform( "setRowValues", rowIndex, rowValues )
     *  
     * @param rowIndex is the row index to set the values for.
     *  
     * @param rowValues is an array of values to set for the row.  The index 
     * of the array corresponds to the column index.   
     */

		
show				
	/* 
	 * Shows the edit form for the specified row.  Does nothing for invalid row index.
	 * 
    * @example
    * .editrowform( "show", rowIndex )
	 * 
	 * @param rowIndex is the row index to show the form for.
	 */
	 
		
hide			
	/* 
	 * Hides the edit form if it is currently visible. 
	 * 
    * @example
    * .editrowform( "hide" )
	 * 
	 */

		
destroy			
	/* 
	 * Remove the plugin from the DOM and cleanup.
	 * 
    * @example
    * .editrowform( "destroy")
	 * 
	 */
		
		
getRowCount			
	/* 
	 * Get the number of rows in the table.
	 * 
    * @example
    * .editrowform( "getRowCount" )
    * 
    * @return the number of rows in the table associated with this plugin
	 */

		
getColumnCount				
	/* 
	 * Get the number of columns in the table.
	 * 
    * @example
    * .editrowform( "getColumnCount" )
    * 
    * @return the number of columns in the table associated with this plugin
	 */
	 
	 
getForm	 
	/* 
	 * Get the form created by this plugin.
	 * 
    * @example
    * .editrowform( "getForm" )
    * 
    * @return the form object created by this plugin
    * 
	 */