Handsontable：如何通过容器获取实例？

Question

我需要创建一个函数来执行一些数据更新并重新渲染到 handsontalbe 的渲染实例 (

var ht = new Handsontable(el,options)

)。在我的案例中，我可以轻松获得的是

el

（用作实例容器的元素）。只知道

ht

就可以得到

el

吗？或者我必须“记住”

ht

某个地方以便稍后访问它？

（我试过

Handsontable(el)

它创建了一个新表，它不返回一个已经创建的实例）

Answer 1

如果你使用 jQuery，你应该可以这样做：

// Instead of creating a new Handsontable instance
// with the container element passed as an argument,
// you can simply call .handsontable method on a jQuery DOM object.
var $container = $("#example1");

$container.handsontable({
    data: getData(),
    rowHeaders: true,
    colHeaders: true,
    contextMenu: true
});

// This way, you can access Handsontable api methods by passing their names as an argument, e.g.:
var hotInstance = $("#example1").handsontable('getInstance');

这里是文档链接：https://docs.handsontable.com/pro/1.13.0/demo-jquery.html

Answer 2

您无法从构造它的 DOM 元素中获取 handsontable 对象。 handsontable 实例只是一个包装器，它控制用于查看的 DOM 元素，并且该元素没有对其包装器的引用。

这意味着您确实需要将对

ht

的引用存储在某个地方，就像您存储另一个变量一样。

如果您的问题是范围，请将表格设为 window 对象的属性，并且可以从页面的任何位置访问它。这可以简单地使用：

window.ht = new Handsontable(el,options)

但是，如果可能，请避免创建此类全局变量并将其保持在适当的范围内。

Answer 3

创建 Handsontable 时 - 添加对 div 的引用 - 在本例中为

hot

属性

function loadSheet() {
  var container = document.getElementById('example_table')
  container.hot = new Handsontable(container, {
    licenseKey: 'non-commercial-and-evaluation',
    rowHeaders: true,
    colHeaders: true,
    height: 'auto',
    data: [
      ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
      ['2019', 10, 11, 12, 13],
      ['2020', 20, 11, 14, 13],
      ['2021', 30, 15, 12, 13]
    ]
  })
}

然后当您需要稍后返回时

function onClickAddRowToSheet() {
  var container = document.getElementById('example_table')
  var data = container.hot.getData()
  data.push(['2022', 40, 16, 13, 14])
  container.hot.updateData(data)
}

Answer 4

每个实例都有一个

rootElement

你可以在这里测试它https://jsfiddle.net/zhfLboym/所以对于一个

const container = document.querySelector('#example1');
const hot = new Handsontable(container, settings)

rootElement

将是

div#example1.hot.handsontable.htColumnHeaders

或只是

rootElement.id

对于

example1

。

但是没有用于更改数据的API，也没有基于元素的设置，它必须是对实例的引用。所以我建议准备一个包含元素和实例的对象并将其用作参考。