Checkbox和Handsontable

Question

我有一个位于我的Handsontable之外的复选框。我的Handsontable是通过ajax填充的。我想根据checkbox的值隐藏和显示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