jqgrid是一个功能强大的插件，几乎包含你能想到的grid功能，尤其适合咱们最常用的操作增删改查对数据的处理，下面我想说下自己学习jqgrid的体会，首先是安装，（因为我是接手项目才接触到jqgrid所以我就引用别人的安装方法）

1.下载文件

1. 下载jqGrid的软件包，目前最新版本为4.4.1 下载地址为：
2. 下载jQuery文件，目前最新版本为1.8.2 下载地址为：
3. 下载jqGrid皮肤，下载地址为： 我使用的是：ThemeRoller->gallery->cupertino样式

2.准备文件

在项目的根目录下，建立相应的文件夹，放入下载的文件，目录结构如下图：

3.页面中得代码

3.1、head中加入引用

• css文件引入：

 

• js文件引入：

 

3.2、body中的代码

 

其中，list4为列表jqGrid，gridPager为列表的分页div

3.3、js中的代码

$(document).ready(function(){    $("#list4").jqGrid({        url:contextPath + "search.action",        datatype:"json", //数据来源，本地数据        mtype:"POST",//提交方式        height:420,//高度，表格高度。可为数值、百分比或'auto'        //width:1000,//这个宽度不能为百分比        autowidth:true,//自动宽        colNames:['添加日期', '手机号码', '银行卡号','备注','操作'],        colModel:[            //{name:'id',index:'id', width:'10%', align:'center' },            {name:'createDate',index:'createDate', width:'20%',align:'center'},            {name:'phoneNo',index:'phoneNo', width:'15%',align:'center'},            {name:'cardNo',index:'cardNo', width:'20%', align:"center"},            {name:'remark',index:'remark', width:'35%', align:"left", sortable:false},            {name:'del',index:'del', width:'10%',align:"center", sortable:false}        ],        rownumbers:true,//添加左侧行号        //altRows:true,//设置为交替行表格,默认为false        //sortname:'createDate',        //sortorder:'asc',        viewrecords: true,//是否在浏览导航栏显示记录总数        rowNum:15,//每页显示记录数        rowList:[15,20,25],//用于改变显示行数的下拉列表框的元素数组。        jsonReader:{            id: "blackId",//设置返回参数中，表格ID的名字为blackId            repeatitems : false        },        pager:$('#gridPager')    });});

 就安装而言，主要是处理的js文件的引入，引入js后就在进行jqgrid的初始化配置，

首先是数据源，有两种方法引入一种是直接通过

...url:url,...

配置数据源，第二种是...data:data,...

有了数据源就要有处理数据的action 所以编辑editurl参数

有了数据源就要配置数据该如何显示配置colmode 按照demo案例,很快就上手了，最后是处理数据的格式    用jsonreader处理服务器到浏览器怎么显示用prmnames处理浏览器到服务器如何处理。