Jqgrid cell Editing

Cell editing

Cell editing provides the ability for a user to modify the contents of a single cell in a row, and developers can manipulate the modified data through Ajax or cell editing events.

Cell editing supports keyboard navigation and cell editing operations by doing the following behavior

1. Clicking on a non-editable cell will select it, and then you can move to another cell by going up or down
2. When you move to an editable cell, you can press the ENTER key to switch the cell to edit mode. When you press the ENTER key again, or tab, clicking another cell will perform the save operation. Press the ESC key to cancel the edit and revert to the previous value. When you edit a cell, the cursor key is always inside this cell.
3. Clicking on an editable cell will switch to edit mode
4. When a cell is set with a ' Not-editable-cell ' style, it cannot be edited even if the column is set in Colmodel.
5. tip:You need the configuration column to be editable in Colmodel, and you specify edittype to switch to edit mode, or you cannot switch.

Installation

To use the cell editing module, you need to tick the 2 functions of cell editing and common on the download page, then click the Download download button to download Jqgrid. : Http://www.trirand.com/blog/?page_id=6

To see the meta-generation can find grid.celledit.js this file from the SRC directory

Properties that belong to cell editing, and the events and methods are a subset of the Jqgrid option configuration.

Property

The specific properties of cell editing need to be configured in the Jqgrid method.

Property name	type	Description	Default Value
Celledit	Boolean	Whether to enable cell editing. Set to True,onselectrow event is not available and mouse hover is disabled (hover over line)	False
Cellsubmit	String	Configure cell content save location, available value ' remote ' or ' Clientarray ' 1) Set to remote, the cell content changes after the AJAX request Cellurl the configured address is saved to the server. The ID of this data row and the modified content are appended to the URL. When Mtype is configured for post submission, the key value pair content will be post-committed. For example, saving a cell named MyCell {id:rowid, mycell:cellvalue} will be appended to the URL as additional data. 2) set to Clientarray, do not send AJAX requests, modified content can be used Getchangedcells method or through the event to obtain	Remote
Cellurl	String	The URL address where the data is saved. Be sure to configure the URL address when Cellsubmit is set to remote.	Null
Ajaxcelloptions	Object	Configures global settings for AJAX requests that hold data. This configuration overrides the Ajax request settings for all currently saved data, including the complete event	Empty Object

Example

Cellsubmit is set to remote, you can use the following code

-Shrinkage JavaScriptCode $ (' selector '). Jqgrid ({
Other configurations
' Celledit ': true,
' cellsubmit ': ' remote ',
' cellurl ': '/url/to/handling/the/changed/cell/value '
})

Cellsubmit set to Clientarray

-Shrinkage JavaScriptCode $ (' selector '). Jqgrid ({
Other configurations
' Celledit ': true,
' cellsubmit ': ' Rclientarray '
})

Event

Cell-edited events need to be configured in the Jqgrid method

Most of the events listed below use the parameters defined below, note: IRow and Icol have different starting positions for the tested values.

• rowID-ID of the data row
• cellname-cell name (name defined by Colmodel)
• Value-cell contents
• IRow-The line number of the row in which the cell is located (be careful not to mix with rowid),IRow starting from 1
• Icol-cell is in row column number,Icol starting from 0

Event name	Parameters	Description
Aftereditcell	ROWID, Cellname, value, IRow, Icol	After the cell is edited, such as when the corresponding edit control element is added to the DOM
Afterrestorecell	rowID, value, IRow, Icol	Call the Restorecell method or press the ESC key to cancel the edit
Aftersavecell	ROWID, Cellname, value, IRow, Icol	After the cell is successfully saved, this is the ideal place to change other content
Aftersubmitcell	Serverresponse, rowID, Cellname, value, IRow, Icol	Triggered when the data is submitted to the server and returned information. This method needs to return data of type [Success (Boolean), message]. 1) returns [true, ""] indicating that the contents of the cell were saved successfully. 2) return [FALSE, "error message"] indicates that the contents of the Save cell failed, and a dialog box appears displaying the returned error message. Servereresponse is the Ajax object that sends the request, the second parameter of the return value can be obtained by getting serverresponse.responsetext the information returned by the server
Beforeeditcell	ROWID, Cellname, value, IRow, Icol	Trigger before editing a cell
Beforesavecell	ROWID, Cellname, value, IRow, Icol	Triggered before validating the input data, if present. The event can return the contents of the new content before replacing it. Beforesavecell:function (Rowid,celname,value,irow,icol) { if (some_condition) {return "new value";} } New value will replace the previous values
Beforesubmitcell	ROWID, Cellname, value, IRow, Icol	Beforesubmitcell:function (Rowid,celname,value,irow,icol) { if (some_condition) { return {name1:value1,name2:value2} } Else {return {}} } The JSON data returned will be appended to the data submitted by Cellurl. Triggers before sending the contents of the cell to the server (Cellsubmit is configured as remote is valid). Event can be returned with a new JSON data submitted to the server
Errorcell	Serverresponse, status	triggered when a dynamic page error occurs after saving data. 1) Servereresponse is an Ajax object that can be serverresponse.responsetext to get the information returned by the server 2) status is the error number
Formatcell	ROWID, Cellname, value, IRow, Icol	This event formats the cell contents before the cell is edited, returning the formatted value.
Onselectcell	ROWID, Celname, value, IRow, Icol	Triggered when a cell is switched to text mode
Serializecelldata	PostData	If this event is set, the data passed to the AJAX request is serialized when the cell is saved. This method needs to return the serialized content. This event can be used when custom data needs to be sent to the server. For example, JSON-formatted strings, XML-formatted strings, and so on. The data returned by this event will be submitted to the server.

