我如何引用一个已经创建的 handson table 来改变它？

Question

我正在制作一个屏幕，其中 1 to n hansontables 根据数据库中的其他实体动态添加。每个 table 都会有 save、x（删除行）和 +（添加行) 按钮。

我成功地创建了各种 tables，就像在 handsontable 示例中使用全局变量一样：

var hot;

$(document).ready(function () {

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

然后在其他方法中我可以改变 table 如：

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

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

但是所有 handsontable 文档 (1 2) 都是基于使用 hot = new Handsontable(container, config); 创建 table 并在引用此变量后即 hot.getData()

所以，我的问题是 这是引用已创建 handson table??

的正确方法

我尝试了几种方法：

像

一样使用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');

Answer 1

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

自己的长答案

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

tables = [];

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

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

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

的位置

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

热门团队长答案

首先：非常感谢Aleksandra and Handsontable team的快速、优质和迅速的支持。

The key is used to better track your instances and you can choose to write it down with an object that will easily let you manage Handsontable instances.

查找 here the fiddle 演示。

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

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;
    }
};

然后，有了这个对象，您就可以创建 tables，例如：

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

然后您将 table 更改为：

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

比我的解决方案优雅干净得多。

Answer 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[=29 从 tabHandsOnTable{} 访问 handsontable =] 这是当前选项卡的选项卡 ID。进一步使用 setDateAtCell 函数更新 handosontable 的单元格，如下所示：

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

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

我如何引用一个已经创建的 handson table 来改变它？

How do I reference an already created handson table to alter it?

javascript

jquery

handsontable

自己的长答案

热门团队长答案