JQGrid是一个基于JQuery UI的灵活、高效的表格插件，它可以帮助开发人员快速地创建各种功能强大的表格。最新版本的JQGrid是4.7，它在以前的版本基础上进行了一些改进和升级，让开发人员可以更加轻松地构建适合自己的表格。

一、常见用法

//创建表格
$("#grid").jqGrid({
url: 'data.json',
datatype: "json",
colNames:['Name','Age','Address'],
colModel:[
{name:'name',index:'name', width:200},
{name:'age',index:'age', width:100},
{name:'address',index:'address', width:300}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager',
sortname: 'name',
viewrecords: true,
sortorder: "desc"
});
//刷新表格
$("#grid").trigger("reloadGrid");
//获取表格中的数据
var rowData = $("#grid").getRowData(rowid);

二、升级特性

1、gridResize

//启用表格的拖拽调整大小功能
$("#grid").jqGrid('gridResize');

2、gridDnD

//启用表格的拖拽排序功能
$("#grid").jqGrid('gridDnD',{
dragcopy:true,    //拖拽时是否复制
dropbyname:true  //排序时是否以name属性为准
});

3、navGrid

//设置表格的操作按钮
$("#grid").jqGrid('navGrid','#pager',{
edit:true,
add:true,
del:true
});

三、常见问题

1、表格没有数据

可能是数据格式不正确，可以通过查看数据格式来确定是否正确。

{
"rows":[
{"name":"Jack","age":22,"address":"China"},
{"name":"Lucy","age":21,"address":"USA"},
...
]
}

2、表格没有显示行号

需要设置显示行号的相关属性：

rownumbers : true,
rownumWidth: 40,
rownumBase: 0

3、表格编辑数据后没有保存

需要在编辑的事件函数中手动保存数据：

ondblClickRow: function(rowid){
$("#grid").jqGrid('editRow',rowid,true,null,null,null,null,saveData);
},
function saveData(rowid, response){
//保存数据的代码
}

JQGrid 4.7版是一个强大且易于使用的表格插件，它具有灵活、高效等特点，不仅可以帮助开发人员快速构建各种类型的表格，也可以为开发人员提供更多的优化方案，减少糟糕的用户体验，非常值得开发人员学习和使用。