Developers can create custom actions, or use the 6 actions that Jqgrid already defined. Jqgrid predefined actions add a new record as follows edit selected rows view selected records Delete selected rows find records reload grid
These 6 buttons are located at the bottom left of the navigation layer, as shown in the following illustration
The navigation layer is not necessarily at the bottom and can be placed inside the grid window. At the same time, the navigation layer is optional and can be deleted. * You can do it in the navigation. Jqgrid custom buttons with custom actions can modify the information that the mouse moves to the prompt on the button (see below, text can be found in the language file)
* navigation buttons can be placed on the left, middle or right to use
Navigator is a Jqgrid method that can be used to activate the configuration by extending the Jqgrid method, as shown in the following example. The parameters of the guest configuration are given at the bottom.
The built-in navigation is placed on the pagination element content. All Jqgrid pager need to be configured. Built-in navigation actions correspond to form edit Action
definitions
To use navigation, Form Edit module, Common module and optional the search and Modal modules need to be checked, download address: http://www.trirand.com/blog/?page_id=6
HTML Definitions <body>
...
<table id= "List" > </table>
<div id= "Gridpager" > </div>
...
</body>-Shrink the JavaScript code jQuery ("#grid_id"). Jqgrid ({
...
Pager: ' #gridpager ',
...
});
JQuery ("#grid_id"). Navgrid (' #gridpager ', {parameters},prmedit, Prmadd, Prmdel, Prmsearch, Prmview);
...
New API call Way-shrink JavaScript code//...
JQuery ("#grid_id"). Jqgrid ({
//...
Pager: ' #gridpager ',
//...
});
JQuery ("#grid_id"). Jqgrid (' Navgrid ', ' #gridpager ', {parameters},prmedit, Prmadd, Prmdel, Prmsearch, Prmview);
//...
Chained call mode-shrink JavaScript code//...
JQuery ("#grid_id"). Jqgrid ({
//...
Pager: ' #gridpager ',
...
}). Navgrid (' #gridpager ', {parameters}, Prmedit, Prmadd, Prmdel, Prmsearch, Prmview);
//...
Parameter description grid_id: ID of the Jqgrid object that has been instantiated Gridpager: Navigation bar Container ID parameters: Configuration items listed below Prmedit, Prmadd, Prmdel, Prmsearch, Prmview : JSON object that contains the parameters and events required in form editing, refer to form editing
Prmedit, Prmadd, Prmdel, Prmsearch, prmview you need to define an ID parameter to differentiate the navigation button, and if the ID is not defined, it will be composed of the prefix and the grid ID. "Notice the sequence of these parameters, the sequential wrong definition of the object or in accordance with the above sequential definition, such as you only need to add a button, Prmedit This parameter cannot be omitted, pass {} Enable default configuration"
If the button ID is not set, the ID is generated using the following rule. Add the button, id "add_" +grid ID edit button, id "edit_" +grid ID delete button, id "DEL_" +grid ID view button, id "view_" +grid ID lookup button, id "Search_" + The ID refresh button for the grid, the ID of "Refresh_" +grid The code below defines an edit button-shrinks the JavaScript code//...
JQuery ("#grid_id"). Jqgrid ({
//...
Pager: ' #gridpager ',
...
}). Navgrid (' #gridpager ', {}, {id: ' Myedit '});
//...
If ui-state-disabled is added to these buttons, both the button and the click Action are disabled.
Parameters
Navigation can use the following options from the language configuration file.
If you want to modify the information that is prompted on the mouse hover button, you can replace the bottom title of the sample code, for example, to modify the mouse hover cue message for the View button, Viewtitle: "View selected row"-Shrink the JavaScript code $.jgrid = {
...
Search: {
Caption: "Search ...",
Find: "Find",
Reset: "Reset",
OData: [' equal ', ' not equal ', ' less ', ' less or equal ', ' greater ', ' greater or equal ', ' begins with ', ' does not ' begin With ', ' was in ', ' isn't in ', ' ends with ', ' does not-end with ', ' contains ', ' does not contain '],
Groupops: [{op: ' and ', Text: ' All '}, {op: ' OR ', text: ' Any '}],
Matchtext: "Match",
Rulestext: "Rules"
},
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",
},
View: {
Caption: "View Record",
Bclose: "Close"
},
Del: {
Caption: "Delete",
Msg: "Delete selected record (s)?",
Bsubmit: "Delete",
Bcancel: "Cancel"
},
Nav: {
EditText: "",
Edittitle: "Edit selected Row",
AddText: "",
AddTitle: "Add new Row",
Deltext: "",
Deltitle: "Delete selected Row",
SearchText: "",
Searchtitle: "Find Records",
Refreshtext: "",
Refreshtitle: "Reload Grid",
Alertcap: "Warning",
Alerttext: "Please, select Row",
Viewtext: "",
Viewtitle: "View selected Row"
},
...
$.jgrid.edit, $.jgrid.add, $.jgrid.del and $.jgrid.search these configured buttons appear on the same line.
The full configuration of parameters play is as follows
| Configuration Name | type | Description | Default Value |
|---|---|---|---|
| Add | Boolean | Whether to display the Add action in the navigation bar. Clicking this button will call the AddRow (addparams) method | True |
| AddIcon | String | Sets the icon for the Add button. Only icons that can be set to a higher UI than the current | Ui-icon-plus |
| AddText | String | The text content displayed in the Add button | Empty |
| AddTitle | String | The message that appears when you move the mouse over the Add button | ADD New Row |
| Alertcap | String | Do not select a row, click Edit, Delete, view button, pop-up prompt window title bar display information | Warning |
| Alerttext | String | Do not select a row, click Edit, Delete, view button, pop-up Prompt window content container display information | Please, select row |
| Clonetotop | Boolean | Set to True, all the bottom part of the page's actions are cloned and added to the top part of the page. Note that Navgrid can only do YuYu top part of the page. Top partial page Container ID format griid+ "_toppager" | False |
| Closeonescape | Boolean | Defines whether the prompt window can be closed by pressing the ESC key | True |
| Del | Boolean | Whether to display the delete action in the navigation bar. Clicking this button will call the Delgridrow () method | True |
| Delicon | String | Sets the icon for the Delete button. Only icons that can be set to a higher UI than the current | Ui-icon-trash |
| Deltext | String | The text content displayed in the Delete button | Empty |
| Deltitle | String | The message that appears when you move the mouse over the add delete | Delete selected row |
| Edit | Boolean | Whether to display the edit action in the navigation bar. Clicking this button will call the Editrow (editparams) method | True |
| Editicon | String | Sets the icon for the Edit button. Only icons that can be set to a higher UI than the current | Ui-icon-pencil |
| EditText | String | The text content displayed in the Edit button | Empty |
| Edittitle | String | The message that appears when you move the mouse over the edit button | Edit selected row |
| Position | String | Defines the position of the navigation buttons in the paging container, with the available values: left, center, and right. | Left |
| Refresh | Boolean | Whether to display the refresh action in the navigation bar. Clicking on this button will call trigger ("Reloadgrid") and empty the query parameters. | True |
| Refreshicon | String | Sets the icon for the Refresh button. Only icons that can be set to a higher UI than the current | Ui-icon-refresh |
| Refreshtext | String | The text content displayed in the Refresh button | Empty |
| Refreshtitle | String | The message that appears when you move the mouse over the refresh button | Reload Grid |
| Refreshstate | String | Defines how the grid is to be reloaded. Firstpage:grid reloads the first page of data. Current: Saves the active page and current selection |
FirstPage |
| AfterRefresh | function | Define events that are triggered when the refresh button is clicked | Null |
| Beforerefresh | function | Define events that are triggered before the refresh button is clicked | Null |
| Search | Boolean | Whether to display the query action in the navigation bar. Clicking this button will call the Searchgrid method | True |
| Searchicon | String | Sets the icon for the Refresh button. Only icons that can be set to a higher UI than the current | Ui-icon-search |
| SearchText | String | The text content displayed in the Refresh button | Empty |
| Searchtitle | String | The message that appears when you move the mouse over the refresh button | Find Records |
| View | Boolean | Whether to display the view action in the navigation bar. Clicking this button will call the Viewgridrow method | False |
| Viewicon | String | Sets the icon for the View button. Only icons that can be set to a higher UI than the current | Ui-icon-document |
| Viewtext | String | The text content displayed in the View button | Empty |
| Viewtitle | String | The message that appears when you move the mouse over the view button | View selected row |
| Addfunc | function | Configuring this function will replace the built-in Add action handler function. This method has no parameters | Null |
| Editfunc | function | Configuring this function replaces the built-in editing action handler function. The row ID of the parameter being edited | Null |
| Delfunc | function | Configuring this function will replace the built-in delete action handler function. The row ID of the parameter being edited | Null |
Example-shrink JavaScript code//...
JQuery ("#grid_id"). Jqgrid ({
//...
Pager: ' #gridpager ',
//...
}). Navgrid (' #gridpager ', {view:true, del:false},//Enable View button, disable Delete button
{},//Using the default modification configuration
{},//Using the default add configuration
{},//delete instead that del:false we need this
{multiplesearch:true},//word order Advanced query
{Closeonescape:true}/* The user presses the ESC key to close the dialog box */
);
//...
The above code enables the view operation, and you can close the prompt dialog box by ESC, set the advanced query, and disable the delete button
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
