【问题标题】:event that fires when handsontable loads可手动加载时触发的事件
【发布时间】:2012-12-07 00:52:48
【问题描述】:

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

handsontable 是否有一些在它完成自身构建后触发的事件?

【问题讨论】:

    标签: jquery events handsontable event-triggers


    【解决方案1】:

    不再需要更改代码,因为有内置事件:

    afterInit () - Handsontable 实例启动后触发的回调。

    afterLoadData () - 将新数据(通过 loadData 方法)加载到数据源数组后触发回调。

    afterRender () - 渲染 Handsontable 表后触发回调。

    查看完整活动列表see here

    【讨论】:

    • 我正在使用 ngHandsontable,这似乎触发了 40 次而不是一次?
    【解决方案2】:

    我在他们的github 上找不到任何此类回调,而且我认为您真的不需要。只需在调用 $("#container").handsontable() 后更改 DOM。如果是因为您使用 ajax 加载它,只需在完成时调用它。只需按照他们的示例 here
    if (source === 'loadData') {...}

    如果您能应对挑战,并且根据您下载的版本,我们可以深入研究源代码并自己进行一些调整,因为它相当简单。我假设您在handsontable 完成初始化而没有任何ajax 加载后请求回调。

    跟我来,让我们潜入水中。


    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!");
        }
    });
    

    不要害怕弄乱源代码,你会学到很多东西!


    完成修改后的代码

    这是从21652203 行的完整更改代码,其中包含$.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;
      }
    };
    

    【讨论】:

    • 谢谢!事实上,我需要开始更频繁地使用这些插件进入源代码。感谢您提供代码示例。我最终只是在 $("#container").handsontable(...) 调用之后添加了我的代码。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-12-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多