以编程方式对服务器数据 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 的所有项目中使用index 属性的值相同 作为name 属性的值。我建议您从列定义中删除 index 属性。目前你使用

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

这是错误的。

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

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

如果您使用datatype: 'json' 没有 loadonce: true 选项，则不会填写data。因此，在将datatype 更改为'local' 后，空的data 将成为网格的源，并且使用sortGrid 方法进行排序将在调用populate 方法之后重新加载网格。在datatype: 'local' 和空data 的情况下，您将有空网格。

为了告诉信任，我不了解您的确切要求。如果您没有太多可以显示在网格中的总日期（例如少于 1000 行），您可以使用loadonce: true 选项并从URL 返回所有数据。数据需要进行初始排序，或者您可以使用 here 描述的技巧。如果您有非常大的数据集（例如 10000 行），您必须实现服务器端数据的排序和分页。对一小部分（一页）数据进行排序可能会导致对使用网格的用户产生误解。

我建议您以任何方式将gridview: true 和autoencode: true 选项添加到网格中。