【Handsontable】readOnly 読取専用

f:id:coogi-se:20210804235542p:plain

読取専用

Handsontable（ハンズオンテーブル）では、簡単にセルを読取専用にできます。
本日は、そのやり方についてご紹介します。

$(function(){
  
  var data = [
    ["", "Ford", "Tesla", "Toyota", "Honda"],
    ["2017", 10, 11, 12, 13],
    ["2018", 20, 11, 14, 13],
    ["2019", 30, 15, 12, 13]
  ];
  
  var container = document.getElementById('handsonTable');
  
  var hot = new Handsontable(container, {
    data: data,
    readOnly: true,
  });
});

上記のやり方でもできたと思いますが、
これだと汎用的ではないので、もう一つ。条件付き書式のような書き方もできますが、以下の方がスマートに書けます。

$(function(){
  
  var data = [
    ["", "Ford", "Tesla", "Toyota", "Honda"],
    ["2017", 10, 11, 12, 13],
    ["2018", 20, 11, 14, 13],
    ["2019", 30, 15, 12, 13]
  ];
  
  var container = document.getElementById('handsonTable');
  
  var hot = new Handsontable(container, {
    data: data,
    columns: function(col) {
      return {
        readOnly: col == 1 || col == 3,
      }
    },
  });
});

おまけ

途中からreadOnly（読み取り専用）にする場合は、updateSettingsを使用します。
※updateSettingsは、Handsontableを構築した際のオプションに適用されます。
使用していないオプションには、適用されません。

以下の場合は、columnsに対し設定を更新しています。

hot.updateSettings({
  columns: function() {
    return {
      readOnly: true
    }
  }
});

coogi-memo.hatenablog.com

はしくれSEめも

SEに必要情報をめも程度に残していこうと思っています。

【Handsontable】readOnly 読取専用

読取専用

おまけ

関連記事