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

时间:2013-05-20 13:04:37

标签: jquery sorting jqgrid client-side

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

1 个答案:

答案 0 :(得分:3)

首先,如果您想要排序或搜索/过滤网格数据本地,您必须在index 的所有项目中使用colModel属性的值与<{1}}属性的值相同。我建议您只删除列定义中的name属性。目前你使用

index

这是错误的。

您还有许多其他重要问题。

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

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

告诉我相信我不明白你的确切要求。如果你没有那么多可以在网格中显示的总日期(例如少于1000行),你可以使用data选项并从loadonce: true返回所有数据 。最初需要对数据进行排序,或者您可以使用here所述的技巧。如果您有非常大的数据集(例如,grater为10000行),则必须实现服务器端排序和数据分页。对小部分(一页)数据进行排序可能会误解使用网格的用户。

我建议您在网格中添加URLgridview: true选项。