Jqgrid form Edit Configuration Parameters __jqgrid

jqgrid Form Editing

Jqgrid supports a floating form for viewing, adding, editing, deleting, and querying tabular data, the following is an effect chart for adding records

In your project you can use modal boxes and row editors. Where row edits can only be used to edit rows that already exist, not to query, delete, and add data. In practice, it is not recommended to use these 2 methods at the same time, because when you select the same line, the 2 are in conflict (in which case, when you select a row to edit, click the Edit Modal box, you will get the cell ID in the modal box, not the contents of the cell. ）

The methods listed in the table below are included in the Navgrid (navigation method). Software requirements and installation

To use this module, you need to check common on the download page, Form Editing, jqmodal (optional), JQDNR plugin, download address: http://www.trirand.com/blog/?page_id=6

Developer considerations, Grid.common.js, Grid.formedit.js, Jqmodal.js and Jqdnr.js methods in the SRC directory

The form editing method listed below is a subset of Jqgrid. However, all properties and events are not part of the Jqgrid configuration, but rather as parameters passed to the method. query Form

More details Reference: Jqgrid single segment Query Andjqgrid advanced query editgridrow: Edit Table Rows

This method creates a modal dialog form that is used to edit the existing rows in the table. This method uses the common editing properties defined in Colmodel and the Editurl configuration in Jqgrid

Call way-shrink JavaScript code jQuery ("#grid_id"). Editgridrow (rowID, properties);

The new API calls the way-shrinks the JavaScript code jQuery ("#grid_id"). Jqgrid (' Editgridrow ', rowID, properties);

Parameter description Grid_id:jqgrid ID ROWID: Data row ID to edit properties: Key-value pair objects, containing any of the properties and events listed below

Properties defined in the language file used by this method-shrink JavaScript code $.jgrid = {
//...
Edit: {
Addcaption: "Add record",
Editcaption: "Edit record",
Bsubmit: "Submit",
Bcancel: "Cancel",
Bclose: "Close",
SaveData: "Data has been changed! Save changes? ",
Byes: "Yes",
BNo: "No",
Bexit: "Cancel",
//...
},
//...
These default options can be reconfigured when the method is invoked. When passing parameters through a method, for example, using bsubmit: "Submit" instead of $.jgrid.edit.bsubmit: "Submi", the effect is shown belowConfiguration Properties

name	Description	Default Value
Top	The modal window initializes the top position. The default value is 0, which means the top of the grid is now. If Jqmodel is set to True, the Jqmodal plug-in is enabled to render content, where the modal window is positioned relative to the window, not the grid object.	0
Left	The modal window initializes the left position. The default value is 0, which indicates the left side of the grid now. If Jqmodel is set to True, the Jqmodal plug-in is enabled to render content, where the modal window is positioned relative to the window, not the grid object.	0
Width	modal window width	300
Height	modal window height	Auto
Dataheight	This parameter controls the height of the editing area, as shown in the previous image, in the input control area, between the table header and the button.	Auto
Modal	Set whether the dialog box is modal (that is, whether the so-called masking layer is displayed, Lightbox effect) is only valid when the Jqmodal plug-in is enabled (Jqmodal:true)	False
Drag	Sets whether the dialog box can be dragged. Dragable widgets that need to load the JQDNR plug-in and jquery UI (jquery widget)	True
Resize	Sets whether the dialog box can change the size. Dragable widgets that need to load the JQDNR plug-in and jquery UI (jquery widget)	True
Url	The URL address of the data save, if not set, the Editurl configured in the default Wiejqgrid	Null
Mtype	In what way does Ajax submit a data Island server ("POST" or "get")	POST
EditData	Additional data sent to the server, key value to Object	Empty
Recreateform	Set to True, the form inside the dialog box when it is activated will recreate the new option (if modified) that is configured using Colmodel.	False
Jqmodal	True to use the Jqmodal plug-in to create a dialog box (if the plug-in is loaded with script) instead of using a jqgrid built-in function to create a dialog box	True
Addedrow	Controls where the line is added, and the ' first ' will appear at the top, and ' last ' is displayed at the end. To be displayed according to the set order, you can set the Reloadaftersubmit:true	The
Topinfo	Add a new line of information that appears under the header of the dialog page	Empty string
Bottominfo	Add a new line to display information under the Action button of the dialog box	Empty string
Saveicon	Array that defines the icon for the Submit button. Parameter format Description The first parameter defines whether to display the icon the second parameter is displayed in the position, to the left of the button text or to the right (left/right) a valid icon style defined in the third parameter and theme	[True, ' left ', ' Ui-icon-disk ']
Closeicon	Array, define the Cancel (off) button. Parameter Description Reference Saveicon configuration	[True, ' left ', ' Ui-icon-close ']
Savekey	Array that defines the shortcut keys for saving the form. Parameter format Description The first parameter defines whether shortcut keys are enabled the second argument corresponds to the key value of the keys when shortcut keys are enabled, the default is [Enter] ... Shortcut keys are available when editing or adding rows. For form bindings, all shortcut keys that cannot be individually defined for add and edit.	[false,13]
Navkeys	Array, only valid in edit/view mode, add keyboard navigation, allows you to switch to the top/next record by pressing the configured key, disabling the first parameter definition to allow keyboard navigation the second parameter definition navigates to the corresponding key value of the previous record, the default value is the UP arrow the third parameter definition navigates to the corresponding key value of the next record , the default value is the down arrow	[FALSE,38,40]
Checkonsubmit	Valid only in edit mode. Set to True, when data is modified, click submit button to work. When the data is modified, a dialog box message will be displayed to let the user determine whether the modification or cancellation is confirmed. Clicking the Cancel button in the dialog box closes the dialog box and puts it back in the Form dialog box without restoring the form to its original value.	False
Checkonupdate	Apply in Add and edit mode. Set to true with the following behavior When some data is modified, the user clicks the Cancel button, the navigation button (the left and right arrow on the icon above), the Close button (the X in the upper right-hand corner), or the masking layer (if present), press the ESC key (set), and the New dialog box prompts the user to save, Save data or return to grid without saving changes (the last action closes the form dialog box)	False
Closeafteradd	In Add mode, close the dialog box after you save the added record	False
Clearafteradd	In Add mode, empty the entered data after you save the added record	True
Closeafteredit	In edit mode, close the dialog box after you save the record	False
Reloadaftersubmit	Reload grid data after successfully saving records	True
Closeonescape	Set to True to close the dialog window by pressing the ESC key	False
Ajaxeditoptions	Global settings for AJAX requests when saving form editing data can override all currently saved Ajax request configurations, including complete events	Empty Object
Viewpagerbuttons	Do you want to display the previous one and the next one (page button) in the form	True
ZIndex	The Z-index CSS property of the dialog box. If you want some element to appear above the dialog box, you need to set the element's Z-index greater than the default Z-index (950) of the dialog box, such as setting the element z-index to 1000.	950

Events

Event name	Description
Afterclickpgbuttons	In edit mode, the navigation button appears to be valid. triggered when the top or next data is loaded. Afterclickpgbuttons:function (Whichbutton, Formid, rowID) {...} Parameter description Whichbutton: Click which object ' prev ' or ' Next ' Formid:jquery the object of the package, get the form ID value by Formid[0].id (named Formobject may be okay to understand some) ROWID: ID of the top/next data loaded
Aftercomplete	When all actions and events have been completed, data rows have been added or updated to grid and triggered Aftercomplete:function (response, PostData, Formid) {...} Parameter description Response: Data returned by the server (Ajax object , note not ajaxobj.responsetext) PostData: Data submitted to the server, JSON key value pair object Formid:jquery the wrapped object, get the form ID value by formid[0].id
Aftershowform	Triggered after the form is displayed, there is a parameter of Formid, which explains Aftershowform:function (Formid) {...}
Aftersubmit	The commit data is triggered when it is returned from the server. Primarily used to display server state information (for example, the reason that data was successfully saved or saved by the server side) Aftersubmit:function (response, PostData) {... return [success,message,new_id]}, parameter description and Aftercomplete This method needs to return data in [Success, message, NEW_ID] format Success: is a Boolean value if processing continues for true (the message is ignored), if False, a dialog box pops up displaying the error message (the value of the messages) and stops other processing Message: Error messages NEW_ID: Can be used to set the ID of a new data row when adding a mode, so the server needs to return the row ID saved to the database at the same time
Beforecheckvalues	Triggers before validating data (validation rules are editrules defined in Colmodel) Beforecheckvalues:function (Posdata,formid,mode) {} Parameter description Posdata:json key value pairs data, the key name originates from the name of the Colmodel configuration Formid:jquery the wrapped object, get the form ID value by formid[0].id Mode: Current editing mode, adding (add) or editing (edit) Event needs to return a JSON key-value pair object for submission to the server.
Beforeinitdata	Triggered before initialization of input form data. Beforeinitdata:function (Formid) {...}, parameters are the same as mentioned above Event needs to return Ture/false, return false, cancel action does not show form dialog box
Beforeshowform	Triggered before the form is displayed. Beforeshowform:function (Formid) {...}
Beforesubmit	Triggers before data is submitted to the server Beforesubmit:function (PostData, formid) {... return[success,message];} Method needs to return array information in [Success,message] format Success:boolean value, true to indicate that subsequent operations continue, otherwise stop and display an error message (messages) to prompt the user. Message: The prompt displayed when the error occurs
Onclickpgbuttons	Available only in edit mode. Click on the Up/down button to trigger before leaving the currently displayed data, allowing you to use what is currently loaded in the form (such as Save) Onclickpgbuttons:function (Whichbutton, Formid, rowID) {...} Whichbutton: Click which object ' prev ' or ' Next ' Formid:jquery the wrapped object, get the form ID value by formid[0].id ROWID: Current data row ID (id not on/next data)
Onclicksubmit	Click the Submit button to submit the data construct after the trigger Onclicksubmit:function (params, postdata) {... return {Add_data}} Params: Method Selection Configuration Item PostData: Submitted Data Method can return a JSON key value pair object to extend PostData data
Oninitializeform	Trigger once, when creating data for edit or add mode Oninitializeform:function (Formid) {...}
OnClose	The form dialog box fires before closing, and can return true or false. Returning TRUE or not returning a value closes the Form dialog box, and False does not close the Form dialog box.
Errortextformat	It is better to display an error message when an error occurs after an Ajax call. Errortextformat:function (XHR) Need to return information displayed to the user (string type)
Serializeeditdata	If this event is set, the data that is passed to the AJAX request is serialized when the data 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.

how the form constructs

Form constructs allow hidden fields defined by the following rule Colmodel to be included in the form, where the row is set to hidden (display:none) The id attribute value of the editable element is from the Name property value in the Colmodel configuration The Name property value of an editable element is derived from the Name property value in the Colmodel configuration to make it easy to manipulate elements in a form, the ID of the row (TR) that edits the element is constructed as "Tr_" + name (from the name value configured in Colmodel). Example-Shrink HTML code to run code [save your source code as an HTML file if it is not working] <form ....>
<table>
<tr id= ' Tr_myfield ' >
<td> Caption </td> <td>edited element named, in Colmodel, as "MyField" </td>
</tr> ...
</table>
</form>

This enables us to display and hide table rows in beforeshowform events with certain conditions

data submitted to the server

Data submitted to the server in edit mode gives the JSON key value pair object ({...}) An additional Id:rowid key value pair (rowID for the edited row ID) for all input elements, including the row is hidden, the key value pair (name is the name of the INPUT element) append the Oper:edit key value pair indicates that the edit mode editdata is not empty. will be extended to the submitted data to be submitted together if the Onclicksubmit event also returns additional data, it will be committed to the server together. adding row: Adding new data rows

The method to add a new row of data is also Editgridrow, indicating that ROWID is set to "new." This method uses the Editurl configuration in Les "> and Jqgrid" for the general editing properties defined in Colmodel

Call way-shrink JavaScript code jQuery ("#grid_id"). Editgridrow ("New", properties);

New API Invocation Method-shrinks JavaScript code jQuery ("#grid_id"). Jqgrid (' Editgridrow ', ' new ', properties);

Parameter description Grid_id:jqgrid ID properties: A key-value pair object that contains any of the properties and events listed below

Properties defined in the language file used by this method-shrink JavaScript code $.jgrid = {
//...
    edit : {
        addcaption:   "Add record",
        editCaption:  edit  Record ",
        bSubmit:  Submit",
         bCancel:  "Cancel",
         bclose:  "Close",
        saveData:  data has  Been changed! save changes? ",
        byes :   "Yes",
        bNo :  "No",
         bExit :  "Cancel",
//...
    },
//...
}

These default options can be reconfigured when the method is invoked. When passing parameters through a method, for example, by using bsubmit: "Submit" instead of $.jgrid.edit.bsubmit: "Submi", as in parameter configuration and edit mode, refer to the "how" the " form" constructed How a form constructs a colmodel-defined hidden field that is contained in a form, where the row is set to hidden (display:none) The id attribute value of an editable element is derived from the Name property value in the Colmodel configuration The Name property value of an editable element comes from the Name property value in the Colmodel configuration to easily manipulate the elements in the form, the ID of the row (TR) in which the edit element is constructed is "tr_" + name (from the name value configured in Colmodel)

Example

-Shrink the HTML code to run the code [if the operation is not effective, please save the source code as an HTML file run] <form ....>
<table>
<tr id= ' Tr_myfield ' >
<td> Caption <