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

Question

我正在制作一个屏幕，其中 1 到 n hansontables 根据数据库中的其他实体动态添加。每个表格都有保存、x(删除行)和+(添加行)按钮。

我成功地创建了各种表，就像在带有全局变量的可操作示例中一样:

var hot;

$(document).ready(function () {

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

然后在其他方法中我可以像这样改变表格:

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

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

但是所有 handsontable 文档 ( 1 2 ) 都是基于使用 hot = new Handsontable(container, config); 创建一个表，并在引用这个变量之后，即 hot。获取数据()

所以，我的问题是引用已创建的 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');
  

Answer 1

简答与一位 friend 交谈，他给了我解决问题的线索。我使用了与保留谷歌标记和引用工具提示相同的技术。将引用保留在 array 中.

---

自己的长答案

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

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感谢快速、出色和快速的支持。

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这将跟踪创建的表:

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

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