javascript - 如何让 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 中随机排列行时，这会派上用场。

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

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

如果用户创建新行，那么您可以附加一个负递减整数(以表示数据库中的"new"行)，并且当用户提交时，您只需迭代数据 对象并对具有正 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].
    })
}

希望这有帮助!