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

Handsontable は、columns 定義を使うと良い。

先日、Handsontable を始めたばかりで、良く理解してなくて、
http://blog.zaq.ne.jp/oboe2uran/article/1002/
では、
データが以下のケースの場合、、、
var data = [
{"a":"1","b":"2"},
{"c":"3","c":"4"},
];

期待する結果を得られなかった。
key-value のJSON データは、key を列として定義するので、データも以下である必要がある。
var data = [
   { "a":1, "b":2 },
   { "a":3, "b":4 },
];

これで、以下のとおり列定義を指定しなくても、、

$('#example').handsontable({
   data: data,
   minSpareRows: 0,
   contextMenu: false,
});

f:id:posturan:20160313191621j:plain


となるのだが、これでは、あまり意味がない!
列の定義として、 columns というのを使うと、

var data = [
   { "a": 1200, "b":  21.343917  , "c": "2014/05/18" },
   { "a": 130,  "b": 4023.018636 , "c": "2014/06/02" },
];
というデータある時、、

$('#example').handsontable({
   data: data,
   minSpareRows: 0,
   contextMenu: false,
   columns: [
      { data: "a" ,  type: 'numeric' , format: '0,0' },
      { data: "b" ,  type: 'numeric' , format: '0,0.00' },
      { data: "c" ,  type: 'date'    , dateFormat: 'yy/mm/dd' },
   ],
});
これで、以下の表示ができる。

f:id:posturan:20160313191611j:plain



データの列の並びを変えて同じ結果が得られる。

var data = [
 {  "b":  21.343917  , "c": "2014/05/18" , "a": 1200  },
 {  "c": "2014/06/02", "a": 130          , "b": 4023.018636  },
];

これでも、同じ結果が得られるということは、Java Object List → JSON 結果を表示するのも、
そんなに壁が高くない。