HandsonTableで表を操作

JSON(配列)を読んでテーブルを作成

下記の配列のJSONを読んでHandsonTableを使って表示します。


[
  [
    "メーカー",
    "製品名",
    "ワット数",
    "金額",
    "重量",
    "燃料",
    "騒音"
  ],
  [
    "SUMEVE",
    "",
    "2000",
    "63750",
    "19",
    "ガソリン",
    "55"
  ],
]

JSONに関してはネットで読んでください
　 JSON とは何か(「MDN Web Docs」)
　 JSON とは(「Orracle Japan」)
　のJSON とは？(「TOPSIC」)
　 handsontableの実例サイト(実例が載っています)

HndsonTable.jsを使ってテーブルを作成

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

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

HTML

<div id="handsontable1"></div>

Javascript

  // 下記を読みこませておく！
<script src="ht/handsontable.js"></script>
var grid1 = document.getElementById('handsontable1');
var table1 = new Handsontable(grid1, {
    data : [],
    rowHeaders: true,
    colHeaders: true,
    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/hatsudenki.json" , function(data) {
     console.table(data);
     table1.loadData(data);
   });
});

CSS

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

テーブルのデータをJSON形式で書き出す

上記のテーブルのデータをJSON形式で書き出し、表示します。セルに加えた変更(書き換え)も反映されていることを確認してください。

JSONで書き出した文字列を読み取り表示する際に正規表現で改行を付け加えています。
　正規表現でエスケープが必要な文字(「Qiita」)

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

HTML

<div id="handsontable1"></div>

Javascript

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

         }
         ,'html'
        );
    });

CSS

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

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

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

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

HTML

<div id="handsontable1x"></div>
<input id="button2" type="button" class="sbtn BGblue" value="書き出したJSONを表にする">   <br />

Javascript

  // 下記を読みこませておく！

var grid1x = document.getElementById('handsontable1x');
var table1x = new Handsontable(grid1x, {
    data : [],
    rowHeaders: true,
    colHeaders: true,
    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/hatsudenki1x.json" , function(data) {
        console.table(data);
        table1x.loadData(data);
      });
    });

CSS

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