实现Jquery的Jqgrid表格组件的方法教程
用法还算简单，我也是摸着石头过河，写了几天curd才慢慢的了解他，我用到的场景就是 用来取值，在页面进行相关数据的展示，如下图：
看了上图，应该可以说是很明白是什么意思了，接下来说说如何实现，大多说明写在注释里，方便看！！！
第一步 创建form表单，内含
**注意form的id和内嵌表格**
<form name="searchform" id="searchform" method="get" accept-charset="utf-8">
<p class="shop-init-container-table-wrapper">
<table class="ui-table js-ui-table" id="grid-table"></table>
<p class="datatables-wrapper clearfix" id="grid-pager"></p>
</p>
</form>
然后在 里相应的方法实现，前台发送请求到获取数据
<script type="text/javascript">
var table_01;
$(function(){
//实例化表格
table_01=new jqgrid({
grid_selector:'#grid-table',//grid选择器，用来显示数据的自定义table的id
pager_selector:'#grid-pager',//分页器选择器 ,定义的是一个p，在table下面，最为分页显示栏
table_wrapper:'.shop-init-container-table-wrapper',
url:'<c:url value="/dict/all" />',//向后台请求controller的地址，
formid:'#searchform',//最外层form表单的id
multiselect:false,// 是否多选
//整体是一个回调函数，不输出内容，可自行注释掉该函数看页面有啥变化。
gridcallback:function(){
console.log();
},
colnames:['名称','分类代码'],
colmodel:[
//colnames与colmodel一定要相对应，内涵参数详见下方jqgrid api链接
{name : 'name',index : 'icon',sortable :false,align:'center',width:'14',classes:''},
{name : 'code',index : 'icon',sortable : false,align:'center',width:'14',classes:''},
],
});
});
</script>
想继续了解的童鞋可以点击这里jqgrid api 中文说明一系列参数。
后台java部分内容
@requestmapping(value="/all",method=requestmethod.get)
@auth(tag="selectdictype_meu")//权限注解
@responsebody//这注解返回数据
public string selectall(httpservletrequest request ,httpservletresponse response,integer page,integer rows,string name,string code){
//分页,p和pd是公司内部封装的分页，可根据自己的实际情况写分页(数据大的情况)
page p = new page();
p.setpage(page);
p.setrows(rows);
pagedata pd= new pagedata();
pd.put("name", name);
pd.put("code", code);
//pd数据封装进page里，传到后台查询
p.setpd(pd);
//去查询
list<dicttype> list= dictservice.getdictypeall(p);
return p.getjqgridjson(list) ;
}
基本上只要前台调试，请求200，并且能正常显示表的列名，基本上就可以说是前台代码没错，也能和后台相通了，接下来就是主要写你后太的查询逻辑。