Event invocation Sequential

Depending on the Cellsubmit configuration The value is ' remote ' or ' Clientarray '

The following is a sequential cellsubmit set to remote

2. Formatcell (rowid, Cellname, value, IRow, Icol): You can change the cell contents here as the input control's value before switching to edit mode
4. Beforeeditcell (rowid, Cellname, value, IRow, Icol): Triggers an event before the cell switches to edit mode
6. Aftereditcell (rowid, Cellname, value, IRow, Icol): Triggers an event in the DOM of the input control that corresponds to the cell
8. Beforesavecell (rowid, Cellname, value, IRow, Icol): Triggered before the cell contents are saved, you can store the content sent to the server in this event
10. Beforesubmitcell (rowid, Cellname, value, IRow, Icol): Triggered before data is sent to the server, this method can return a JSON object to append additional data
12. Aftersubmitcell (serverresponse, rowID, Cellname, value, IRow, Icol): Save cell, trigger when server returns information, event can return error message popup Display error dialog box
14. Aftersavecell (rowid, Cellname, value, IRow, Icol): Triggered when a cell is successfully saved
16. Errorcell (serverresponse,status): triggered when the server returns a non-200 state error (e.g. 403, 404, 500 status, etc.)
18. Onselectcell (rowid, Celname, value, IRow, Icol): Triggered after cell switch to text mode

Cellsubmit set to Clientarray sequential

2. Formatcell (rowid, Cellname, value, IRow, Icol): You can change the cell contents here as the input control's value before switching to edit mode
4. Beforeeditcell (rowid, Cellname, value, IRow, Icol): Triggers an event before the cell switches to edit mode
6. Aftereditcell (rowid, Cellname, value, IRow, Icol): Triggers an event in the DOM of the input control that corresponds to the cell
8. Beforesavecell (rowid, Cellname, value, IRow, Icol): Triggered before cell contents are saved
10. Beforesubmitcell (rowid, Cellname, value, IRow, Icol): You can save data to anywhere, including custom Ajax to send data to the server save "with Ajax note Ajax is asynchronous, Ajax will continue the following 2 events on its own before it returns, so the following 2 events will need to be specified as synchronous execution when making some judgments based on the AJAX results.
12. Aftersavecell (rowid, Cellname, value, IRow, Icol): Triggered after Beforesubmitcell successfully saved cell contents
14. Onselectcell (rowid, Celname, value, IRow, Icol): Triggered after cell switch to text mode

Method

All of the following method calls need to pass through the Jqgrid instance and return the same Jqgrid instance. Jqgrid Example Diagram

Method Name	Method Parameters	Description
Editcell	IRow, Icol, edit	Edit the cell with the IRow line number icol column number. Irow,icol definition. If the edit parameter is set to False, only the cell is selected. Set to True to select cells and switch to edit mode
Getchangedcells	Method	All modified row data (array of JSON objects) is returned by the method parameter (all), which is set to dirty, and the returned data contains the ID and the modified data, and the unmodified not returned. eg, raw data for [{id:1,name: ' Showbo1 ', addr: ' Guilin '},{id:2,name: ' Showbo2 ', addr: ' Guangxi Guilin '}], modify the name of ID 1 to SHOWBO csdn, call this method 1) Do not pass the method parameter or all, return [{id:1,name: ' Showbo csdn ', addr: ' Guilin '}]. 2) method is set to dirty, then return [{id:1,name: ' Showbo csdn '}]
Restorecell	IRow, Icol	In edit mode, restore the cell IRow line number, icol column number. Call $ (' selector ') after Restorecell (3,1), regardless of the input box input, revert to name3 and switch to text mode after the input is discarded.
Savecell	IRow, Icol	In edit mode, save the IRow line number, icol the cell contents of the column number, and switch to text mode

Tips on how data is composed

Input control structure in cell edit mode the following rules when the cell is edited and the input elements is created we set the following rules:

• The ID of the edit control is: The name value configured in ' Irow_ ' +colmodel. For example, to edit a column under row 20th, configure this column in Colmodel the name configuration value is myname, then the input control has an ID of 20_myname
• The name of the edit control is the name value in the Colmodel configuration. As the example above, name is MyName

Content submitted to the server

The JSON object ({}) data submitted to the server contains

• Enter the control key-value pair (Name:value pair), name the name value of the input object in this cell
• Attach (ID:ROWID) key-value pair, rowid the ID of the corresponding data for this row
• Non-empty JSON data returned in the Beforesubmitcell event

Jqgrid cell Editing