2017-01-14 3 views
1

피벗에서 jqgrid를 생성하려면 다음 jsfiddle을 사용합니다. jsfiddle code 다음 json 데이터를 사용합니다. JSON 데이터에 열 머리글에 N 개의 값을 저장하는 방법은 무엇입니까?

var data = [{ 
    "id": 1, 
    "make": "toyota", 
    "model": "corolla", 
    "fuelusagecity": "17", 
    "fuelusagehwy": "12", 
    "fuelmeasure":'Litre', 
    "salesaboveavg": false, 
    "totalnumberofsales": 120000.0000, 
    "highsalestext": null, 
    "salesdate": "2010-12-01", 
    "shortsalesdate": "10-12-01", 
    "groupheaderorder":"1", 
    "childorder":"1" 
}, { 
    "id": 2, 
    "make": "toyota", 
    "model": "corolla", 
    "fuelusagecity": "10", 
    "fuelusagehwy": "14", 
    "salesaboveavg": false, 
    "fuelmeasure":'Litre', 
    "totalnumberofsales": 100000.0000, 
    "highsalestext": "HIGH", 
    "salesdate": "2010-12-15", 
    "shortsalesdate": "10-12-15", 
    "groupheaderorder":"1", 
    "childorder":"1" 
}, { 
    "id": 3, 
    "make": "toyota", 
    "model": "belta", 
    "fuelusagecity": "15", 
    "fuelusagehwy": "10", 
    "salesaboveavg": true, 
    "fuelmeasure":'Litre', 
    "totalnumberofsales": 200000.0000, 
    "highsalestext": null, 
    "salesdate": "2011-01-10", 
    "shortsalesdate": "11-01-10", 
    "groupheaderorder":"1", 
    "childorder":"2" 
}, { 
    "id": 4, 
    "make": "toyota", 
    "model": "camry", 
    "fuelusagecity": "13", 
    "fuelusagehwy": "10", 
    "fuelmeasure":'Litre', 
    "salesaboveavg": false, 
    "totalnumberofsales": 300000.0000, 
    "highsalestext": "HIGH", 
    "salesdate": "2011-04-23", 
    "shortsalesdate": "11-04-23", 
    "groupheaderorder":"1", 
    "childorder":"3" 
}, { 
    "id": 5, 
    "make": "nissan", 
    "model": "skyline", 
    "fuelusagecity": "14", 
    "fuelusagehwy": "9", 
    "fuelmeasure":'Litre', 
    "salesaboveavg": true, 
    "totalnumberofsales": 500000.0000, 
    "highsalestext": "HIGH", 
    "salesdate": "2010-09-10", 
    "shortsalesdate": "10-09-10", 
    "groupheaderorder":"2", 
    "childorder":"1" 
}, { 
    "id": 6, 
    "make": "nissan", 
    "model": "zx300", 
    "fuelusagecity": "10", 
    "fuelusagehwy": "8", 
    "fuelmeasure":'Litre', 
    "salesaboveavg": false, 
    "totalnumberofsales": 400000.0000, 
    "highsalestext": null, 
    "salesdate": "2012-01-06", 
    "shortsalesdate": "12-01-06", 
    "groupheaderorder":"2", 
    "childorder":"2" 
}]; 

, 판매 날짜salesdate 속성은 네 자리 연도가 두 가지 형식으로 제공하고 shortsalesdate은 두 자리 연도 있습니다. 그리드에서 동적 판매 날짜 열은 판매 날짜를 yy-mm-dd 형식으로 표시해야합니다 (표시하려면 shortsalesdate 속성을 사용해야 함).

피들 코드에서 날짜는 내림차순으로 정렬되었습니다. 새로운 수정은 또한 decendding 순서로 날짜를 정렬해야합니다. 이번에는 정렬을 위해 salesdate 속성의 판매 날짜를 사용해야하지만 열 헤더에 'shortsalesdate'속성을 사용하여 판매 날짜를 표시해야합니다.

두 번째로 열을 표시하거나 숨기려면 버튼이 두 개 있습니다. 숨기기/표시하기 전에 방법 getYColumnName의 판매 날짜 비교가 있습니다. 현재 jsfiddle 코드에서는 salesdate 속성의 값을 사용하여 비교합니다. 이것은 그대로 유지되어야합니다.

그래서 기본적으로 두 가지가 있습니다 : 그것은 모든 날짜 비교의 속성 shortsalesdate 2의 값을 사용합니다 및 정렬이 속성에 값을 사용해야합니다, 판매 날짜의 표시 방법

어떻게 이것을 할 수 있습니까?

측 주 : 나 속성 및 속성 shortsalesdateshortsalesdate에서 하나 개의 표시 값으로부터 열 헤더 히든 값의 두 값들을 저장 대해 생각했다 . 그래서 기본적으로 열에 두 개의 값을 저장할 수 있습니까?

감사

답변

1

나는 당신에게 당신이 무료있는 jqGrid의 현재 버전 4.13.6에서 요구 사항을 구현할 수있는 방법을 몇 가지 해결 방법을 제안 할 수 있지만, 나는 문제의 해결책은 매우 간단해야한다고 생각합니다.

원하는 것은 텍스트를 사용자 정의하는 것입니다. 텍스트는 열 머리글에 표시됩니다. 따라서 무료 jqGrid (여기 참조)의 코드를 변경하고 결과를 GitHub에 게시했습니다.

The demo는 GitHub의 최신 코드를로드하고 새로운 label 콜백 데이터에 기초하여 상기 열 헤더를 구성 할 수

yDimension: [ 
    { dataName: "salesdate", sortorder: "desc", 
     label: function (options) { 
      // options has the following properties: 
      // yData, yIndex, yLevel, pivotOptions 
      var date = String(options.yData).split("-"); 
      return date[0].substr(2) + "-" + date[1] + "-" + date[2]; 
     }} 
] 

이용한다. 나는 -으로 날짜를 나눠서 그 해의 처음 두 기호를 잘라내어 새 문자열을 만듭니다. 하나는 shortsalesdate 속성을 사용하지 않는

enter image description here

내 데모 아래 그림에서와 같은 결과를 볼 그냥 원래 salesdate 사용합니다.

yDimension에 여러 요소를 사용하는 경우에도 동일하게 작동합니다.데모 https://jsfiddle.net/OlegKi/e1rvyczh/3/는 연도 더미 서식

yDimension: [ 
    { dataName: "salesYear", sorttype: "integer", sortorder: "desc", 
     label: function (options) { 
      return "(" + options.yData + ")"; 
     }}, 
    { dataName: "salesdate", sortorder: "desc", 
     label: function (options) { 
      // options has the following properties: 
      // yData, yIndex, yLevel, pivotOptions 
      var date = String(options.yData).split("-"); 
      return date[0].substr(2) + "-" + date[1] + "-" + date[2]; 
     }} 
] 

를 사용 : 난 그냥 중괄호로 묶 : ()return "(" + options.yData + ")";를 사용하여.

enter image description here

그것은 당신이 잘 설명 대답 (here에서) GitHub에서

+0

덕분에 무료있는 jqGrid 당신의 소스를 새로 고치는 것이 중요합니다을 다음과 같은 결과를 보인다. :) –

+0

@ Dore.Ad : 오신 것을 환영합니다! – Oleg