0

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

我的问题是，当我设置“loadonce：true”时，自动排序是工作并且导航图标（箭头）被禁用。当我注释掉“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)
        }
      } 
}

带有 jqgrid 代码的GSP -

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>
4

2 回答 2

0

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

这是我的工作示例-

顺序正确的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>
于 2014-10-15T10:11:24.563 回答
0

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

这里有关于客户端和服务器端分页之间差异的更彻底的讨论。

为了使用 jqgrid 实现服务器端分页，您需要对jqgrid 提交给控制器操作的max和参数做一些事情。这实际上非常简单，请查看Groovy文档作为示例。offsetjq_customer_listSql

于 2014-10-14T19:14:34.663 回答