服务器数据jqGrid上的程序化本地排序

Question

我有一个服务器端数据绑定jqGrid。我只想在单击排序按钮时进行本地排序。

我做到了：刚刚编辑：获取完整的数据，然后排序并将其插入到网格中。

已编辑

var asc = true;
$(document).ready(function () {
    $("span.s-ico").click(function () {
        var allData = jQuery("#myGrid").jqGrid('getRowData');
    if (asc == true) {
        allData.sort(function (a, b) {
            if (a.myID> b.myID) return -1;
            else return 1;
        });
        asc = false;
    }
    else {
        allData.sort(function (a, b) {
            if (a.myID> b.myID) return 1;
            else return -1;
        });
        asc = true;
    }
    var alt = $.extend(true, [], allData);
    //alt.shift().shift();
    $('#myGrid').jqGrid('setGridParam', { url: null, datatype: 'local' });
    $('#myGrid').jqGrid('setGridParam', { data: alt });
    $('#myGrid').trigger("reloadGrid");
    return false;;
      //alert("I'm clicked");
    });
});

在配置如下的jqGrid上：

$("#myGrid").jqGrid({
        url: URL,
        datatype: 'json',
        mtype: req,
        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
        colNames: ['AnotherColumn', 'myID'],
        colModel: [
                    { name: 'AnotherColumn', index: 'AnotherColumn', width: 105, sortable: false, editable: true },
                    { name: 'myID', index: 'myID', sortable: true, width: 185, editable: true }
                ],
        rowNum: 100,
        rowList: [],      
        pgbuttons: false,
        pgtext: "Page {0} of {1}",
        pgtext: null,
        pager: '#myGridPager',
        sortname: 'myID',
        viewrecords: false,
        sortorder: 'asc',
        sortable: true
    });

Answer 1

首先，如果您想在本地对网格数据进行排序或搜索/筛选，则必须在colModel的所有项中使用与name属性值相同的index属性值。我建议您只从列定义中删除index属性。当前您使用

{ name: 'AnotherColumn', index: 'Id', ...}

这是错误的。

你还有许多其他重要的问题。

如果要对本地数据进行排序，则必须首先填充本地数据。jqGrid支持data和内部_index选项。通常，需要在输入选项data中指定本地数据。在这种情况下，jqGrid在构建网格的过程中对数据进行本地排序，然后显示数据的第一页。如果使用datatype: 'json'和loadonce: true，则在填充网格显示页面的过程中会填充内部data参数。输入数据可以包含多个页面。

如果使用不带loadonce: true选项的datatype: 'json'，则不会填充任何data。因此，在将datatype更改为'local'之后，空的data将是网格的源，并且使用sortGrid方法的排序将遵循populate方法的调用，该方法仅重新加载网格。在datatype: 'local'和空data的情况下，将有空网格。

告诉信托公司，我不理解你的确切要求。如果您没有那么多可以显示在网格中的总日期(例如，少于1000行(，您可以使用loadonce: true选项并返回URL中的所有数据。数据最初需要进行排序，或者您可以使用这里描述的技巧。如果您有一组非常大的数据(例如10000行(，则必须实现服务器端数据排序和分页。对小部分(一页(数据进行排序可能会导致对使用网格的用户产生误解。

无论如何，我建议您将gridview: true和autoencode: true选项添加到网格中。