加载 Handsontable 时触发的事件

Question

我想在 handsontable 加载/初始化完成后进行一些 DOM 操作。

handsontable 是否有一些事件可以在构建完成后触发？

- RayLoveless

Answer 1

现在不再需要改变代码，因为已经内置了以下事件：

afterInit () - Handsontable 实例初始化后的回调函数。

afterLoadData () - 当新数据（通过 loadData 方法）加载到数据源数组中后触发的回调函数。

afterRender () - Handsontable 表格渲染后触发的回调函数。

完整的事件列表请参见这里

- PostureOfLearning

---

我正在使用ngHandsontable，但它似乎会触发40次而不是一次？ - rex

Answer 2

我在他们的GitHub上找不到这样的回调函数，我认为你并不真正需要它。只需在调用$("#container").handsontable()之后进行DOM更改即可。如果因为使用ajax加载而无法实现，只需在完成时调用即可。请参考他们的此处的示例。_{if (source === 'loadData') {...}}

然而，如果你想挑战一下，并且取决于你下载的版本，我们可以深入源代码并自己进行一些调整，因为它非常简单。我假设你是在没有任何ajax加载的情况下要求handsontable初始化完成后的回调。

跟着我，让我们开始吧。

---

jquery.handsontable.full.js中的更改

好的，在设置之后，第2165行就是它：

$.fn.handsontable = function (action) {...};

在这里，我们知道一切都已经初始化，而且开发人员足够友好地进行了适当的注释和标记，所以让我们看看其中的代码行。

第 2182 行写道：

instance = new Handsontable.Core($this, currentSettings);

这里是它们初始化核心部分的地方，至少从名称上可以看出，因此在此行代码之后添加回调函数应该足够作为一个afterInit回调。

所以，我们需要做的就是在用户提供的设置中添加一个回调函数检查，然后调用它。我决定在第2184行实例化之后添加此回调。
_{你可以争论我放置回调函数的位置，以及是否应该将其放在Core函数内部以及如何检查设置是否是一个函数等，但这样做可以完成工作，并且更容易。}

因此，在第2182行：

[...] 
instance = new Handsontable.Core($this, currentSettings); //<---- line 2182
$this.data("handsontable", instance);
instance.init(); //<---- line 2184

if(typeof(currentSettings.afterInit) == "function"){
    currentSettings.afterInit();
}
[...]

这样就可以了！现在我们可以创建一个带有 afterInit 回调函数的handsontable。

$("#container").handsontable({
    startRows: 8,
    startCols: 6,
    rowHeaders: true,
    colHeaders: true,
    minSpareRows: 1,
    contextMenu: true,
    afterInit: function(){
        console.log("Handsontable initialized!");
    }
});

不要害怕尝试修改源代码，这样你会学到很多！

---

完整修改后的代码

以下是从第 2165 行到第 2203 行包含 $.fn.handsontable 函数的完整修改后的代码：

$.fn.handsontable = function (action) {
  var i, ilen, args, output = [], userSettings;
  if (typeof action !== 'string') { //init
    userSettings = action || {};
    return this.each(function () {
      var $this = $(this);
      if ($this.data("handsontable")) {
        instance = $this.data("handsontable");
        instance.updateSettings(userSettings);
      }
      else {
        var currentSettings = $.extend(true, {}, settings), instance;
        for (i in userSettings) {
          if (userSettings.hasOwnProperty(i)) {
            currentSettings[i] = userSettings[i];
          }
        }
        instance = new Handsontable.Core($this, currentSettings);
        $this.data("handsontable", instance);
        instance.init();
        if(typeof(currentSettings.afterInit) == "function"){
            currentSettings.afterInit();
        }
      }
    });
  }
  else {
    args = [];
    if (arguments.length > 1) {
      for (i = 1, ilen = arguments.length; i < ilen; i++) {
        args.push(arguments[i]);
      }
    }
    this.each(function () {
      output = $(this).data("handsontable")[action].apply(this, args);
    });
    return output;
  }
};

- ShadowScripter

---

谢谢！确实，我需要更经常地深入插件的源代码。感谢您提供的代码示例。最终，我只是在我的$（“#container”）。handsontable（...）调用后添加了我的代码。 - RayLoveless