使用jQuery获取Handsontable实例及数据时遇实例未定义问题求助

问题原因 #

你用$('#divTablePp').handsontable('getInstance')是jQuery插件的调用方式，但你的Handsontable实例是通过原生JS的new Handsontable()直接创建的，并非用jQuery插件的$(selector).handsontable(options)初始化，所以jQuery方法找不到对应的实例，导致dynamicTableGps为undefined。

可行解决方案 #

方案1：使用Handsontable静态方法获取实例 #

Handsontable提供了全局静态方法Handsontable.getInstance()，可以直接从容器元素获取对应的实例，不受初始化方式限制：

$('#addGeometry').on('click', function() {
  const container = document.querySelector('#divTablePp');
  const dynamicTableGps = Handsontable.getInstance(container);
  if (dynamicTableGps) {
    const data = dynamicTableGps.getData();
    console.log("Data of Handsontable : ", data);
  } else {
    console.log("Handsontable实例未初始化");
  }
})

方案2：将实例暴露到可访问的作用域 #

修改initTable函数，把实例变量提升到全局或者外层作用域，让点击事件可以直接访问：

// 声明全局变量存储实例
let gpsDynamicTable;

function initTable() {
  const container = document.querySelector('#divTablePp')
  gpsDynamicTable = new Handsontable(container, {
    data: [['', '']],
    rowHeaders: function(index) { return 'Point ' + (index + 1) },
    colHeaders: ['X', 'Y'],
    colWidths: [100, 100],
    rowHeights: 40,
    height: 'auto',
    fillHandle: { direction: 'vertical', autoInsertRow: true },
    licenseKey: 'non-commercial-and-evaluation'
  })
}

$('#addGeometry').on('click', function() {
  if (gpsDynamicTable) {
    const data = gpsDynamicTable.getData();
    console.log("Data of Handsontable : ", data);
  }
})

方案3：将实例绑定到容器元素属性 #

初始化时把实例挂载到容器元素的自定义属性上，后续通过容器元素获取：

function initTable() {
  const container = document.querySelector('#divTablePp')
  const gpsDynamicTable = new Handsontable(container, {
    // 原有配置项不变
    data: [['', '']],
    rowHeaders: function(index) { return 'Point ' + (index + 1) },
    colHeaders: ['X', 'Y'],
    colWidths: [100, 100],
    rowHeights: 40,
    height: 'auto',
    fillHandle: { direction: 'vertical', autoInsertRow: true },
    licenseKey: 'non-commercial-and-evaluation'
  })
  // 绑定到容器自定义属性
  container.hotInstance = gpsDynamicTable;
}

$('#addGeometry').on('click', function() {
  const container = document.querySelector('#divTablePp');
  const dynamicTableGps = container.hotInstance;
  if (dynamicTableGps) {
    const data = dynamicTableGps.getData();
    console.log("Data of Handsontable : ", data);
  }
})

注意事项 #

确保initTable()函数已经在页面加载完成后被调用，否则实例还未创建，任何方法都无法获取到。

内容的提问来源于stack exchange，提问作者Amir