jqgrid- 데이터

jqGrid에서 지원할 수 있는 데이터 형식: xml, json, jsonp,local or clientSide,xmlstring, jsonstring
、script、function (…).
Json 데이터
기본값인 jsonReader를 정의하여 서버에서 반환되는 데이터에 대응해야 합니다.

jQuery("#gridid").jqGrid({
...
   jsonReader : {
     root: "rows",
     page: "page",
     total: "total",
     records: "records",
     repeatitems: true,
     cell: "cell",
     id: "id",
     userdata: "userdata",
     subgrid: {root:"rows",
        repeatitems: true,
       cell:"cell"
     }
   },
...
});

서버에서 반환되는 데이터 형식은 다음과 같습니다.

{
  total: "xxx",
  page: "yyy",
  records: "zzz",
  rows : [
    {id:"1", cell:["cell11", "cell12", "cell13"]},
    {id:"2", cell:["cell21", "cell22", "cell23"]},
      ...
  ]
}

jsonReader의 속성
total
총 페이지 수
page
현재 페이지
records
조회된 기록수
rows
실제 데이터를 포함하는 그룹
id
행 id
cell
현재 행의 모든 셀
* root 요소는 테이블에 필요한 데이터가 어디에서 시작되는지 나타냅니다.
 

jQuery("#gridid").jqGrid({
...
   jsonReader : {root:"invdata"},
...
});

서버에서 반환되는 데이터 형식은 다음과 같습니다.

{
  total: "xxx",
  page: "yyy",
  records: "zzz",
  invdata : [
    {id:"1", cell:["cell11", "cell12", "cell13"]},
    {id:"2", cell:["cell21", "cell22", "cell23"]},
      ...
  ]
}

*page* total* records 정의페이지 뒤집기에 필요한 정보

jQuery("#gridid").jqGrid({
...
   jsonReader : {
      root:"invdata",
      page: "currpage",
      total: "totalpages",
      records: "totalrecords"
   },
...
});

서버측 데이터 반환:

{
  totalpages: "xxx",
  currpage: "yyy",
  totalrecords: "zzz",
  invdata : [
    {id:"1", cell:["cell11", "cell12", "cell13"]},
    {id:"2", cell:["cell21", "cell22", "cell23"]},
      ...
  ]
}

* cell 현재 행에 포함된 셀 데이터

jQuery("#gridid").jqGrid({
...
   jsonReader : {
      root:"invdata",
      page: "currpage",
      total: "totalpages",
      records: "totalrecords",
      cell: "invrow"
   },
...
});

서버에서 데이터를 반환하려면 다음과 같이 하십시오.

{
  totalpages: "xxx",
  currpage: "yyy",
  totalrecords: "zzz",
  invdata : [
    {id:"1", invrow:["cell11", "cell12", "cell13"]},
    {id:"2", invrow:["cell21", "cell22", "cell23"]},
      ...
  ]
}

* id 줄 id

jQuery("#gridid").jqGrid({
...
   jsonReader : {
      root:"invdata",
      page: "currpage",
      total: "totalpages",
      records: "totalrecords",
      cell: "invrow",
      id: "invid"
   },
...
});

서버에서 데이터를 반환하려면 다음과 같이 하십시오.

{
  totalpages: "xxx",
  currpage: "yyy",
  totalrecords: "zzz",
  invdata : [
    {invid:"1", invrow:["cell11", "cell12", "cell13"]},
    {invid:"2", invrow:["cell21", "cell22", "cell23"]},
      ...
  ]
}

cell은 빈 문자열로 설정할 수 있고 id는 숫자로 설정할 수 있습니다.

jQuery("#gridid").jqGrid({
...
   jsonReader : {
      root:"invdata",
      page: "currpage",
      total: "totalpages",
      records: "totalrecords",
      cell: "",
      id: "0"
   },
...
});

서버에서 돌아가기

{
  totalpages: "xxx",
  currpage: "yyy",
  totalrecords: "zzz",
  invdata : [
    {"1","cell11", "cell12", "cell13"},
    {"2",,"cell21", "cell22", "cell23"},
      ...
  ]
}

*repeatitems는 줄마다 데이터가 중복될 수 있음을 가리키며false로 설정하면 되돌아오는 데이터에서 이름별로 요소를 검색합니다. 이 이름은colModel의 이름입니다.

jQuery("#gridid").jqGrid({
...
   jsonReader : {
      root:"invdata",
      page: "currpage",
      total: "totalpages",
      records: "totalrecords",
      repeatitems: false,
      id: "0"
   },
...
});

서버에서 데이터를 반환하려면 다음과 같이 하십시오.

{
  totalpages: "xxx",
  currpage: "yyy",
  totalrecords: "zzz",
  invdata : [
    {invid:"1",invdate:"cell11", amount:"cell12", tax:"cell13", total:"1234", note:"somenote"},
    {invid:"2",invdate:"cell21", amount:"cell22", tax:"cell23", total:"2345", note:"some note"},
      ...
  ]
}

이 예에서 id 속성 값은 "invid"입니다.이 속성이false로 설정되었을 때,colModel에서 정의한name 값을 모두 부여할 필요가 없습니다.name에 따라 요소를 검색하기 때문에, 그의 정렬은col모델에서 지정한 정렬 결과도 아니다.

{
  totalpages: "xxx",
  currpage: "yyy",
  totalrecords: "zzz",
  invdata : [
    {invid:"1",invdate:"cell11", note:"somenote"},
    {invid:"2", amount:"cell22", tax:"cell23", total:"2345"},
      ...
  ]
}

사용자 데이터 (user data) 는 어떤 경우 서버에서 파라미터를 되돌려야 하지만, 직접 표에 표시하지 않고, 다른 곳에 표시하려면 사용자 데이터 탭을 사용해야 합니다.

jsonReader: {
  ...
  userdata: "userdata",
  ...
}

서버에서 데이터를 반환하려면 다음과 같이 하십시오.

{
  total: "xxx",
  page: "yyy",
  records: "zzz",
  userdata: {totalinvoice:240.00, tax:40.00},
  rows : [
    {id:"1", cell:["cell11", "cell12", "cell13"]},
    {id:"2", cell:["cell21", "cell22", "cell23"]},
    ...
  ]
}

클라이언트에서 얻은 데이터는 다음과 같습니다.

userData = {totalinvoice:240.00, tax:40.00}

클라이언트에서 우리는 다음과 같은 두 가지 방법으로 이러한 추가 정보를 얻을 수 있다. 1.getGridParam 메서드 사용:

jQuery("grid_id").getGridParam('userData')

2. getUserData() 방법 사용

jQuery("grid_id").getUserData()

원하는 값은 다음과 같습니다.

jQuery("grid_id").getUserDataItem( key )