とほほのJspreadsheet入門

目次

Jspreadsheetとは

インストール

npm を利用する場合：

npm install jspreadsheet-ce

直接参照する場合：

<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css">
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css">

ダウンロードする場合：

使用例

HTML
<!doctype html>
<html lang="ja">
<head>
<title>Jspreadsheet Example</title>
</head>
<body>
<div id="mytable"></div>
<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css">
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css">
<script>
const myTable = jspreadsheet(document.getElementById('mytable'), {
  data: [
    ['2022/10/24', '文房具', 420],
    ['2022/10/26', '外食費', 1300]
  ],
  columns: [
    { type: 'calendar', title: '日付', width: 120, options: { format: 'YYYY/MM/DD' } },
    { type: 'text', title: '項目', width: 300 },
    { type: 'numeric', title: '出金', width: 200, mask:'#,##' },
  ]
});
</script>
</body>
</html>

表示例を下記に示します。Excel の様にセルを編集することができます。

データ読込

JSデータ

data は JavaScript でデータを指定します。

const data = [ ['AAA', 123], ['BBB', 456] ]
const myTable = jspreadsheet(myTableElm, {
  data: data
}

JSONファイル

data は JSONファイルの URL を指定します。

const myTable = jspreadsheet(myTableElm, {
  url: './data.json'
}

CSVファイル

csv は CSVファイルの URL を指定します。csvHeaders は CSVファイルの1行目をヘッダと見なすか否か、csvDelimiter はカラムのデリミタを指定します。

const myTable = jspreadsheet(myTableElm, {
  csv: './data.csv',
  csvHeaders: true,
  csvcsvDelimiter: ','
}

HTMLテーブル

HTMLのテーブルをデータソースにすることもできます。

<table id="mytable">...</table>

const myTable = jspreadsheet(document.getElementById('mytable'));

初期化パラメータ

ヘッダ

colHeaders はヘッダタイトルを指定します。

const myTable = jspreadsheet(myTableElm, {
  data: data,
  colHeaders: ["Title#1", "Title#2", "Title#3"]
});

nestedHeaders でネストされたヘッダタイトルを指定することもできます。

const myTable = jspreadsheet(myTableElm, {
  data: data,
  nestedHeaders: [
    [ { title: 'A', colspan: '3', }, ],
    [ { title: 'A-1', colspan: '2', }, { title: 'A-2', colspan: '1' } ],
  ],
  colHeaders: ["A-1-1", "A-1-2", "A-2-1"]
});

スタイル

style はセルのスタイルを指定します。

const myTable = jspreadsheet(myTableElm, {
  data: data,
  style: {
    A1: 'color:red; font-weight:bold'
  },
});

ツールバー

toolbar でツールバーを表示することができます。

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons" />

const myTable = jspreadsheet(myTableElm, {
  data: data,
  toolbar: [
    { type: 'i', content: 'undo', onclick: function() { myTable.undo(); } },
    { type: 'i', content: 'redo', onclick: function() { myTable.redo(); } },
    { type: 'i', content: 'save', onclick: function () { myTable.download(); } },
    { type: 'select', k: 'font-family', v: ['Arial','Verdana'] },
    { type: 'select', k: 'font-size', v: ['9px','16px','32px'] },
    { type: 'i', content: 'format_align_left', k: 'text-align', v: 'left' },
    { type:'i', content:'format_align_center', k:'text-align', v:'center' },
    { type: 'i', content: 'format_align_right', k: 'text-align', v: 'right' },
    { type: 'i', content: 'format_bold', k: 'font-weight', v: 'bold' },
    { type: 'color', content: 'format_color_text', k: 'color' },
    { type: 'color', content: 'format_color_fill', k: 'background-color' },
  ],
});

カスタムソート

sorting にソート関数を指定してソートアルゴリズムをカスタマイズすることができます。

const myTable = jspreadsheet(myTableElm, {
  data: data,
  sorting: function(direction) {
    return function(a, b) {
      var vA = a[1];
      var vB = b[1];
      if (!direction) {
        return (vA === '' && vB !== '') ? 1 : (vA !== '' && vB === '') ? -1 : (vA > vB) ? 1 : (vA < vB) ? -1 :  0;
      } else {
        return (vA === '' && vB !== '') ? 1 : (vA !== '' && vB === '') ? -1 : (vA > vB) ? -1 : (vA < vB) ? 1 :  0;
      }
    };
  },
});

その他の初期パラメータ

カラム定義

カラムタイトル

title はカラムタイトルを指定します。

const myTable = jspreadsheet(myTableElm, {
  data: data,
  columns: [
    { title:'Date' },
    { title:'Item' }
  ]
}

カラム幅

width はカラム幅をピクセル単位で指定します。

  columns: [
    { title:'Date', width:100 },
    { title:'Item', width:200 }
  ]

カラムアライン

align はカラムの右寄せ・中央・左寄せを指定します。

  columns: [
    { title:'Date', width:100, align:'right' },
    { title:'Item', width:200, align:'left' }
  ]

カラムタイプ

type でカラムタイプを指定します。image, color, dropdown などはセルをダブルクリックすると選択できます。

  columns: [
    { title:'Date', type:'calendar', options:{ format:'YYYY/MM/DD' } },
    { title:'Item', type:'text' },
    { title:'Price', type:'numeric', mask:'$ #.##,00', decimal:',' },
    { title:'Photo', type:'image' },
    { title:'Color', type:'color', render:'square' },
    { title:'Choice', type:'dropdown', source:['OK', 'NG'] },
    { title:'Check', type:'checkbox' },
    { title:'Check', type:'radio' },
    { title:'Hide', type:'hidden' },
    { title:'Hide', type:'html' }
  ]

その他のカラムパラメータ

メソッド

jspreadsheet() が返却するテーブルオブジェクトに対してメソッドを呼び出すことができます。

const myTable = jspreadsheet(myTableElm, {
  data: data
});
var values = myTable.getData();
console.log(values);

イベント

下記の様にセルの値が変更されたなどのイベントハンドラを設定することができます。

const myTable = jspreadsheet(myTableElm, {
  data: data,
  onchange: function(el, cell, x, y, value, oldValue) {
    console.log({el});
    console.log({cell});
    console.log({x});
    console.log({y});
    console.log({value});
    console.log({oldValue});
  }
});
Copyright (C) 2022 杜甫々
初版:2022年10月30日 最終更新:2022年10月30日
https://www.tohoho-web.com/ex/jspreadsheet.html