Jspreadsheet 使い方メモ２-2（グリッドのオプション）

はじめに

これは、Jspreadsheet Advent Calendar 2024の18日目の記事となります。

「Handsontable 使い方メモ２（グリッドのオプション）」と比較しながら書いていきます。

※全てのオプションは網羅していません。

全てのオプションを確認したい場合は、 公式ドキュメント を参照

オプションの記事は長かったため、分割することにしました。

• Jspreadsheet 使い方メモ２-1（グリッドのオプション）

オプション

コンテキストメニュー

メニューを有効にする

デフォルトでコンテキストメニュー(contextMenu)は有効になっている。

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  minDimensions: [5,5],
  contextMenu: true
});

• contextMenu に true を設定すると、右クリックでメニューが開くようになる
• デフォルトで、いくつかのメニューが表示されるようになっている

表示するメニューをカスタマイズする

コンテキストメニューの設定 Jspreadsheet のメモ - 閑古鳥ブログ

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  minDimensions: [5,5],
  contextMenu: function(obj, x, y, e) {
    let items = [];

    if (obj.options.allowInsertRow == true) {
      items.push({
        title: obj.options.text.insertANewRowBefore,
        onclick: function() {
          obj.insertRow(1, parseInt(y), 1);
        }
      });
    }

    return items;
  }
});

• 表示させたい項目だけを配列で指定できる
• 以下が、指定できる文字列(全部ではない)
  https://github.com/jspreadsheet/ce/blob/master/resources/lang/en_GB.json

値	説明	デフォルト
insertANewRowBefore	選択している行の上に空行を挿入	デフォルト
insertANewRowAfter	選択している行の下に空行を挿入	デフォルト
deleteSelectedColumns	選択している列を削除	デフォルト
Copy...	コピー	デフォルト
Paste...	貼り付け	デフォルト
Save as...	ファイルに保存	デフォルト
About	JspreadSheetの情報	デフォルト
insertANewColumnBefore	選択している列の前に空列を挿入	デフォルト
insertANewColumnAfter	選択している列の後に空列を挿入	デフォルト
renameThisColumn	選択している列名を変更
orderAscending	昇順に並び替え
orderDescending	降順に並び替え
deleteSelectedRows	選択している行を削除
editComments	コメントの編集
addComments	コメントの追加
clearComments	コメントの削除

デフォルトで使用できるメニューのラベルを変更する

text属性に該当する日本語を割り当てる。
https://github.com/jspreadsheet/ce/blob/master/resources/lang/en_GB.json

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  minDimensions: [5,5],
  text: {
    insertANewRowBefore: '上に行を挿入',
    insertANewRowAfter: '下に行を挿入',
    deleteSelectedRows: '選択行の削除',
    copy: 'コピー',
    paste: '貼り付け'
  }
});

メニュー項目を自作する

Jsuitesのコンテキストメニューを使用しているので、下記サイトが参考になる。
Jsuites - JavaScript contextmenu

基本

セパレートはitems.push({ type:'line' });で追加する。

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  minDimensions: [5,5],
  contextMenu: function(obj, x, y, e) {
    let items = [];

    items.push({
      title: 'メニュ～',
      onclick:function() {
        console.log(`${x},${y},${e}`);
      }
    });

    return items;
  }
});

• contexMenu にオブジェクトを渡すようにする
  • items というプロパティに上書きする設定内容を持った オブジェクト を渡す
  • title が、表示で使用される文字列
  • shortcut に、ショートカットキーを指定できる
  • onclick に、メニューが選択されたときのコールバック関数を指定できる

ラジオボタン(ぽいもの)を実装する

Handsontableでは名前nameに関数を指定できるが、名前titleには文字列しか指定できないため、同じようには実装できない。

サブメニュー

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  minDimensions: [5,5],
  contextMenu: function(obj, x, y, e) {
    let items = [];

    items.push({
      title: 'my menu',
      submenu: [
        {
          title:'sub menu 1',
          onclick:function() {
            alert('SubMenu 1');
          }
        },
        {
          title:'sub menu 2',
          onclick:function() {
             alert('SubMenu 2')
          }
        }
      ]
    })

    return items;
  }
});

• submenu で次の階層のメニューを追加できる

有効無効

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  minDimensions: [5,5],
  contextMenu: function(obj, x, y, e) {
    let items = [];

    items.push({
      title: 'item1',
      disabled: true
    })
    items.push({
      title: 'item2',
      disabled: false
    })

    return items;
  }
});

• disabled に boolean を設定することで、項目の有効・無効を指定できる
• Handsontable のように関数による有効無効の切り替えはできない

コメント

Handsontableのcommentsの機能に近いものはallowCommentsにあたる。
HandsontableのcontextMenuはない為、コンテキストメニューをカスタマイズする。

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  minDimensions: [5,5],
  allowComments: true,
  text: {
    addComments: 'コメントの追加',
    editComments: 'コメントの編集',
    clearComments: 'コメントの削除'
  },
  contextMenu: function(obj, x, y, e) {
    let items = [];

    if (obj.options.allowComments == true) {
      let title = obj.records[y][x].getAttribute('title') || '';

      items.push({
        title: title ? obj.options.text.editComments : obj.options.text.addComments,
        onclick:function() {
          let comment = prompt(obj.options.text.comments, title);
          if (comment) {
            obj.setComments([ x, y ], comment);
          }
        }
      });

      if (title) {
        items.push({
          title:obj.options.text.clearComments,
          onclick:function() {
            obj.setComments([ x, y ], '');
          }
        });
      }
    }

    return items;
  }
});

• allowComments を true にするとセルへのコメント追加を許可(デフォルト：false)

任意のセルにコメントを設定する

Handsontableのcellの機能に近いものはcommentsにあたるが、Pro版でのみ使用できる。
https://jspreadsheet.com/docs/comments

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  minDimensions: [5,5],
  allowComments: true
}

table.setComments([ 1, 1 ], 'Hello Comment');

• setCommentsメソッドで、任意のセルにコメントを記述できる

コピペの有効・無効

HandsontableのcopyPasteの機能にあたるものはありません。

コピーできる列数を制限する

HandsontableのcopyColsLimitの機能にあたるものはありません。

罫線の設定

HandsontableのcustomBordersに近いものはstyleにあたる。
HandsontableのcontextMenu: ['borders']のようなものはない。
https://jspreadsheet.com/docs/style

任意の場所に罫線を引く

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  data: [
    [1, 2, 3],
    [1, 2, 3],
    [1, 2, 3]
  ],
  allowComments: true,
  style: {
    B2: 'border-top: 3px solid red; border-right: 3px solid #1199ff'
  },
});

table.setStyle('C3', 'background-color', 'orange');

• 罫線を引く場所に CSS を渡すことで、任意の場所に罫線を引くことができる
• setStyleメソッドで指定セルにスタイルを設定できる

範囲を指定して罫線を引く

HandsontableのcustomBorders.rangeにあたるものはない
Pro版ではセル指定で'A:A'として範囲指定することはできるようだが、CE版は範囲指定ができない。

最後に

空データを指定するのにdata: Array.from({ length: 5 }, () => Array(5).fill(''))と最初に指定していたが、minDimensions: [5,5]を見つけて書き直しました。