OWN LONG ANSWER

Question

我正在根据数据库中的其他实体制作一个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");
}

但是，只要我的表数没有修复，我需要创建表并在引用对象并修改它们之后。

但是所有动手文档（1 2）都基于创建一个包含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');

Answer 1

简短回答，与朋友交谈，他给了我解决问题的线索。我使用相同的技术来保留谷歌标记并引用工具提示。将引用保留在array。

中

OWN LONG ANSWER

实际上，即使遵循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]);

HOT TEAM LONG ANSWER

首先：非常感谢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);

远比我的溶液更优雅和干净。

Answer 2

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

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

要在Tab中显示handontable内容中的数据（变量 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 {} 访问智能手册。此外，可以使用 setDateAtCell 功能更新handosontable的单元格，如下所示：

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

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

如何引用已创建的handson表来更改它？

2 个答案:

OWN LONG ANSWER

HOT TEAM LONG ANSWER