rest - 如何通过 Azure 移动服务使用服务器端排序和分页

Question

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

请分享对此的想法。

Answer 1

Windows Azure 移动服务提供 REST API，可用于获取/插入/编辑/删除您为相应访问配置的表的数据(请参阅 the documentation )。 Query records operation请求使用 HTTP GET 动词。它支持开放数据协议(protocol) (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"重命名另外两个参数，但是因为我们需要计算 $skip并附加sord之后sidx我们需要使用serializeGridData 。因此本例中不需要对其他参数进行重命名。
• 使用 serializeGridData我们构建将发送到服务器的选项列表。
• ajaxGridOptions将用于设置 jQuery.ajax 请求的附加参数，该请求在内部执行 jqGrid 以访问服务器。我在示例中使用的选项设置 Content-Type: application/json和X-ZUMO-APPLICATION: myKey在 HTTP header 中
• 服务器的响应不包含total (总页数)，所以我们使用beforeProcessing在处理响应之前，根据其他信息填充属性的回调。
• 因为我们使用$inlinecount=allpages URL 中的选项来自服务器的响应将包含有关记录总数的信息，并且数据页将包装在 results 中。答案的一部分。所以我们使用jsonReader: {repeatitems: false, root: "results", records: "count"}阅读回复。
• 我们必须删除 loadonce: true选项，因为服务器仅返回请求的数据页而不是整个数据集。