如何让 jQuery .change() 引用 Handsontable 上的单元格？

Question

尝试做：我想将 Handsontable 上的用户更改保存到数据库中。我认为我可以做的一种方法是拥有一个隐藏的 html 表单，其中表单输入被引用到 Handsontable 中的特定单元格。

问题：我无法在 .change 函数中引用 Handsontable 内的特定单元格。

我在下面的尝试：尝试获取用户对单元格 row(2)column(2) 所做的任何更改，并将 html 表单 ID row2col2formInput 更改为该值。

    <script>
            //fetch handsontable input for row 2 colum 2 and change corresponding hidden form input
            $("#example").handsontable.(data[2][2]).change(function() {
                $("#row2col2formInput").val($(this).val());
            });


$(document).ready(function () {


  var
 data = [
    ['', 'Kia', 'Nissan', 'Toyota', 'Honda'],
    ['2008', 10, 11, 12, 13],
    ['2009', 20, 11, 14, 13],
    ['2010', 30, 15, 12, 13]
  ],
    container = document.getElementById('example'),
    hot;  


  hot = new Handsontable(container, {
    data: data,
    minSpareRows: 1,
    colHeaders: true,
    contextMenu: true
  });


});


</script> 

Answer 1

首先，您是对的，您引用单元格的行是错误的。而且您将无法以您正在执行的方式引用单元格。反正你也不应该这样做。

这是完成此任务的另一种方法，顺便说一下，这是我们大多数使用 HOT 的人无论如何都会做的事情。

我不知道您的数据库结构，所以很难说，所以假设您使用的是 SQL，并且每一行都是数据库中某个表上的物理行。现在，您可能知道，SQL 中的每一行都应该有一个唯一的主自动递增键，您可以使用它来引用行，这在您开始在 HOT 中对行进行改组时会派上用场。

现在假设您有一个带有 HOT 实例的简单 JS，如您所描述的。 data 对象是向 HOT 实例提供数据的对象，但更重要的是，它是一个高度变异的对象。当用户对单元格进行更改时，此对象会发生变化。

这意味着您可以在某处添加一个Submit 按钮，该按钮将在当时抓取对象并将其发送到您的数据库。这是经常使用的一种方法。这是唯一的 SQL id 派上用场的地方。您的 data 对象可能会将此 ID 附加到现有行并使其成为隐藏列（无需向用户显示此信息）。

如果用户创建了一个新行，那么您可以附加一个负递减整数（以表示数据库中的“新”行），当用户提交时，您只需遍历 data 对象并执行对具有正 ID 的行进行 UPDATE，对具有负 IDS 的行进行 INSERT。

就是这样。另一种选择是您可以使用afterChange 事件在每次更改发生时自动将其保存到数据库中。你的函数会说类似

afterChange: function(changes, source) {
    // changes is an array of changes, where each change has 4 values, in order:
    // row index, col index, old value, new value
    changes.forEach(function(change) {
        var row = change[0];
        var col = change[1];
        var newVal = change[3];

        var hiddenIdIndex = data[row].length - 1; // put the hidden id always at the end
        var hiddenID = data[row][hiddenIdIndex];

        // make a call to your function which talks to the SQL db
        saveToDB(hiddenID, col, newVal);
        // in the function, you could first see if the ID exists in the system.
        // If it does, do an UPDATE using the newVal and the column name, or
        // simply suply this function with the entire row (data[row]). If it
        // doesn't exist, do an INSERT with the data[row].
    })
}

希望这会有所帮助！