JqGrid是基于jQuery的表格插件，在開發(fā)Web項目中經(jīng)常需要用到表格的操作，JqGrid給予了我們很好的使用體驗。

JqGrid表格具有很多的特性，如：排序、搜索、編輯、分頁、導入和導出等等。接下來我們會通過一個例子來介紹JqGrid表格的基本使用。

$("#gridTable").jqGrid({
url: 'data.json',
datatype: 'json',
mtype: 'GET',
colNames: ['ID', '姓名', '城市', '年齡'],
colModel: [
{ name: 'id', index: 'id', width: 55 },
{ name: 'name', index: 'name', width: 90 },
{ name: 'city', index: 'city', width: 90 },
{ name: 'age', index: 'age', width: 80, align: "right" }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#gridPager',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption: "JqGrid 表格基本使用"
});

代碼詳解：

// 初始化表格，指定數(shù)據(jù)來源 data.json
// 定義表格的datatype是json
// 定義表格的請求方式為GET
$("#gridTable").jqGrid({
url: 'data.json',
datatype: 'json',
mtype: 'GET',
// 定義表頭，需要每列的名稱，以及每列的寬度
colNames: ['ID', '姓名', '城市', '年齡'],
colModel: [
{ name: 'id', index: 'id', width: 55 },
{ name: 'name', index: 'name', width: 90 },
{ name: 'city', index: 'city', width: 90 },
{ name: 'age', index: 'age', width: 80, align: "right" }
],
// rowNum 和 rowList用于實現(xiàn)分頁功能
rowNum: 10,
rowList: [10, 20, 30],
// pager用于指定分頁欄的ID
pager: '#gridPager',
// sortname用于指定默認排序的列
sortname: 'id',
// viewrecords用于定義是否顯示記錄數(shù)
viewrecords: true,
// sortorder定義默認排序的順序，asc表示升序，desc表示降序
sortorder: "desc",
// caption用于定義表格標題
caption: "JqGrid 表格基本使用"
});

通過上面的代碼，我們可以基本使用JqGrid表格操作，除此之外，JqGrid還有很多的高級特性。

更多JqGrid表格的詳細介紹可以參考官方文檔：https://www.trirand.com/jqgridwiki/doku.php?id=wiki:start