読者です 読者をやめる 読者になる 読者になる

JSON データ→jquery.handsontable

JSONデータを jquery.handsontable プラグインで表示することを試してみる。

単純にシンプルなデータ配列のJSONデータは、サイトのデモを見れば解ってることなので、
特に、Key-Valueペアの関係にあるケースがどうなるか?である。


var data = {"a":"1","b":"2"};
$('#example').handsontable({
   data: data,
   contextMenu: true,
   stretchH: 'all',
   readOnly: true
});

<div id="example" class="handsontable" style="width: 400px; height: 140px; overflow: auto"></div>


この表示は、以下のようになる。

f:id:posturan:20160313192106j:plain



では、データが以下のケースの場合、、、
var data = [
   {"a":"1","b":"2"},
   {"c":"3","c":"4"},
];


表示は、以下のようになり、期待に反する。

f:id:posturan:20160313192011j:plain



更に、次のようなデータの場合、
var data = [
   {"alpha":{"a":"1","b":"2"}},
   {"beta" :{"c":"3","d":"4"}}
];

これも結果は、上と同じ表示になる。

Key が表示されないことと、上の結果を踏まえて JavaのオブジェクトからJSONを
生成してこのプラグインで表を表示させることを検討した場合、
Mapの場合、Keyを無視するという前提で、、
Mapの配列は使えないけど、Mapそのものは使える。
Listや、2次元配列は使える。