loadonce:true导致jqGrid的分页问题

san*_*tro 2 jquery-ui jqgrid

我有一个如下所述的jqGrid:

UsersList.aspx

<div id="users" class="grid-right">
    <h3>Users</h3>
    <table id="client-group-users-list"></table>
    <div id="client-group-users-list-pager"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

userlistgroup.js

function createUsersGrid(getUsersForClientGroupUrl) {
    $('#client-group-users-list').jqGrid({
        height: "auto",
        width: "590",
        url: getUsersForClientGroupUrl + "?random=" + Math.random(),
        rowNum: 10,
        mtype: 'POST',
        viewrecords: true,
        postData: { clientGroup: getClientGroupId(), active: true },
        datatype: 'json',
        colNames: ['ClientGroupID', 'Login', 'Role'],
        //pgbuttons: false,
        //pgtext: null,
        //viewrecords: false,
        gridview: true,
        colModel: [
            { name: 'ClientGroupID', index: 'ClientGroupID', hidden: true },
            { name: 'Login', index: 'Login', search: false, width: 130, sorttype: "string" },
            { name: 'Role', index: 'Role', search: false, width: 100 }
        ],
        caption: "Users for client group: " + getClientGroupName(),
        pager: '#client-group-users-list-pager',
        ondblClickRow: function (userId) {
            editUser(userId);
        },
        sortname: 'Login',
        sortorder: 'asc',
        loadui: 'enable',
        loadError: function (xhr, status) {
            location.reload();
        }           
    })
    .jqGrid('navGrid', '#client-group-users-list-pager',
        { add: false, del: false, edit: false, search: false, view: false })
}
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

Login列上的排序不起作用.但是,如果我放置loadonce:true它然后它开始工作,但没有反映记录的总数,并且分页功能停止工作.

任何人都可以帮助我处理排序和分页一起工作datatype: 'json'.

谢谢和问候,Santosh Kumar Patro

Ole*_*leg 5

您似乎有一些典型的理解问题,jqGrid如何与服务器交互.

如果您使用datatype: 'json' without loadonce: trueoption,服务器负责排序,分页和可选地搜索/过滤数据.在这种情况下到服务器的每个请求包含重要的输入参数,其缺省值是:page,rows,sidxsord.还有其他参数_search,还有其他参数,nd但在您的情况下没有那么重要.所以在第一次加载网格内容jqGrid后发布到URL的东西getUsersForClientGroupUrl就好了

page=1&rows=10&sidx=Login&sord=asc
Run Code Online (Sandbox Code Playgroud)

的值rows,sidx并且sord参数对应的值rowNum,sortname并且sortorder您使用的选项.服务器应提供请求的数据页面(数据的第1页,页面大小为10行).人们可以使用prmNames网格选项来重命名page,rows,sidxsord参数.

重要的是要了解当用户单击"下一页"/"上一页"按钮或者如果用户单击列标题以更改排序,则jqGrid 向服务器发出新请求,服务器应提供数据页面根据输入参数.

另一方面,如果您使用loadonce: true选项,则服务器应返回所有数据(所有页面).加载的数据应该只是排序对应sidxsord选项.加载数据后jqGrid datatype从更改"json""local".所有下一个排序,分页和过滤(参见filterToolbar方法)或排序(参见此处此处)将由jqGrid在内部(在客户端)实现.

如果需要从服务器重新加载数据,则应重置datatypeto 的值"json"(请参阅答案).通常在beforeRefresh回调中执行此操作navGrid.因此,如果用户单击导航栏的"刷新"按钮,则将从服务器重新加载网格.

我猜你刚刚没有改变你的服务器代码,当你使用选项时服务器仍然会返回一页数据loadonce: true.这是不对的.不要忘记在服务器上对初始数据进行排序.

您发布的代码中的一些常见问题.我建议您"?random=" + Math.random()从URL中删除部分,因为它没有任何意义.这种方法通常用于防止在使用情况下缓存服务器响应mtype: "GET"(HTTP GET动词).你用mtype: 'POST'.所以响应根本不会改变.此外,如果您使用,mtype: "GET"那么jqGrid附加已经具有与nd您的random参数具有相同角色的参数的URL .最好的方法是使用jqGrid选项设置Cache-Control服务器响应的HTTP标头private, max-age=0和要删除的标头.有关缓存的更多信息,请参阅答案另一个答案.ndprmNames: { nd: null }

另一个问题:你应该明白你只能调用一次createUsersGrid函数.这之后,与将被修改.下一个函数调用将不会做任何事情.如果只能调用一次,那么应该考虑是否需要在函数中放置JavaScript片段.或者,可以使用方法在下次使用它之前销毁所有现有的jqGrid结构.<table>id="client-group-users-list"createUsersGridGridUnload

如果您想要将该clientGroup: getClientGroupId()参数发送到服务器