本文介绍了一个人怎么能使用服务器端排序和分页与Azure的移动服务的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用的jqGrid(inlineNav)与蔚蓝色的服务和有兴趣学习一个人如何可以使用服务器端排序和Azure的移动服务分页数据。

I am using jqGrid (inlineNav) with data from azure service and interested in learning how one could use server side sorting and paging with Azure Mobile Services.

请分享解决此想法。

推荐答案

的Windows Azure移动服务提供REST API,它可以被用来获取/插入/编辑/删除您对相应的访问配置表中的数据(见)。 请求使用HTTP GET动词。它支持开放数据协议(OData的)URI方案 $排序依据 $跳过 $顶部 $ inlinecount ,可以用来填补jqGrid的。

Windows Azure Mobile Services provides REST API which can be used to get/insert/edit/delete data of the the tables which you configured for the corresponding access (see the documentation). Query records operation request uses HTTP GET verb. It supports Open Data Protocol (OData) URI options $orderby, $skip, $top and $inlinecount which could be used to fill 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
});

一些评论上述code:

Some comments to the above code:


  • 我删除排序:假来允许单击列标题网格进行排序

  • 关于 prmNames 的选项可以删除不需要的参数发送到服务器或重新命名它。我用 prmNames:{搜索:空,第二:空} 拒绝 _search 和第二选项。人们可以使用排序:$排序依据行:$顶重命名另外两个参数,而是因为我们需要计算 $跳过并追加 SORD SIDX 我们需要使用 serializeGridData 。所以并不需要的情况下其他参数的重新命名。

  • 使用 serializeGridData 我们构建的将被发送到服务器的选项列表。

  • ajaxGridOptions 将用于设置jQuery.ajax请求附加参数这对于访问服务器做的jqGrid内部。我在设定的例子中使用的选项内容类型:应用程序/ JSON X-谟的应用:的myKey 在HTTP头文件

  • 从服务器的响应不包含(总页面数),所以我们使用 beforeProcessing 回调的基础上的其它信息的 的响应将被处理之前填写属性。

  • 因为我们使用 $ inlinecount =所有页选项中的URL从服务器的响应包含有关记录的总数,将包裹在数据的页面信息答案的结果部分。因此,我们使用 jsonReader:{repeatitems:假的,根:结果记载:算} 来读取响应

  • 我们必须删除 loadonce:因为服务器只返回数据而不是整个数据集的请求的页面真选项

  • I removed sortable: false to allow sorting of grid by click on the column header
  • with respect of prmNames option one can remove sending of unneeded parameters to the server or rename it. I used prmNames: { search: null, nd: null } to deny sending of _search and nd options. One could use sort: "$orderby", rows: "$top" to rename two other parameters, but because we need to calculate $skip and append sord after sidx we need to use serializeGridData. So the renaming of other parameters are not needed in the case.
  • using serializeGridData we construct the list of options which will be send to the server.
  • ajaxGridOptions will be used to set additional parameters of jQuery.ajax request which do jqGrid internally for access to the server. The options which I use in the example set Content-Type: application/json and X-ZUMO-APPLICATION: myKey in the HTTP headers
  • the response from the server don't contains total (the total number of pages), so we use beforeProcessing callback to fill the property based on other information before the response will be processed.
  • because we use $inlinecount=allpages options in the URL the response from the server will contains information about the total number of records and the page of data will be wrapped in the results part of the answer. So we use jsonReader: {repeatitems: false, root: "results", records: "count"} to read the response.
  • we have to remove loadonce: true option because the server returns only the requested page of data instead of the whole set of data.

这篇关于一个人怎么能使用服务器端排序和分页与Azure的移动服务的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-27 11:59