通过点击jqgrid表格弹出需要的表格数据

首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中，Jqgrid的特点是非常鲜明的。

特点如下:

完整的表格呈现与运算功能，包含换页、栏位排序、grouping、新增、修改及删除资料等功能。

自定义的工具列
预设的Navigator工具列，可以很容易的使用新增、删除、编辑、检视及搜寻等功能。

完整的分页功能

按下任一栏位的标头，皆可以该栏位为排序项目。无论是升序或降序皆可。

预设的action formatter，可以快速而直觉地对每笔资料做运算。

支持多种数据格式。比如json、xml、array等。
下面通过代码实例给大家介绍通过点击jqgrid表格弹出需要的表格数据，具体内容如下所示：
首先，我们先定义一个函数，然后在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;}//自定义GetJqGridRowValue函数

下面是显示表格的JS文件

$（function （） { $（"#group"）.jqGrid（{url: "/Group/GetGroup",datatype: "json",mtype: "Get",colNames: ["GRP_ID", "GRP_NAME", "GRP_DESCRIPTION"],//GROUPcolModel: [ { 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: function （rowid） { var td_id = GetJqGridRowValue（"#group", "GRP_ID"）; alert（td_id）;},//点击获取gqgird的当前列的"GRP_ID"的值pager: jQuery（"#pager1"）,rowNum: 5,rowList: [5, 10, 15, 20],height: "19%",viewrecords: true,caption: "Group_Table",emptyrecords: "没有记录显示",jsonReader: { rows: "rows", page: "page", total: "total", records: "records", repeatitems: false, id: "0", editurl: "/Group/EditGroup"},autowidth: true,multiselect: false,//是否多选 }）; jQuery（"#group"）.jqGrid（"navGrid", "#pager1",{ edit: true, add: true, del: true, position: "left", alerttext: "请选择需要操作的数据行！" }, {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: "你确定要删除么？",afterComplete: function （response） { if （response.responseText） {alert（response.responseText）; }} } ）;}）;

ps:jqGrid清空表格中的所有行数据
jqGrid清空表格中数据的方法如下：

jQuery（"#gridTable"）.jqGrid（"clearGridData"）;