Azure 모바일 서비스에서 서버 측 정렬 및 페이징을 사용하는 방법

Question

azure 서비스의 데이터로 jqGrid (inlineNav)를 사용하고 Azure Mobile Services에서 서버 측 정렬 및 페이징을 사용하는 방법을 배우고 싶습니다.

이 문제에 대해 의견을 공유하십시오.

Answer 1

Windows Azure 모바일 서비스는 해당 액세스에 대해 구성한 테이블의 데이터를 가져오고/삽입/편집/삭제하는 데 사용할 수있는 REST API를 제공합니다 (the documentation 참조). Query records operation 요청은 HTTP GET 동사를 사용합니다. Open Data 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 
}); 

일부 의견 :

• 나는 하나가 불필요한 매개 변수를 보내는 제거 할 수 있습니다 prmNames 옵션에 대한 열 머리글
• 에 클릭하여 격자로 정렬 할 수 있도록 sortable: false을 제거 서버 또는 이름을 바꿉니다. 및 nd 옵션의 전송을 거부하려면 prmNames: { search: null, nd: null }을 사용했습니다. sort: "$orderby", rows: "$top"을 사용하여 다른 두 개의 매개 변수의 이름을 바꿀 수 있지만 을 계산하고 sidx 뒤에 sord을 추가해야하므로 serializeGridData을 사용해야합니다. 따라서 다른 매개 변수의 이름을 바꿀 필요가 없습니다.
• serializeGridData을 사용하여 서버에 보낼 옵션 목록을 구성합니다.
• ajaxGridOptions은 jqGrid를 서버에 액세스하기 위해 내부적으로 수행하는 jQuery.ajax 요청의 추가 매개 변수를 설정하는 데 사용됩니다. 내가 예에서 사용하는 옵션은 HTTP 헤더에 Content-Type: application/json 및 X-ZUMO-APPLICATION: myKey을 설정
• 서버의 응답하지 total (총 페이지 수)를 포함, 그래서 우리는 다른 정보를 기반으로 속성을 채우기 위해 beforeProcessing 콜백을 사용합니까 전에 응답이 처리됩니다.
• URL에 $inlinecount=allpages 옵션을 사용했기 때문에 서버의 응답에는 총 레코드 수에 대한 정보가 포함되어 있으며 데이터 페이지는 답변의 results 부분에 래핑됩니다. 따라서 우리는 jsonReader: {repeatitems: false, root: "results", records: "count"}을 사용하여 응답을 읽습니다.
• 서버가 전체 데이터 집합 대신 요청 된 데이터 페이지 만 반환하기 때문에 loadonce: true 옵션을 제거해야합니다.