复选框和 Handsontable

Question

我的 Handsontable 之外有一个复选框。我的 Handsontable 是通过 ajax 填充的。我想根据复选框的值隐藏和显示 Handsontable 列。这就是我的代码的样子

  Handsontable.dom.addEvent(mycheckbox, 'change', function () {
            var hot = $container.data('handsontable');
            if (mycheckbox.checked) {
                hot.updateSettings({
                    hiddenColumns: {
                        columns: [0],
                        indicators: true
                    }
                })
            }
            else {
                hot.updateSettings({
                    hiddenColumns: {
                        columns: [0,1,2],
                        indicators: true
                    }
                })
            }
        });

此代码仅在您选中或取消选中复选框时执行，并且工作正常，但我也想在页面加载事件或 Handsontable 加载时使用此代码。

Answer 1

尝试使用 Handsontable 事件挂钩。 afterLoadData 钩子将在新数据加载到数据源数组后运行回调。如果这不是你要找的地方，你可以用适当的钩子事件替换钩子事件，正如我之前提到的init。

所以你可以将该函数设为afterLoadData 钩子的回调

var example = document.getElementById('example');
var checkbox = document.getElementById('checkbox');

// use event hook and add custom callback
// this will hide column 2 if checkbox is initially checked on 
// page load
Handsontable.hooks.add("afterLoadData", function() {

  if (checkbox.checked) {
      this.updateSettings({
        hiddenColumns: {
          columns: [2],
          indicators: true
        }
      })
    } else {
      this.updateSettings({
        hiddenColumns: {
          columns: [1],
          indicators: true
        }
      })
    }

});

这是jsbin 的实际操作