jquery - 以编程方式对服务器数据进行本地排序 jqGrid

Question

我有一个服务器端数据绑定(bind)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

首先，如果您想要在本地排序或搜索/过滤网格数据，您必须使用 index 的值。 colModel 的所有项目的属性与 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网格选项。