从外部提交 Handsontable 中的更改

Posted 2023-03-22

【中文标题】从外部提交 Handsontable 中的更改

【英文标题】：Committing the changes in Handsontable from outside

【发布时间】：2013-12-20 13:22:17

【问题描述】：

默认情况下，当我们在 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]);
        );
    

【参考方案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 元素。

【讨论】：

不幸的是，需要第二次点击使这个技巧毫无用处。

谢谢你的把戏，但我也已经试过这个了。我的工作表中有垂直滚动条。如果用户滚动工作表并且我们没有不断地渲染select，那么工作表中就会出现混乱，select 元素会相互重叠。尽管我做了一个丑陋的技巧来支持这个功能，但根据我们在groups.google.com/forum/?fromgroups=#!topic/handsontable/…

的讨论，这个功能似乎必须在核心库中修复

您可以引入一个标志，该标志包含以下信息：render 是否由于select 元素上的事件而被调用，并且仅在这种情况下跳过渲染。

我使用了这个技巧，除了 'change' 事件而不是 'mousedown' 并且在做出下拉选择后提交更改效果很好