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
- Clicking on a non-editable cell will select it, and then you can move to another cell by going up or down
- 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.
- Clicking on an editable cell will switch to edit mode
- When a cell is set with a ' Not-editable-cell ' style, it cannot be edited even if the column is set in Colmodel.
- 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
JavaScript
Code $ (' selector '). Jqgrid ({
Other configurations
' Celledit ': true,
' cellsubmit ': ' remote ',
' cellurl ': '/url/to/handling/the/changed/cell/value '
})
Cellsubmit set to Clientarray
-Shrinkage
JavaScript
Code $ (' 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
- Formatcell (rowid, Cellname, value, IRow, Icol): You can change the cell contents here as the input control's value before switching to edit mode
- Beforeeditcell (rowid, Cellname, value, IRow, Icol): Triggers an event before the cell switches to edit mode
- Aftereditcell (rowid, Cellname, value, IRow, Icol): Triggers an event in the DOM of the input control that corresponds to the cell
- 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
- 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
- Aftersubmitcell (serverresponse, rowID, Cellname, value, IRow, Icol): Save cell, trigger when server returns information, event can return error message popup Display error dialog box
- Aftersavecell (rowid, Cellname, value, IRow, Icol): Triggered when a cell is successfully saved
- Errorcell (serverresponse,status): triggered when the server returns a non-200 state error (e.g. 403, 404, 500 status, etc.)
- Onselectcell (rowid, Celname, value, IRow, Icol): Triggered after cell switch to text mode
Cellsubmit set to Clientarray sequential
- Formatcell (rowid, Cellname, value, IRow, Icol): You can change the cell contents here as the input control's value before switching to edit mode
- Beforeeditcell (rowid, Cellname, value, IRow, Icol): Triggers an event before the cell switches to edit mode
- Aftereditcell (rowid, Cellname, value, IRow, Icol): Triggers an event in the DOM of the input control that corresponds to the cell
- Beforesavecell (rowid, Cellname, value, IRow, Icol): Triggered before cell contents are saved
- 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.
- Aftersavecell (rowid, Cellname, value, IRow, Icol): Triggered after Beforesubmitcell successfully saved cell contents
- 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