通过点击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'],//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: 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");

以上就是本文章的内容，希望对大家有所帮助