はしくれSEめも

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

【Handsontable】行数の取得

handsontable

Handsontable(ハンズオンテーブル)で表示されている行数の取得方法について
紹介します。

countRows

countRows()は、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,
  });

  // サンプルの場合、「4」がコンソールに出力されます。
  console.log(hot.countRows());

});

autoRowSizeというプラグインを使用しても取得が可能です。
こちらは、行のインデックスになります。
autoRowSizeはHandsontableがレンダリングされない場合は、-1を返します。

最初の行(FirstVisibleRow)の取得

getFirstVisibleRow()は、表示されている最初の行インデックスを取得します。 基本的には'0'が取得されますが、行を非表示とかにしている場合は、'0'以外が取得されます。

$(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,
    autoRowSize: true,
  });

  var autoRowSize = hot.getPlugin("autoRowSize");

  // サンプルの場合、'0'がコンソールに出力されます。
  console.log(autoRowSize.getFirstVisibleRow());

});

最後の行(LastVisibleRow)の取得

getFirstVisibleRow()は、表示されている最後の行インデックスを取得します。

$(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,
    autoRowSize: true,
  });

  var autoRowSize = hot.getPlugin("autoRowSize");

  // サンプルの場合、'3'がコンソールに出力されます。
  console.log(autoRowSize.getLastVisibleRow());
});

getLastVisibleRow()countRows()で取得できる値が違うので、
注意してください。

関連記事

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com