とほほのJspreadsheet入門
目次
Jspreadsheetとは
- JavaScript で Excel 風スプレッドシートを実現するライブラリです。
- jExcel という名前でしたが Jspreadsheet に名称変更したようです。
- 無償版(MITライセンス)の Jspreadsheet CE、有償版の Jspreadsheet Pro、クラウド版の Jspreadsheet Cloud があります。
- 同じ作者による Jsuites というライブラリを使用しています。
- JS配列、JSON、CSV、XSLXファイルからデータを読み取ることができます。
- Excel から Jspreadsheet に、またはその逆にデータをコピー＆ペーストすることができます。
- プラグイン機能によりカスタムカラムやカスタムエディターを拡張することができます。
- ここでは Jspreadsheet CE v4 について説明します。
インストール
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 の様にセルを編集することができます。
| 日付 | 項目 | 出金 | |
| 1 | 2022/10/24 | 文房具 | 420 |
| 2 | 2022/10/26 | 外食費 | 1,300 |
データ読込
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;
}
};
},
});
その他の初期パラメータ
- allowComments：セルへのコメント追加を許可するか (デフォルト：false)。
- allowInsertColumn：列追加を許可するか (デフォルト：true)。
- allowInsertRow：行追加を許可するか（デフォルト：true)。
- allowManualInsertColumn：タブキーで列追加を許可するか (デフォルト：true)。
- allowManualInsertRow：改行キーで行追加を許可するか (デフォルト：true)。
- allowDeleteColumn：列削除を許可するか (デフォルト：true)。
- allowDeleteRow：行削除を許可するか (デフォルト：true)。
- allowDeletingAllRows：すべての行を削除することを許可するか (デフォルト：false)。
- autoCasting："1,234" などのカンマ付き数値を数字と見なすか (デフォルト：true)。
- autoIncrement：数値ドラッグ時に自動インクリメントするか (デフォルト：true)。
- classes：セルに付加するクラス (例：{ A1: "classA" })。
- colAlignments：カラムの横位置 (例：["left", "center", "right"])。
- columnDrag：カラムのドラッグを許可するか (デフォルト：false)。
- columnSorting：ダブルクリックでカラムをソートするか (デフォルト：true)。
- columnResize：カラムのリサイズを可能とするか (デフォルト：true)。
- colWidths：カラムの横幅 (例：[200, 300])。
- contextMenu：コンテキストメニュー (例：？？？)。
- csvFileName：CSVファイル名 (例："mydata")。
- defaultColAlign：デフォルトのカラムアライン (例：'left')。
- defaultColWidth：デフォルトのカラム横幅 (例：100)。
- defaultRowHeight：デフォルトの行高さ (例：100)。
- editable：セルを編集可能とするか（デフォルト：true)。
- fullscreen：フルスクリーンモードにする (デフォルト：false)。
- lazyLoading：遅延ローディングを行う (デフォルト：false)。
- loadingSpin：ロード中のスピンを表示する (デフォルト：false)。
- mergeCells：セルをマージする (例：{ A1: [2, 2] })。
- minSpareRows：最小予備行数 (例：3)。
- minSpareCols：最小予備列数 (例：3)。
- minDimensions：最小列数・行数 (例：[5, 3])。
- pagination：ページネーション行数 (例：10)。
- paginationOptions：ページネーション行数候補。search:true の時に有効 (例：[10, 50, 100])。
- parseFormulas：計算式をサポートするか (デフォルト：true)。
- rowDrag：行ドラッグを許可するか (デフォルト：true)。
- rowResize：高さのリサイズを許可するか (デフォルト：false)。
- search：検索を可能とするか (デフォルト：false)。
- selectionCopy：セル選択時の右下の■ドラッグでコピーを許可するか (デフォルト：true)。
- stripHTML：セル内のHTMLを無効化する (デフォルト：true)。
- stripHTMLOnCopy：セルをコピーする際にHTMLもコピーするか (デフォルト：false)。
- tableHeight：tableOverflow:true 時のテーブルの最大の高さ (例："300px")。
- tableWidth：tableOverflow:true 時のテーブルの最大の横幅 (例："200px")。
- tableOverflow：テーブルの高さや横幅を超えた場合にスクロールバーを表示するか (デフォルト：false)。
- wordWrap：ALT+Enterでセル内改行を許可するか (デフォルト：false)。
カラム定義
カラムタイトル
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' }
]
その他のカラムパラメータ
- name
- source
- options
- editor
- allowEmpty
メソッド
jspreadsheet() が返却するテーブルオブジェクトに対してメソッドを呼び出すことができます。
const myTable = jspreadsheet(myTableElm, {
data: data
});
var values = myTable.getData();
console.log(values);
- getCell(cell)：セル(例："A1")オブジェクトを得る。
- getData()：テーブル全体の値を取得する。
- setData(data)：テーブルにdata(例：[[1,2,3],[4,5,6]])を設定する。
- getValue(cell)：セル(例："A1")の値を得る。
- setValue(cell, value)：cellセル(例："A1")にvalue(例："ABC")を設定する。
- insertRow(n)：末尾にn行追加する。
- deleteRow(row)：row番目の行を削除する。
- insertColumn(n, col, before, options)：col番目のセルの前(before:falseの場合は後)にn個のカラムを追加する。
- deleteColumn(col)：col番目の列を削除する。
- getWidth(col)：col番目の列の横幅を得る。
- setWidth(col, width)：col番目の列の横幅をwidthに設定する。
- getStyle([cell])：cell(例："A1")のスタイルを得る。省略時はテーブル全体。
- setStyle(cell, prop, value)：cell(例："A1")セルに prop: value のスタイルを設定する。
- getHeader(col)：col番目の列のヘッダタイトルを得る。
- setHeader(col, title)：col番目のヘッダタイトルを指定する。
- getComments(cell)：セルのコメントを得る。
- setComments(cell, comment)：セルにコメントを設定する。
- getConfig(key)：コンフィグ値(allowComments等)を得る。
- setConfig(key, value)：コンフィグ値を設定する。
- orderBy(col[, order])：col番目のカラム値でソート。order=0は昇順、1は降順、省略するとトグル。
- updateSelection(c1, c2, flag)：セルオブジェクト範囲 c1～c2 を選択する。flag=true だと選択イベントが発生する。
- download()：CSVファイルをダウンロードする。
イベント
下記の様にセルの値が変更されたなどのイベントハンドラを設定することができます。
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});
}
});
- onafterchanges(records)：変更後。
- onbeforechange(el, cell, x, y, value)：変更前。
- oneditionend(el, cell, x, y, value, save)：編集終了時。
- oneditionstart(el, cell, x, y)：編集開始時。
- onbeforesave(el, obj, data)：保存前。
- onsave(el, obj, data)：保存時。
- onchange(el, cell, x, y, value, oldValue)：変更時。
- onselection(el, borderLeft, borderTop, borderRight, borderBottom, origin)：選択時。
- onsort(el, column, order)：ソート時。
- onbeforeinsertcolumn(el, columnNumber, numOfColumns, insertBefore)：カラム挿入前。
- oninsertcolumn(el, columnNumber, numOfColumns, historyRecords, insertBefore)：カラム挿入時。
- onbeforedeletecolumn(el, columnNumber, numOfColumns)：カラム削除前。
- ondeletecolumn(el, columnNumber, numOfColumns, historyRecords)：カラム削除時。
- onmovecolumn(el, o, d)：カラム移動時。
- onresizecolumn(el, column, width, oldWidth)：カラムサイズ変更時。
- onbeforeinsertrow(el, rowNumber, numOfRows, insertBefore)：行挿入前。
- oninsertrow(el, rowNumber, numOfRows, rowRecords, insertBefore)：行挿入時。
- onbeforedeleterow(el, rowNumber, numOfRows)：行削除前。
- ondeleterow(el, rowNumber, numOfRows, rowRecords)：行削除時。
- onmoverow(el, o, d)：行移動時。
- onresizerow(el, row, height, oldHeight)：行サイズ変更時。
- onchangeheader(el, column, oldValue, newValue)：ヘッダ変更時。
- onchangemeta(el, o, k, v)：メタ情報変更時。
- onchangepage(el, pageNumber, oldPage)：ページ変更時。
- onchangestyle(el, o, k, v)：スタイル変更時。
- oncomments(el, comments, title, cell, cell[0], cell[1])：コメント変更時。
- oncreateeditor(el, cell, x, y, editor)：エディタ作成時。
- onblur(el)：フォーカスを失う時。
- onfocus(el)：フォーカスがあたる時。
- onload(el, obj)：ロード時。
- onmerge(el, cellName, colspan, rowspan)：マージ時。
- oncopy(el, row, hashString)：コピー時。
- onbeforepaste(el, data, x, y)：ペースト前。
- onpaste(el, data)：ペースト時。
- onundo(el, historyRecord)：アンドゥ時。
- onredo(el, historyRecord)：リドゥ時。
リンク
- Jspreadsheet CE (Home)
- Jspreadsheet CE (GitHub)
- Jspreadsheet Pro (Home)
- Jspreadsheet Cloud (Home)
- Jsuites (Home)
Copyright (C) 2022 杜甫々
初版:2022年10月30日 最終更新:2022年10月30日
https://www.tohoho-web.com/ex/jspreadsheet.html