JqGrid 용 페이징 추가

Question

일부 블로그에서 제공하는 샘플을 사용하여 jQuery Grid를 내 응용 프로그램 (C# 및 Asp.net)에 추가하려고하는데, Webservice에서 전송 한 Json 데이터를 사용할 수 있습니다. 이제 Grid에 페이지 매김을 추가하려고 시도했습니다. 스크립트는 이와 같습니다.

<script type="text/javascript"> 
    $(function() { 
     $("#table").jqGrid({ 
      datatype: function (pdata) { getData(pdata); }, 
      height: 250, 
      colNames: ['ID', 'First Name', 'Last Name'], 
      colModel: [ 
      { name: 'ID', width: 60, sortable: false }, 
      { name: 'FirstName', width: 200, sortable: false }, 
      { name: 'LastName', width: 200, sortable: false } 
     ], 

      imgpath: '<%= ResolveClientUrl("styles/redmon/images") %>', 

      pager: jQuery('#pager'), 
      rowNum: 2, 
      rowList: [2, 5, 10, 50, 100, 200, 500, 1000],     
      height: "100%", 
      viewrecords: true, 
      scrollOffset: 0, 
      caption: 'Sample' 

     }); 
    }); 
    function getData(pData) { 
     $.ajax({ 
      type: 'POST', 
      contentType: "application/json; charset=utf-8", 
      url: '<%= ResolveClientUrl("~/WebService.asmx/GetListOfPersons") %>', 
      data: '{}', 
      dataType: "json", 
      success: function (data, textStatus) { 
       if (textStatus == "success") 
        ReceivedClientData(JSON.parse(getMain(data)).rows); 
      }, 
      error: function (data, textStatus) { 
       alert('An error has occured retrieving data!'); 
      } 
     }); 
    } 
    function ReceivedClientData(data) { 
     var thegrid = $("#table"); 
     thegrid.clearGridData(); 
     for (var i = 0; i < data.length; i++) 
      thegrid.addRowData(i + 1, data[i]); 
    } 
    function getMain(dObj) { 
     if (dObj.hasOwnProperty('d')) 
      return dObj.d; 
     else 
      return dObj; 
    } 
</script> 

... HTML 블록

 <table id="table" cellpadding="0" cellspacing="0"> 
</table> 
<div id="pager" class="scroll" style="text-align:center;"></div> 

호출기 사업부가 표시 부착하지만, 밤은 작업 내가 뭔가를 놓친 거지인가?

감사 사무엘

Answer 1

당신의 주요 문제는 당신이 당신의 ASMX 웹 서비스로 전달 될 수있는 getData의 pData 무시한다는 것입니다.

매우 오래된 템플릿을 jqGrid 용으로 사용합니다. jqGrid의 현재 버전이 4.3이고 여전히 버전 3.5에서 더 이상 사용되지 않은 imgpath을 사용합니다 (the documentation 참조). jqGrid의 아주 오래된 버전은 웹 서비스 호출에 대한 훌륭한 지원을하지 못했지만, 심지어 및 addXmlData 메서드를 사용하여 addRowData에 대해보다 효과적으로 데이터를 추가 할 수있었습니다. 문서는 here입니다.

기능을 datatype 대신 getData 기능 사용 datatype: 'json' 대신 수정하는 것이 좋습니다. 예를 들어, the old demo에서 정확하게 구현하는 방법을 찾을 수 있습니다. 에서 loadonce: true 매개 변수를 사용하는 방법에 대한 예제는 서버에서 데이터 페이징을 구현하지 않고 모든 그리드 데이터를 클라이언트 측에 보내고 jqGrid가 페이징, 정렬 및 필터링을 수행하는 것을 선호하는 경우에 사용할 수 있습니다. 귀하의 데이터를 클라이언트 쪽에서 상대적으로 적은 수의 행 (예 : 수백 행)에서만 효과적입니다.

는 업데이트 : 데이터베이스에서 데이터를 얻을 수 SqlDataReader를 사용하는 경우는 SQL 문을 서버로부터받은 rows 및 page 매개 변수에 대한 (SqlCommand) 기반을 구성 할 수 있습니다.

대부분 고유 ID가있는 데이터를 쿼리해야합니다. 따라서 SELECT TOP 및 LEFT OUTER JOIN 구성을 사용하여 페이징을 구현할 수 있습니다. 예를 들어 설명해 드리겠습니다. 예를 들어 dbo.Products 테이블에서 Northwind 데이터베이스의 가격으로 제품을 쿼리해야합니다. 10 당신이 rows 매개 변수의 값으로 대체해야하는 위치를

SELECT TOP(10) ProductID, ProductName, UnitPrice FROM dbo.Products 

를 사용할 수있는 데이터의 첫 페이지를 얻으려면. 매개 변수 page으로 정의 된 다른 페이지를 가져 오려면 (page-1)*rows 항목을 건너 뛰고 다음 상단에 page 항목을 가져와야합니다. 당신이 문을 쓸 수 common table expression (CTE) 구문을 사용하면 쉽게 변화 :

WITH GetAll (Id,ProductName,UnitPrice) AS (
    SELECT ProductID,ProductName,UnitPrice FROM dbo.Products 
), GetTop (Id,ProductName,UnitPrice) AS (
    SELECT TOP(20) * FROM GetAll 
), GetNext (Id,ProductName,UnitPrice) AS (
    SELECT TOP(10) a.* FROM GetAll AS a 
     LEFT OUTER JOIN GetTop AS t ON t.Id = a.Id 
    WHERE t.Id IS NULL 
) 
SELECT * FROM GetNext 

당신은 단지 rows 및 (page-1)*rows에 위의 두 장소에 10 및 20를 교체해야합니다.공통 테이블 식 (CTE)을 지원하지 않는 데이터베이스가있는 경우 하위 쿼리와 관련하여 동일한 쿼리를 다시 작성할 수 있습니다.