Jspreadsheet

JavaScript で Excel ようなスプレッドシートを実現するライブラリです。最近、「jExcel」から「Jspreadsheet」に名称変更しました。下記3つの構成になっています。ここでは、Jspreadsheet CEについて説明していきます。

Handsontableとの違い

同じ作者のJsuitesというライブラリを使用する必要があります。
JS配列、JSON、CSV、XSLXファイルからデータを読み取ることができます。
loadData メソッドの代わりとして、setData メソッドに書き換えます。
JSONのマッピングは、data 属性から name 属性に書き換えます。
enterMoves オプションがないため、Enterキーで次のセルに移動できない。
outsideClickDeselects オプションがない。
fillHandle オプションの代わりに、selectionCopy オプションを使用する。
参照:Disable the dragging corner #996
readonly 属性が true でも setValue で値をセットすると外れてしまう。
セット後に instance.jexcel.getCell(cellName).classList.add('readonly'); を追加する
位置（x,y）からcell値(例 A1)を変換するには、jexcel.getColumnNameFromId([x, y]) を使用する。
jexcel の名前を変数として使用すると、内部の jexcel.getColumnNameFromId 関数など使用できなくなる。
デフォルトで列ヘッダーが表示される。列ヘッダーを表示有無の rowHeader オプションは無い。

デフォルトは薄い

.jexcel > tbody > tr > td.readonly
{
    color:rgba(0,0,0,0.3)
}

もう少し濃くする。最後の「0～1」がalpha値になります。「0」に設定した場合は完全に透明になります。また、「1」にした場合は透過されません。

.jexcel > tbody > tr > td.readonly 
{
    color:rgba(0,0,0,0.5)
}

hideIndex オプションは無いようなので、hideIndex()　メソッドを実行する、または下記のCSSを使用する。

.jexcel colgroup col:first-child {
    width: 0 !important;
}