JQGrid 客户端排序答案

【问题标题】：JQGrid Client Side SortingJQGrid 客户端排序
【发布时间】：2011-10-24 20:25:09
【问题描述】：

据我所知，这里和互联网上的其他几个地方都曾提出过这个问题。我已经尝试了在 StackOverflow 网站上可以找到的所有解决方案，结果相同，但没有解决我的问题。

我想从数据库中加载一次数据，然后在客户端做所有的排序操作。 loadonce 属性听起来应该可以处理这个问题，但它似乎对我不起作用。我还尝试在各种事件处理程序中将数据类型设置为本地，但没有成功。

这是我用来实例化网格的代码。

        $('#people_SelectedContacts').jqGrid({
        ajaxGridOptions:{
            type: "POST"
        },
        datatype: function(data){
            $.ajax(klg.getAppRoot()+"AJAX/GetMatterProfileContacts",{
                            data: JSON.stringify({
                MatterProfileID: $('#MatterProfileID').val()
            }),
            success: function(data){
                var contacts = data.ReturnValues;
                var mygrid = $("#people_SelectedContacts")[0];
                mygrid.addJSONData(contacts);
            },
            complete: function(){
                $("#people_SelectedContacts").setGridParam({datatype:'local'});
            }});
        },
        loadonce: true,
        colNames:['lecID','lrlID','mjID','Role','Name','Company/Court', 'Business Phone', 'Email', 'Docket #'],
        colModel:[
            {name:'LegalEntityContactID', hidden:true},
            {name:'LegalRoleLookupID', hidden:true},
            {name:'MatterJurisdictionID', hidden:true},
            {name:'LegalRoleLookupName', index:'legalrole'},
            {name:'FullName',index:'name'},
            {name:'Company',index:'company'},
            {name:'BusinessPhone',index:'bussphone'},
            {name:'Email',index:'email'},
            {name:'DocketNumber',index:'email'}
        ],
        sortable: true,
        jsonReader: {
            root:'MatterProfileContacts',
            repeatitems: false,
            id:"MatterProfileContactID"
        }
    });

数据正确加载到网格中，但正如我所说，排序命令全部执行并再次访问服务器。谁能指出我正确的方向？我从标准 HTML 表切换到 JQGrid 的唯一原因是为了排序和分组。如果我不能让客户端排序工作，那就没用了。

感谢 Stack Overflow 社区。p>

【问题讨论】：

标签： javascript jquery ajax jqgrid

【解决方案1】：

问题的原因是您使用datatype 作为函数，在 99.9% 的情况下不需要。问题是设置datatype: 'local' 并不是jqGrid 在loadonce: true 的情况下所做的唯一事情。最重要的是data 和_index 参数会填充服务器返回的数据。内部参数保存数据并将在本地排序和分页期间使用。你当前的实现没有填写data 和_index，所以loadonce: true 不能工作。

您可以使用 datatype 作为函数，而不是使用

datatype: 'json',
serializeGridData: function (data) { return JSON.stringify(data); },
postData: { MatterProfileID: function () { return $('#MatterProfileID').val(); } }

您应该另外修改jsonReader 以在root 中包含ReturnValues。我认为更改后您将能够使用loadonce: true。可能还有一些其他的小事情你需要额外做，但最重要的是你应该使用任何标准的 datatype 而不是 datatype 作为函数。

【讨论】：

虽然这并没有直接回答我的问题，但它确实引导我朝着正确的方向前进。我按照您的建议将网格更改为使用 datatype: 'json' 。我仍然有排序问题，但我意识到这是因为我使用的索引值。我没有意识到它必须匹配 JSON 数组的数据属性。
@Zero21xxx：是的，如果是服务器端数据，index 可以与name 属性不同。对于本地数据或loadonce: true，index 应与name 相同。我无法描述您需要解决的所有问题。例如，为所有具有其他排序类型为“文本”（例如“整数”或“日期”）的列包含 sorttype 可能很重要。无论如何，如果你现在使用datatype: 'json' - 你就走对了。

【解决方案2】：

按照 Oleg 的建议，我将网格更改为使用 datatype: 'json'。我仍然有排序问题，但我意识到这是因为我在列模型中使用的 index 值。列模型的index 值必须与从服务器返回的 JSON 对象的属性名称匹配。

【讨论】：