实现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，并且能正常显示表的列名，基本上就可以说是前台代码没错，也能和后台相通了，接下来就是主要写你后太的查询逻辑。