Question

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

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

真实的故事是我在Handsontable中的某些单元格中呈现了下拉控件。当用户在没有按Enter键的情况下在单元格中输入数字时;然后单击另一个单元格中的下拉控件;我无法访问他们新输入的值。

当他们点击下拉列表时，我将提交他们以前的更改。

任何想法？

更新：

我创建了一个jsFiddle并尽力保持尽可能简单。 http://jsfiddle.net/mortezasoft/3c2mN/3/

如果您将玛莎拉蒂的单词更改为其他内容并且未按Enter键，请在下拉列表中选择一个选项，您仍然可以看到名称玛莎拉蒂显示为警告对话框。

   <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()添加到mousedown上的$select处理程序中。这将在第一次点击时提交更改，但还需要再次单击才能打开选择菜单。

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

第二次点击问题背后的原因是instance.destroyEditor()重新呈现表格，导致原始select元素被销毁，因此点击事件无法生效。

要解决此问题，请添加

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

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

从外部承诺Handsontable的变化

1 个答案: