先對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");
