Click the jqgrid table to display the required table data _ jquery

Among the many table plug-ins, jqgrid is very distinctive, so jqgrid table plug-ins are very useful. This article introduces you to the table data you need by clicking the jqgrid table to pop up, for more information, see Jqgrid. Among the many table plug-ins, Jqgrid has distinctive features.

Features:

The complete table presentation and operation functions include page feed, column sorting, grouping, addition, modification, and deletion of data.

Custom Tool Columns

Preset Navigator Tool Columns allow you to easily use features such as add, delete, edit, view, and search.

Complete paging Function

You can press the header of any column to sort the items. Whether in ascending or descending order.

The default action formatter allows you to quickly and intuitively perform operations on each piece of data.

Supports multiple data formats. Such as json, xml, and array.

The following code shows you how to click the jqgrid table to display the required table data. The details are as follows:

First, define a function and then directly reference it in JQuery,

Function GetJqGridRowValue (jgrid, code) {var KeyValue = ""; var selectedRowIds = $ (jgrid). jqGrid ("getGridParam", "selarrrow"); if (selectedRowIds! = "") {Var len = selectedRowIds. length; for (var I = 0; I <len; I ++) {var rowData = $ (jgrid ). jqGrid ('getrowdata', selectedRowIds [I]); KeyValue + = rowData [code] + "," ;}keyvalue = KeyValue. substr (0, KeyValue. length-1);} else {var rowData = $ (jgrid ). jqGrid ('getrowdata', $ (jgrid ). jqGrid ('getgridparam', 'selrow'); KeyValue = rowData [code];} return KeyValue;} // custom GetJqGridRowValue Function

The following figure shows the JS file of the table.

$ (Function () {$ ("# group "). jqGrid ({url: '/Group/getgroup', datatype: 'json', mtype: 'get', colNames: ['grp _ id', 'grp _ name ', 'grp _ description'], // GROUP colModel: [{key: true, hidden: true, name: 'grp _ id', index: 'grp _ id '}, {key: false, name: 'grp _ name', index: 'grp _ name', editable: true}, {key: false, NAME: 'grp _ description ', index: 'grp _ description', editable: true},], ondblClickRow: func Tion (rowid) {var td_id = GetJqGridRowValue ("# group", "GRP_ID"); alert (td_id );}, // click to obtain the value pager: jQuery ('# pager1'), rowNum: 5, rowList: [5, 10, 15, 20], height: '200', viewrecords: true, caption: 'group _ table', emptyrecords: 'No record display', jsonReader: {rows: 'rows ', page: 'page', total: 'Total', records: 'records', repeatitems: false, id: '0', editurl: '/Group/editgroup'}, autowid Th: true, multiselect: false, // whether to select multiple}); jQuery ("# group "). jqGrid ('navgrid', "# pager1", {edit: true, add: true, del: true, position: 'left', alerttext: "select the data row to be operated! "},{ ZIndex: 100, url: '/Group/editgroup', closeOnEscape: true, closeAfterEdit: true, recreateForm: true, afterComplete: function (response) {if (response. responseText) {alert (response. responseText) ;}},{ zIndex: 100, url: '/Group/creategroup', closeOnEscape: true, closeAfterEdit: true, afterComplete: function (response) {if (response. responseText) {alert (response. responseText );}}},{ ZIndex: 100, url: '/Group/DeleteGroup', closeOnEscape: true, closeAfterEdit: true, recreateForm: true, msg: "Are you sure you want to delete it? ", AfterComplete: function (response) {if (response. responseText) {alert (response. responseText );}}});});

Ps: jqGrid clears all row data in the table

The following describes how to clear data in a jqGrid table:

jQuery("#gridTable").jqGrid("clearGridData");