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