Question

我正在考虑在我的项目中使用Handsontable（https://github.com/handsontable/handsontable）。

我需要在页面上有多个表组件，

并且有两个自己的undo / redo按钮，它们按照用户更改的顺序处理所有组件的撤消/重做操作。

我的意思是，就像用户在表A中然后在表B中进行更改然后再在表A中进行更改。然后，如果他点击撤消，则更改A，在下一次点击B更改之后并且在下一次点击A更改之后。

这样做有可能吗？

Answer 1

因此，我们可以关闭此问题，并希望就如何执行此操作获得建议的人员，以下是如何实现此功能的简短概念：

假设：

我们有Handsontable的实例，其中包含undo和redo方法，根据Handsontable文档定义如下。
我们有两个按钮id s #undo和#redo来触发行为。

方法：

撤消（）：撤消上次修改

重做（）：重做编辑（用于撤消撤消）

逻辑

技术很简单。我们将使用两个全局数组，抽象Queue，定义为undoQ和redoQ，它们将跟踪要修改的最后一个HOT实例的引用。每次在任何HOT实例上触发Queue事件，按下afterChange按钮以及按下redo按钮时，都会修改这些undo。为了避免过度复杂化这种方法，我们不会对空间进行优化，但我会记下它，这样如果你需要它，你可以尝试自己做。

免责声明：您没有提及当一个或另一个表处于焦点时会发生什么。 HOT的工作方式是ctrl-z，如果启用，将undo无论哪个表格都在焦点上。如果您愿意，可以禁用此功能。

详细实施

第1步：添加事件逻辑

如下所示添加afterChange事件挂钩，或者如果您已经有自定义事件，则附加逻辑;这是在HOT实例的options的声明中。

afterChange: function() {
    return function(changes, source) {
        var hotInstance = this;
        // check that the `undo` event was initialized before pushing
        if (hotInstance.undo) {
            undoQ.push(this);
            redoQ = []; // IMPORTANT: this clears the redo array as do most undo operations, but you can add different logic if you'd like
        }
        // other logic if you have some
    }
}

这将在发生更改时将REFERENCE推送到每个表。请注意，这个数组可能会变大，但不是很明显。原因是afterChange事件每change只触发一次。但是，这里可以进行优化。相反，如果您发现触发此事件的次数非常多，则检查队列中的最后一个元素是否与this相同，如果是，则增加计数器而不是仅仅附上参考文献。然后在undo或redo上减少计数器，直到它们达到零，然后弹出。

第2步：添加撤消和重做逻辑

这一步更加直观。您要做的是将以下逻辑添加到undo和redo按钮点击的回调中。

$("#undo").on("click", function() {
    if (undoQ.length > 0) {
        var hotInstance = undoQ.shift();
        hotInstance.undo();
        redoQ.push(hotInstance);
    }
})

$("#redo").on("click", function() {
    if (redoQ.length > 0) {
        var hotInstance = redoQ.shift();
        hotInstance.redo();
        undoQ.push(hotInstance);
    }
})

我们在这里做的是手动触发上次更改的表的相应事件。请记住，更改后，redoQ将被清空，但只要没有，您应该能够撤消并重做而没有任何问题。

那应该是它。祝你好运！

Handsonetable - 撤消/重做多个组件实例

1 个答案:

逻辑

详细实施