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">
ダウンロードする場合：
<!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 の様にセルを編集することができます。
data は JavaScript でデータを指定します。
const data = [ ['AAA', 123], ['BBB', 456] ]
const myTable = jspreadsheet(myTableElm, {
data: data
}
data は JSONファイルの URL を指定します。
const myTable = jspreadsheet(myTableElm, {
url: './data.json'
}
csv は CSVファイルの URL を指定します。csvHeaders は CSVファイルの1行目をヘッダと見なすか否か、csvDelimiter はカラムのデリミタを指定します。
const myTable = jspreadsheet(myTableElm, {
csv: './data.csv',
csvHeaders: true,
csvcsvDelimiter: ','
}
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});
}
});