Jquery的Jqgrid表格组件简单实现

用法还算简单，我也是摸着石头过河，写了几天curd才慢慢的了解他，我用到的场景就是用来取值，在页面进行相关数据的展示，如下图：
这里写图片描述
看了上图，应该可以说是很明白是什么意思了，接下来说说如何实现，大多说明写在注释里，方便看！！！
第一步创建form表单，内含

**注意form的id和内嵌表格**

<form  name="searchForm" id="searchForm" method="get" accept-charset="UTF-8">

                <div class="shop-init-container-table-wrapper">
                    <table class="ui-table js-ui-table" id="grid-table"></table>
                    <div class="dataTables-wrapper clearfix" id="grid-pager"></div>
                </div> 
</form>

然后在里相应的方法实现，前台发送请求到获取数据，不需要你去写遍历，这个表格组建会自行遍历的

<script type="text/javascript">
            var table_01;
            $(function(){
                //实例化表格
                table_01=new Jqgrid({

                    grid_selector:'#grid-table',//grid选择器，用来显示数据的自定义table的id
                    pager_selector:'#grid-pager',//分页器选择器   ,定义的是一个div，在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，并且能正常显示表的列名，基本上就可以说是前台代码没错，也能和后台相通了，接下来就是主要写你后太的查询逻辑。

Jquery的Jqgrid表格组件简单实现

猜你喜欢