JQGrid 页面导航在 GSP（groovy 服务器页面）中使用 JSON 数据？答案

【问题标题】：JQGrid page Navigation with JSON data inside GSP(groovy server pages)?JQGrid 页面导航在 GSP（groovy 服务器页面）中使用 JSON 数据？
【发布时间】：2014-12-09 04:30:03
【问题描述】：

首先我想知道在 gsp 页面的“jqGrid”结构中哪种类型的分页更可取（客户端或服务器端）。

我的问题是，当我设置“loadonce:true”然后自动排序是工作和导航图标（箭头）被禁用。当我评论 out "loadonce:true" 然后排序停止工作并且导航箭头是启用但根本不工作。

我在我的项目中使用了以下内容，但我的页面导航不起作用。

控制器

class TestDBController {

    def dataSource


    def index = {

    }

    def jq_customer_list = {

        try {
            def sql = new Sql(dataSource)

            String query = "select * from employee"
            List customers = sql.rows(query)
            def count1 = sql.rows(query).size()
            def jsonCells = customers.collect {
            [cell: [it.fname,
                    it.lname,
                    it.age,
                    it.id ] 
            ]           
            }                   
            def jsonData= [ rows: jsonCells]
            render jsonData as JSON     
        }
        catch(Exception e)
        {
            System.out.println("Generated exception is "+e)
        }
      } 
}

GSP 与 jqgrid 代码 -

css 和 javascript 文件 -

<link rel="stylesheet" href="${resource(dir: 'css', file: 'timeTable.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir:'css',file:'ui.jqgrid.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir:'css/ui-lightness',file:'jquery-ui-     1.9.2.custom.css')}"type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'ttajqgridtable.css')} "type="text/css">

<g:javascript src="jquery-1.8.3.js" />
<g:javascript src="grid.locale-en.js" />
<g:javascript src="jquery.jqGrid.min.js" /> 
<g:javascript src="jquery-ui-1.9.2.custom.min.js" />

JQuery 代码

<body>
        <table id="list" class="scroll jqTable"></table>
        <div id="pager" class="scroll"></div>

        <script type="text/javascript">

            $(document).ready(function () {
             jQuery("#list").jqGrid({

                  url:'${g.createLink( controller:'TestDB', action:'jq_customer_list' )}',
                  datatype: "json",               
                  colNames:['first Name','Last Name','Age','id'],
                  colModel:[
                    {name:'fName'},
                    {name:'lName'},
                    {name:'age'},
                    {name:'id'}   
                  ],
                  rowNum: 5,
                  width : 1000,
                  height: 500,
                  shrinkToFit: true,
                  pager: "#pager",
                  paging: true,
                 viewrecords: true,
                 gridview: true,
                 loadonce:true,              
                  rowList : [ 5,10, 25],                 
                  sortname : 'fname',
                  viewrecords : true,
                  sortorder : "desc",                
                  rownumbers: true,                  
                  altRows:true,                 
                  caption: "Division Data"                
                });
             jQuery("#list").jqGrid('setGridParam',{datatype:'json'});
             jQuery("#tabs").tabs();             
            });           
            </script>

    </div>

 </body>
 </html>

【问题讨论】：

标签： jquery json grails jqgrid mvcjqgrid

【解决方案1】：

如果您只有一个小的结果集可以使用，并且您确定它永远不会增长，那么客户端分页可能没问题。如果您正在处理更大的数据集，那么您将需要实现服务器端分页。

关于客户端和服务器端分页的区别here有更彻底的讨论。

为了使用 jqgrid 实现服务器端分页，您需要对 jqgrid 提交给控制器的 jq_customer_list 操作的 max 和 offset 参数执行一些操作。其实很简单，看一下Groovy Sql docs的例子。

【讨论】：

在控制器中我平均得到 2000 条记录，所以哪种类型的分页适合我。
您需要做出判断 - 如果将这 2000 条记录拉到客户端并对其进行排序/搜索等所需的时间是可以接受的，那么您可能是最好使用客户端分页，因为它的实施工作更少......

【解决方案2】：

loadonce 是用 JQGrid 3.7 实现的。如果想实现正确的分页、排序和搜索，只需使用jqGrid的never版本（最新版本）。

这是我的工作示例 -

CSS 和 JS 文件顺序正确 -

<link rel="stylesheet"href="${resource(dir:'css/ui-lightness',file:'jquery-ui-1.9.2.custom.css')}"type="text/css">
<link rel="stylesheet"href="${resource(dir: 'css', file: 'ttajqgridtable.css')}" type="text/css">    
<link rel="stylesheet" href="${resource(dir:'css',file:'ui.jqgrid.css')}" type="text/css">

<g:javascript src="jquery-1.11.0.min.js" />
<g:javascript src="grid.locale-en.js" />
<g:javascript src="jquery.jqGrid.min.js" /> 
<g:javascript src="jquery-ui-1.9.2.custom.min.js" />

Jquery 和 JQGrid 代码 -

    <script type="text/javascript">           
        $(document).ready(function () {
         jQuery("#clist").jqGrid({

              url:'${g.createLink( controller:'TableDataJQgrid', action:'jq_customer_list' )}',
              datatype: "json",
              mtype:"post",
              colNames:['first Name','Last Name','Age','id'],
              colModel:[
                        {name:'fName', width:120, sortable: true, editable: true, align: 'center' },
                        {name:'lName',  width:120, sortable: true, editable: true, align: 'center'},
                        {name:'age',   width:80, sorttype:"int", sortable: true, editable: false, align: 'center'},
                        {name:'id' ,  width:80, sorttype:"int", sortable: true, editable: false , align: 'center'}

              ],
              rowNum: 5,
              width : 1000,
              height: 500,
              shrinkToFit: true,
              pager: "#list_pager",
              paging: true,
              viewrecords: true,
              gridview: true,
              loadonce:true,                
              rowList : [ 5,10, 25],  
              rowTotal: 21,               
              sortname : 'fname',
              viewrecords : true,
              sortorder : "desc",                
              rownumbers: true,                  
              altRows:true,                 
              caption: "Division Data"
          });
       jQuery("#list").jqGrid('navGrid','#list_pager'{edit:false,add:false,del:false});         
        });           
        </script>

【讨论】：