HandsonTableで表を操作

オブジェクト(連想配列)形式のJSON

jquery.handsontable.jsを使って表のデータを書き換える。
　 handsontableの実例サイト(実例が載っています)
　JSONが正しいFORMATになっているかチェック&整形サイト

JSONのファイルには配列の最後のデータには「,」を絶対につけないこと。またJSONの最後に「;」も絶対につけない！！

オブジェクト(連想配列)形式のJSON

下記のオブジェクトのJSONを読んでHandsonTableを使って表示します。


[
  {
    "maker": "メーカー",
    "products": "製品名",
    "output": "ワット数",
    "price": "金額",
    "weight": "重量",
    "fuel": "燃料",
    "noise": "騒音"
  },
  {
    "maker": "A-iPower",
    "products": "SJA2300i",
    "output": "1800",
    "price": "62999",
    "weight": "23",
    "fuel": "ガソリン",
    "noise": ""
  },
  ...
  {
    "maker": "工進",
    "products": "GV-28i",
    "output": "900",
    "price": "139799",
    "weight": "38",
    "fuel": "ガソリン",
    "noise": "68～65"
  }
]

HandsonTableで表を作成

上記のオブジェクト(連想配列)を読んでHandsonTableで下記のテーブルを作りました。列の項目の順番を入れ替えています。ソースを確認してください。

上記の表を作成するためのCODEを見る

HTML

<div id="handsontable2"></div>

Javascript

  // 下記を読みこませておく！
<script src="ht/handsontable.js"></script>

var grid2 = document.getElementById('handsontable2');

var table2 = new Handsontable(grid2, {
    columns: [ // 列に入れるデータを指定できる
        {data: "maker"},
        {data: "products"},
        {data: "price"},
        {data: "output"},
        {data: "noise"},
        {data: "fuel"},
        {data: "weight"}
    ],
    rowHeaders: true,
    colHeaders:  ["メーカー","製品名","価格","出力","騒音","燃料","重量"], //ヘッダーのA、B・・の代わりに表示する文字を指定
    columnSorting: true, //カラム名をクリックすることでソートできるようになる
        contextMenu: {
        items: {
            row_above: {
                name: '上に行を挿入'
            },
            row_below: {
                name: '下に行を挿入'
            },
            col_left: {
                name: '左に空列を挿入'
            },
            col_right: {
                name: '右に空列を挿入'
            },
            remove_row: {
                name: '選択している行を削除'
            },
            remove_col: {
                name: '選択している列を削除'
            },
        }
    },
    minSpareRows:1, // 空白行追加数
    licenseKey: 'non-commercial-and-evaluation'
});

$(function() {
   $.getJSON("json/hatsudenki3.json" , function(data) {
     console.table(data);
     table2.loadData(data);
   });
});

CSS

<link href="ht/handsontable.full.css" rel="stylesheet" type="text/css">

テーブルのデータを保存する

上記の表を作成するためのCODEを見る

HTML

<div id="handsontable2"></div>

Javascript

  // 下記を読みこませておく！
<script src="ht/handsontable.js"></script>
document
    .querySelector('#button1')
    .addEventListener('click', function() {
        //テーブルのデータをすべて取得
        console.table("table2.getSourceData()="+table2.getSourceData());
        var data = table2.getSourceData();
        //JSON(オブジェクト)を保存する
        $.post(
         'jsonWrite.php',
         {json_data: data, file_name: "json/hatsudenki3x.json" },
         function( data, textStatus )
         {
          if( textStatus == 'success' )
          {
            $("#out1msg").html("書出したJSONを読み込んだファイルを下記に表示しました！");
          }
          data2 = data.replace(/},/gi, "},\n");
          data2 = data2.replace(/\[\{/gi, "[\n{");
          data2 = data2.replace(/}]/gi, "}\n]");
          $("#out1").html(data2);

         }
         ,'html'
        );
    });

CSS

<link href="ht/handsontable.full.css" rel="stylesheet" type="text/css">

書き出したJSONからテーブルを作成

上記のJSON(hatsudenki3x.json)を読み込んでHandsonTableで表示したテーブル（下記）です

上記の表を作成するためのCODEを見る

HTML

<div id="handsontable3"></div>

Javascript

  // 下記を読みこませておく！
<script src="ht/handsontable.js"></script>
var grid3 = document.getElementById('handsontable3');
var table3 = new Handsontable(grid3, {
    columns: [ // 列に入れるデータを指定できる
        {data: "maker"},
        {data: "products"},
        {data: "price"},
        {data: "output"},
        {data: "noise"},
        {data: "fuel"},
        {data: "weight"}
    ],
    rowHeaders: true,
    colHeaders:  ["メーカー","製品名","価格","出力","騒音","燃料","重量"], //ヘッダーのA、B・・の代わりに表示する文字を指定
    columnSorting: true, //カラム名をクリックすることでソートできるようになる
        contextMenu: {
        items: {
            row_above: {
                name: '上に行を挿入'
            },
            row_below: {
                name: '下に行を挿入'
            },
            col_left: {
                name: '左に空列を挿入'
            },
            col_right: {
                name: '右に空列を挿入'
            },
            remove_row: {
                name: '選択している行を削除'
            },
            remove_col: {
                name: '選択している列を削除'
            },
        }
    },
    minSpareRows:1, // 空白行追加数
    licenseKey: 'non-commercial-and-evaluation'
});

document
    .querySelector('#button2')
    .addEventListener('click', function() {
      $.getJSON("json/hatsudenki3x.json?cashe="+(new Date()) , function(data) {
        console.table(data);
        table3.loadData(data);
      });
    });

CSS

<link href="ht/handsontable.full.css" rel="stylesheet" type="text/css">