Jqgrid cell Editing

Source: Internet
Author: User
Tags jqgrid

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

  1. Formatcell (rowid, Cellname, value, IRow, Icol): You can change the cell contents here as the input control's value before switching to edit mode
  2. Beforeeditcell (rowid, Cellname, value, IRow, Icol): Triggers an event before the cell switches to edit mode
  3. Aftereditcell (rowid, Cellname, value, IRow, Icol): Triggers an event in the DOM of the input control that corresponds to the cell
  4. 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
  5. 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
  6. Aftersubmitcell (serverresponse, rowID, Cellname, value, IRow, Icol): Save cell, trigger when server returns information, event can return error message popup Display error dialog box
  7. Aftersavecell (rowid, Cellname, value, IRow, Icol): Triggered when a cell is successfully saved
  8. Errorcell (serverresponse,status): triggered when the server returns a non-200 state error (e.g. 403, 404, 500 status, etc.)
  9. Onselectcell (rowid, Celname, value, IRow, Icol): Triggered after cell switch to text mode
Cellsubmit set to Clientarray sequential
  1. Formatcell (rowid, Cellname, value, IRow, Icol): You can change the cell contents here as the input control's value before switching to edit mode
  2. Beforeeditcell (rowid, Cellname, value, IRow, Icol): Triggers an event before the cell switches to edit mode
  3. Aftereditcell (rowid, Cellname, value, IRow, Icol): Triggers an event in the DOM of the input control that corresponds to the cell
  4. Beforesavecell (rowid, Cellname, value, IRow, Icol): Triggered before cell contents are saved
  5. 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.
  6. Aftersavecell (rowid, Cellname, value, IRow, Icol): Triggered after Beforesubmitcell successfully saved cell contents
  7. 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.