2017-01-14 27 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" 
}]; 

営業日は、2つのフォーマットで来るsalesdateプロパティは、4桁で年を持っており、shortsalesdateは2桁で年を持っています。グリッドでは、動的売上日付列にyy-mm-ddの形式で販売日を表示する必要があります(表示するには、shortsalesdateプロパティを使用する必要があります)。

フィドルコードでは、日付が降順でソートされました。新しい修正では、降順で日付をソートする必要があります。今度は、ソートのためにプロパティsalesdateの販売日を使用する必要がありますが、カラムヘッダーに 'shortsalesdate`プロパティを使用して販売日を表示する必要があります。

第2に、列を表示および非表示にする2つのボタンがあります。非表示にする前に、方法getYColumnNameの販売日の比較があります。現在のjsfiddleコードでは、salesdateプロパティの値を使用して比較します。これはそのまま維持する必要があります。

だから基本的に2つのものがあります:それはすべての日付の比較のためのプロパティshortsalesdate 2の値を使用する必要がありますし、並べ替え、それはプロパティの値を使用する必要があり、販売の日付の表示に

これはどのように達成するのですか?

サイドノート: iは、列ヘッダーのプロパティshortsalesdateから1つの隠れ値及びプロパティshortsalesdateからつの可視値を2つの値を格納する考えていました。だから、基本的に列に2つの値を格納することは可能ですか?

おかげ

答えて

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]; 
     }} 
] 

使用します。私は-で日付を分割し、その年の最初の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

関連する問題