jQuery로 데이터를로드하는 jQuery

Question

저는 처음으로 jqGrid의 사용자입니다. 공식 예제를 살펴 보았습니다. json을 사용하여 그리드에 데이터를로드하는 데 관심이 있습니다. 격자 생성 자바 스크립트의 비트 여기 http://trirand.com/blog/jqgrid/jqgrid.html

한다 : 나는 현재, 데이터로드 (JSON 데이터) 찾고 있어요

jQuery("#list2").jqGrid(
    { 
     url : '<c:url value="${webappRoot}/getdetails" />', 
     datatype : "json", 
     colNames : [ 'id', 'Location', 'Country Code', 'Type', 'Interval', 
        'Version', 'Last Active', 'Last Login', 'NOTE' ], 
     colModel : [ 
      { name : 'id', width : 10 }, 
      { name : 'location', width : 75 }, 
      { name : 'countryCode', width : 50 }, 
      { name : 'type', width : 40 }, 
      { name : 'interval', width : 30 }, 
      { name : 'version', width : 45 }, 
      { name : 'lastactive', width : 50, align : "right" }, 
      { name : 'lastlogin', width : 50, sortable : false }, 
      { name : 'note', width : 50, sortable : false} 
     ], 
     rowNum : 10, 
     rowList : [ 10, 20, 30 ], 
     pager : '#pager2', 
     width: gridWidth, 
     sortname : 'id', 
     viewrecords : true, 
     sortorder : "desc", 
     caption : "JSON Example" 
}); 
jQuery("#list2").jqGrid('navGrid', '#pager2', 
         { edit : false, add : false, del : false}); 

${webappRoot}/getdetails이 http://localhost/myProject/getdetails처럼 내 프로젝트에 경로를 변환은, 나는 스프링 MVC를 사용하고있다 (이것은 무관 ​​할 수있다). 여기

GET http://localhost/newProject/getdetails?_search=false&nd=1304638787511&rows=10&page=1&sidx=id&sord=desc 
200 OK 
135ms 

는 반응이다 : 내가 불을 지르고에서 볼 때

이이 HTTP 요청을 생성 내가 JSON 탭으로 이동하면

{ 
    "id": 1, 
    "location": "office_2782", 
    "countryCode": "UK", 
    "quarter": "500", 
    "version": "v3.05", 
    "lastactive": "yesterday", 
    "lastlogin": "today", 
    "note": "no note", 
    "type": "read-only" 
} 

은 모두이 같은 것, 어떤 생각을 무엇 내가 잘못하고있어?

시작 레코드를 하나만로드하려고하는데 작동하지 않을 수 있습니다. 도움이 필요합니다.

Answer 1

우선 JSON 데이터 작성 방법, jqGrid에서 서버로 보낸 매개 변수의 의미 등을 이해하는 데 문제가있는 사람은 처음입니다. The official jqGrid documentation에는 소개가 충분하지 않으므로 jqGrid 사용의 첫 번째 단계는 예상보다 어려울 수 있습니다.

서버의 JSON 응답에있는 문제는을 나타내는 항목의 배열 (또는 목록) 대신 데이터의 항목이 하나만 포함되어 있다는 것입니다 (). 데이터는 적어도

[ 
    { 
     "id": 1, 
     "location": "office_2782", 
     "countryCode": "UK", 
     "quarter": "500", 
     "version": "v3.05", 
     "lastactive": "yesterday", 
     "lastlogin": "today", 
     "note": "no note", 
     "type": "read-only" 
    } 
] 

또는

{ 
    "total": 1, 
    "page": 1, 
    "records": 1, 
    "rows": [ 
     { 
      "id": 1, 
      "location": "office_2782", 
      "countryCode": "UK", 
      "quarter": 500, 
      "version": "v3.05", 
      "lastactive": "yesterday", 
      "lastlogin": "today", 
      "note": "no note", 
      "type": "read-only" 
     } 
    ] 
} 

또는

{ 
    "total": 1, 
    "page": 1, 
    "records": 1, 
    "rows": [ 
     { 
      "id": 1, 
      "row": [ "1", "office_2782", "UK", "500", "v3.05", 
        "yesterday", "today", "no note", "read-only" ] 
     } 
    ] 
} 

또는

{ 
    "total": 1, 
    "page": 1, 
    "records": 1, 
    "rows": [ 
     [ "1", "office_2782", "UK", "500", "v3.05", "yesterday", "today", 
      "no note", "read-only" ] 
    ] 
} 

일견 그러한 이상한의 이유로 개선 등

되어야 JSON 데이터는 jqGrid가 de 페이징, 정렬 및 필터링/데이터 검색 에 구현 된 지원하도록 서명했습니다. 따라서 서버에 보낸 URL의 rows=10&page=1&sidx=id&sord=desc 매개 변수는 jqGrid가 서버에 페이지 당 10 개의 행 (행 = 10)이있는 페이지의 첫 번째 페이지 (페이지 = 1)를 가져 오도록 요청한다는 것을 의미합니다. 데이터는 내림차순 (sord = desc)으로 id (sidx = id)로 미리 정렬해야합니다. 만약 당신이 jqGrid의 loadonce:true 매개 변수를 추가한다면 당신은 클라이언트 기반의 정렬, 페이징, 필터링을 사용할 수 있지만, 서버 기반 구현은 수십만 개의 큰 데이터 세트로 작업 할 수있게합니다. 아주 좋은 성능의 데이터 행.

서버 응답 "total", "page"및 "records"의 추가 요소가 어떻게 사용되는지 설명하려고 시도한 this answer을 읽는 것이 좋습니다. 매개 변수의 값은 JSON에서 숫자 또는 문자열 (사용자 취향에 따라)로 인코딩 될 수 있습니다.

예있는 jqGrid 대한 '위치'열의 열 헤더에서 사용자가 클릭 URL에 sidx=location&sord=asc을 갖는 서버 새로운 요청을 보낼 경우. 그리드마다 데이터를 제공하라는 요청을 서버에 줄 수 있지만 여러 번 요청을하면 jqGrid를 사용하는 사용자가 선택한 매개 변수가 요청에 포함된다는 것을 이해하는 것이 중요합니다.

jsonReader (때때로 모든 열에 대해 jsonmap 매개 변수가 추가됨)을 정의하면 서버 응답 구조가 설명됩니다. 정보 jqGrid를 사용하여 응답을 읽고 그리드를 채 웁니다.

The demo은 해당 jsonReader을 사용하면 원본 JSON 데이터까지 읽을 수 있음을 보여줍니다.

나에게서 당신을위한 마지막 충고는 서버가보고 한 오류에 대해 사용자에게 알리는 데 도움이되는 loadError 이벤트 핸들을 사용하는 것을 처음부터 고려하는 것입니다. the answer에서는 ASP.NET MVC의 경우 구현 방법을 보여 줬습니다. 스프링 MVC를 직접 사용하지 않기 때문에 봄 MVC에서 오류보고를보다 잘 구현하는 방법에 대한 직접적인 예는 제공 할 수 없지만 주요 아이디어는 모든 서버 기술에서 동일합니다. 오류가 발생하면 서버는 다음과 같이 응답해야합니다. 응답은 error HTTP status code입니다. loadError 이벤트 핸들을 구현하면 응답을 디코딩하고 오류에 대한 정보를 표시합니다.