2.1 客制化的工具列。
2.2 预设的Navigator 工具列，可以很容易的使用新增、删除、编辑、检视及搜寻等功能。
2.3 完整的分页功能。
2.4 按下任一栏位的标头，皆可以该栏位为排序项目。无论是升幂或降幂皆可。
2.5 预设的action formatter，可以快速而直觉地对每笔资料做运算。
2.6 除了jqGrid lib 所提供之formatter(包括email，link，select，checkbox，date 等) 外，开发者可以从资料来源自订资料显现方式，即所谓之custom formatter。 
- 采用CSS为布景，搭配jQuery UI，程式设计师不再需要花精神于页面设计。之前开发程式仍须仰赖美术设计师做画面修改及图示设计，往往一来一回就花费了许多时间。 UI CSS Framework 提供我们预设的版型、色系、图示等可以直接套用，甚至随时更换。又或者可以直接将预设的版型作客制化，十分方便。有关jQueryUI Theme的说明，请参考http://jqueryui.com/themeroller/。
- 跨浏览器：目前测试支援的浏览器有 IE 8.0+， FireFox 2.0+， Safari 3.0+， Opera 9.2+ 及Google Chrome。
- 支援多种预设或自订的资料格式。
- 支援多种编辑功能，包括Inline editing、Form editing 及Cell editing。下图为Form Editing 模式，使用者选择新增或编辑资料时，程式会跳出一个对话框供使用者编辑，并聚焦于该表格。
下图为Inline Editing 模式，使用者可直接于Grid表格上编辑，是一种更为直觉的使用方式。 
- 筛选与搜寻：于Navigator 工具列上提供任意栏位之筛选握搜寻功能，对资料量庞大的表格来说十分方便好用。
- 容易自学：jqGrid 的学习门槛主要在jQuery+CSS 的使用，若已经熟习上述技术的开发者应该没有入门的问题。也由于jqGrid 十分受欢迎，因此使用Google搜寻几乎可以找到所有的使用及解决方案。当然，原提供者网站内容十分完整，包含Method、API、Event 及option说明文件及范例。
范例：
接著我们用一个简单的程式来说明jqGrid 的使用。
Step1：下载jqGrid插件，建议所有的元件都一次下载。下载网址http://www.trirand.com/blog/?page_id=6
Step 2：于HTML档案中须将必要之css及js 档案引用进来
<link rel="stylesheet" type="text/css" ref=" jquery-ui-1.8.13.custom.css"/>
<link rel="stylesheet" type="text/css" href="ui.jqgrid.css" />
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="grid.locale-zh.js" type="text/javascript"></script>
<script src="jquery.jqGrid.min.js" type="text/javascript"></script>
Step 3：HTML grid 程式码
<table id="list"></table>
<div id="list_pager"></div>
Step 4：java script 程式码
伺服器端经由getdata.php产生XML 内容交给jqGrid 显示
$("#list").jqGrid({
url:'getdata.php?act=initial',
datatype: 'xml',
mtype: 'GET',
Step 5：java script 程式码
建立栏位名称及属性
colNames:['ID Number','Last Sales','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true, xmlmap: "id" },
{name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date", xmlmap: "sdate" },
{name:'name',index:'name', width:150,editable: true, editoptions:{size:"20",maxlength:"30"}, xmlmap: "name" },
{name:'stock',index:'stock',width:60,editable:true,edittype:"checkbox",editoptions:{value:"Yes:No"}, xmlmap: "stock" },
{name:'ship',index:'ship',width:90,editable:true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}, xmlmap: "ship" },
{name:'note',index:'note',width:200,sortable:false,editable:true,edittype:"textarea",editoptions:{rows:"2",cols:"10"}, xmlmap: "note"}],
Step 6：java script 程式码
建立grid属性，editurl 是指资料新增、编辑及删除时的伺服器端程式
pager: '#list_pager',
autowidth:true,
height:'100%',
rownumbers: true,
rownumWidth:30,
toolbar: [true, "top"],
toppager: true,
pgbuttons: true,
pginput: true,
rowNum: 15,
rowList: [10, 15, 20, 25, 30, 50, 100],
rowNum:15,
viewrecords: true,
loadonce:true,
gridview: true,
editurl : 'setdata.php?q=dummy',
caption: '导览员列表'
Step 7：java script 程式码
事件处理函示
loadComplete: function () {
},
gridComplete: function () {
},
onSelectRow:function (id) {
}
})
Step 8：java script 程式码
建立Navigator pager
$("#list").jqGrid('navGrid','#list_pager',{
cloneToTop: true, edit:false, add:true, del:false, view:true, addtext: "新增资料", addtitle: "新增资料",viewtext: "检视资料", viewtitle: "检视资料",searchtext: "搜寻...", searchtitle: "搜寻...", refreshtext: "更新", refreshtitle: "更新"},
{}, /*default settings for edit*/
{
url:'setdata.php?act=add',
closeAfterAdd:true,
closeOnEscape:true,
afterComplete: function (response, postdata, formid) {
if ($("#list").getGridParam("datatype") === "local") {
$("#list").setGridParam({ datatype: 'xml' });
}
$("#list").trigger("reloadGrid");},
beforeShowForm: function (form) {
}
}, /*default settings for add*/
{}, /*default settings for delete*/
{multipleSearch:true,closeOnEscape:true,closeAfterSearch:true,multipleGroup:true, showQuery: true},
/*default settings for search*/
{
closeOnEscape:true,
viewPagerButtons:false,
beforeShowForm: function (form) {
$('#viewmodlist').css('width', '450px');}
} /*default settings for view*/
);