从外部提交 Handsontable 中的更改

Question

默认情况下，当我们在 Handsontable 中的单元格内输入值并按 Enter 键或转到另一个单元格或页面的其他部分时，我们已经输入到单元格中的值将自动提交（验证后）。

但我现在有一个新要求。我想在 Handsontable 之外手动提交更改表单（例如，通过调用 JavaScript 函数）。

真正的故事是我在 Handsontable 的一些单元格中呈现了下拉控件。当用户在单元格中输入数字而不按 Enter 键时；然后单击另一个单元格中的下拉控件；我无权访问他们新输入的值。

当他们点击下拉菜单时，我将提交他们之前的更改。

有什么想法吗？

更新：

我创建了一个 jsFiddle，并尽我所能使其尽可能简单。 http://jsfiddle.net/mortezasoft/3c2mN/3/

如果您将 Maserati 单词更改为其他单词并且没有按 Enter 在下拉菜单中选择一个选项，您仍然可以看到名称 Maserati 显示为警报对话框。

   <div id="example"></div>

   var data = [
      ["", "Maserati"],
      ["", ""],

    ];

    $('#example').handsontable({
        data: data,
        minSpareRows: 1,
        colHeaders: true,
        contextMenu: true,
        cells: function (row, col, prop) {

            var cellProperties = {};

            if (col===0 && row===0) {
                cellProperties.renderer = selectBoxRenderer;
                cellProperties.readOnly =true;
            }

            return cellProperties;
        }
    });
    function selectBoxRenderer(instance, td, row, col, prop, value, cellProperties) {
        var $select = $("<select><option></option> <option>Show the name</option></select>");
        var $td = $(td);
        $select.on('mousedown', function (event) {
            event.stopPropagation(); //prevent selection quirk
        });

        $td.empty().append($select);
        $select.change(function () {
            //Default value is Maserati but we are gonna change it.
            alert($('#example').handsontable('getData')[0][1]);
        });
    }

Answer 1

您可以将instance.destroyEditor() 添加到$select 上的mousedown 处理程序。这将在第一次单击时提交更改，但还需要再次单击才能打开选择菜单。

$select.on('mousedown', function (event) {
  event.stopPropagation(); //prevent selection quirk
  instance.destroyEditor();
});

二次点击问题背后的原因是instance.destroyEditor()重新渲染表格，导致原来的select元素被破坏，所以点击事件无法生效。

为了解决这个问题，添加

if ($td.find('select').length!=0) return;

在渲染器的开头。这样在重新渲染时不会覆盖现有的select 元素。