【问题标题】：How do I reference an already created handson table to alter it?如何引用已经创建的动手表来更改它？
【发布时间】：2016-02-04 22:28:30
【问题描述】：

我正在制作一个屏幕，其中添加了 1 to n hansontables，这取决于数据库中的其他实体。每个表格都有 save、x（删除行）和 +（添加行）按钮。

我成功地创建了各种表格，例如在带有全局变量的动手示例中：

var hot;

$(document).ready(function () {

  var container = document.getElementById('basic_example');
  hot = new Handsontable(container, config);
}

然后在其他方法中我可以更改表格，例如：

function addRow() {
    hot.alter("insert_row");
}

但是，只要我的表格数量不固定，我就需要创建表格，然后引用对象并修改它们。

但所有实用文档 (12) 都是基于使用 hot = new Handsontable(container, config); 并在引用此变量（即 hot.getData()）之后创建一个表

那么，我的问题是引用已创建的handson 表的正确方法是什么？？

我已经尝试了几件事：

使用JQuery 喜欢

 $('idOfTheTable')

或

var hot = new Handsontable(document.getElementById('idOfTheTable'));
hot.alter('insert_row', 10);

创建一个DOM 函数$$ 喜欢：

var $$ = function(id) {
    return document.getElementById(id);
};

$$(idOfTheTable);

Check here a fiddle 最后一次尝试：

var $container = $("#" + tableName);
var handsontable = $container.data('handsontable');
handsontable.alter('insert_row');

【问题讨论】：

标签： javascript jquery handsontable

【解决方案1】：

简答，与朋友交谈，他给了我解决问题的线索。我使用了与保存谷歌标记和参考工具提示相同的技术。将引用保存到array。

自己的长答案

实际上，即使遵循 Handsontable 文档的JQuery guide，我也无法通过 JQuery 进行引用。但只要引用存在于某个时刻，我就可以将此引用保存在声明为全局变量的数组中。

tables = [];

每次我调用创建表的方法时，我都会将表引用推送到数组中以使其保持活动状态。

var hot = new Handsontable(container, options);
tables.push(hot);

完成了这个，我怎么知道我必须调用哪个表？很简单，HTML 代码也是由<c:forEach items="${list}" var="item"> 动态创建的，我只是创建了一个在每次迭代中递增的计数器。我只是创建表女巫id="table_{counter}" 并获得位置

var tablePosition = parseInt(tableName.split("_")[1]);

热门团队长答案

首先：非常感谢 Aleksandra and Handsontable team 的快速、出色和快速的支持。

密钥用于更好地跟踪您的实例，您可以选择用一个对象将其写下来，以便您轻松管理 Handsontable 实例。

查找here the fiddle 演示。

重要部分，定义一个HotRegisterer 来跟踪创建的表：

var HotRegisterer = {
    bucket: {},
    register: function(key, container, options) {
        var hot = new Handsontable(container, options);
        
        if (typeof key === 'string') {
            this.bucket[key] = hot;    
        } else if (typeof key === 'object') {
            key['__hot'] = hot;
        }
    },
    getInstance: function(key) {
        var hot;
        
        if (typeof key === 'string') {
            hot = this.bucket[key];    
        } else if (typeof key === 'object') {
            hot = key['__hot'];
        }
        
        return hot;
    }
};

然后，有了这个对象，您可以创建如下表格：

var container = document.getElementById('example1');
  
HotRegisterer.register('myhot', container, {
    data: getCarData(),
    colHeaders: true
});

然后你改变表格：

HotRegisterer.getInstance('myhot').getSourceDataAtCol(0);

比我的解决方案更优雅、更干净。

【讨论】：

是的，HotRegisterer 解决方案很棒。此外，如果你还想使用你的，我会推荐一个地图而不是一个数组。这样您就可以使用 id 来跟踪它们。
如何在angularjs项目中使用？我找不到任何（完整）演示。只是 sn-ps。
@ThorstenC 与 HandsOnTable 团队联系，他们给了我一个超级快速、专业和干净的答案。 handsontable.com/contact.html
您好，HotRegisterer.getInstance('myhot') 正在为我提供实例，我也可以访问它的属性。但search 属性不可访问。谁能告诉我原因？

【解决方案2】：

您可以使用最少的代码提供类似的解决方案，如下所示：

//References to handsontable objects on Tab. Key=TabId, Value=Reference to Variable
var tabHandsOnTable = {};

在选项卡中的容器内的handsontable中显示数据（变量liTabId是当前TabId）以下是代码：

    //Displaying Cuboid in HandsonTable
  var container = document.getElementById(divCuboidWB);
  var hot = new Handsontable(container, {
    data: lidata.liarray,
    colHeaders : liHdr.liHdrArray,
    renderAllRows: true,
    rowHeaders: true,
    minSpareRows: 1,
  });
  //Saving reference of handsontable in global objects. key=liTabId
  tabHandsOnTable[liTabId] = hot;

现在您可以使用 activeTabId（当前标签的标签 ID）从 tabHandsOnTable{} 访问handsontable .此外，handosontable 的单元格使用 setDateAtCell 函数进行更新，如下所示：

//Render handsontable cell
function renderCell(rowid, colid, string_value, formula_string, cell_access)
{
  tabHandsOnTable[activeTabId].setDataAtCell(rowid, colid, string_value);
}

这是一个工作示例，我可以在同一个浏览器窗口中显示多个表格。

【讨论】：