1

我正在将 jqGrid (inlineNav) 与来自 azure 服务的数据一起使用，并且有兴趣了解如何将服务器端排序和分页与 Azure 移动服务一起使用。

请分享对此的想法。

4

1 回答 1

3

Windows Azure 移动服务提供 REST API，可用于获取/插入/编辑/删除您为相应访问配置的表的数据（请参阅文档）。查询记录操作请求使用 HTTP GET 动词。它支持开放数据协议 (OData) URI 选项$orderby, $skip,$top和$inlinecount可用于填充 jqGrid。

$("#list4").jqGrid({
    url : 'https://mohit.azure-mobile.net/tables/Schedules',
    datatype: "json",
    height: "auto",
    colModel: [
        { name: "RouteId", width: 50 },
        { name: "Area", width: 130 }
    ],
    cmTemplate: {editable: true, editrules: { required: true}},
    rowList: [10, 20, 30],
    rowNum: 10,
    prmNames: { search: null, nd: null },
    ajaxGridOptions: {
        contentType: "application/json",
        headers: {
            "X-ZUMO-APPLICATION": "myKey"
        }
    },
    serializeGridData: function (postData) {
        if (postData.sidx) {
            return {
                $top: postData.rows,
                $skip: (parseInt(postData.page, 10) - 1) * postData.rows,
                $orderby: postData.sidx + " " + postData.sord,
                $inlinecount: "allpages"
            };
        } else {
            return {
                $top: postData.rows,
                $skip: (parseInt(postData.page, 10) - 1) * postData.rows,
                $inlinecount: "allpages"
            };
        }
    },
    beforeProcessing: function (data, textStatus, jqXHR) {
        var rows = parseInt($(this).jqGrid("getGridParam", "rowNum"), 10);
        data.total = Math.ceil(data.count/rows);
    },
    jsonReader: {
        repeatitems: false,
        root: "results",
        records: "count"
    },
    loadError: function (jqXHR, textStatus, errorThrown) {
        alert('HTTP status code: ' + jqXHR.status + '\n' +
            'textStatus: ' + textStatus + '\n' +
            'errorThrown: ' + errorThrown);
        alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
    },
    pager: "#pager1",
    sortname: "Area",
    viewrecords: true,
    caption: "Schedule Data",
    gridview: true
});

对上述代码的一些注释：

  • 我删除sortable: false以允许通过单击列标题对网格进行排序
  • 关于prmNames选项一，可以删除向服务器发送不需要的参数或重命名它。我曾经prmNames: { search: null, nd: null }拒绝发送_search和nd选项。可以用来重命名sort: "$orderby", rows: "$top"另外两个参数，但是因为我们需要在需要使用. 所以在这种情况下不需要重命名其他参数。$skipsordsidxserializeGridData
  • 使用serializeGridData我们构建将发送到服务器的选项列表。
  • ajaxGridOptions将用于设置 jQuery.ajax 请求的附加参数，这些参数在内部执行 jqGrid 以访问服务器。我在示例集Content-Type: application/json和X-ZUMO-APPLICATION: myKeyHTTP 标头中使用的选项
  • 来自服务器的响应不包含total（总页数），因此我们使用beforeProcessing回调根据其他信息填充属性，然后再处理响应。
  • 因为我们$inlinecount=allpages在 URL 中使用了选项，所以来自服务器的响应将包含有关记录总数的信息，并且数据页面将包含在results答案的一部分中。所以我们jsonReader: {repeatitems: false, root: "results", records: "count"}用来读取响应。
  • 我们必须删除loadonce: true选项，因为服务器只返回请求的数据页面而不是整个数据集。
于 2013-04-12T19:54:13.750 回答