未添加 columnSummary

Question

我正在尝试使用 Handsontable 将 columnSummary 添加到我的 table。但似乎该功能并未触发。 stretchH 值已设置并正确设置。但它对 columnSummary 选项没有反应：

this.$refs.hot.hotInstance.updateSettings({stretchH: 'all',columnSummary: [
        {
           destinationRow: 0,
           destinationColumn: 2,
           reversedRowCoords: true,
           type: 'custom',
           customFunction: function(endpoint) {
            console.log("TEST");
           }
       }]
 }, false);

我也试过 type:'sum' 但没有成功。

感谢大家的帮助和指导！

Answer 1

columnSummary不能用updateSettings改变：GH #3597

您可以在 Handsontable 初始化时进行 columnSummary 设置。

Answer 2

一种解决方法是以某种方式管理您自己的专栏摘要，因为 Handsontable 可能会让您头疼。所以你可以尝试 add one additional row to put your arithmetic 进去，但是它很乱（它需要固定的行数并且不能用于过滤和排序操作。不过，它在某些情况下可以很好地工作。

但以我的愚见，摘要列必须功能齐全。然后我们需要从 table 数据中设置我们的摘要行。我想到的是将上面提到的附加行从 table 数据 "area" 中取出，但这会迫使我们从 table 中提取 row 看起来总是在 table.

中

所以我认为与其换行，不如在 header 列中添加我们的列摘要：

这里是working JSFiddle example.

Handsontable table 呈现后，我们需要遍历列并在 table 单元格 HTML 内容中设置我们的列摘要：

for(var i=0;i<tableConfig.columns.length;i++) {
    var columnHeader = document.querySelectorAll('.ht_clone_top th')[i];
    if(columnHeader) { // Just to be sure column header exists
        var summaryColumnHeader = document.createElement('div');
        summaryColumnHeader.className = 'custom-column-summary';
        columnHeader.appendChild( summaryColumnHeader );
    }
}

现在我们的占位符已经设置好了，我们必须用一些算术结果来更新它们：

var printedData = hotInstance.getData();
for(var i=0;i<tableConfig.columns.length;i++) {
    var summaryColumnHeader = document.querySelectorAll('.ht_clone_top th')[i].querySelector('.custom-column-summary'); // Get back our column summary for each column
    if(summaryColumnHeader) {
        var res = 0;
        printedData.forEach(function(row) { res += row[i] }); // Count all data that are stored under that column
        summaryColumnHeader.innerText = '= '+ res;
    }
}

这段代码函数可以在任何时候调用它应该是：

var hotInstance = new Handsontable(/* ... */);
setMySummaryHeaderCalc(); // When Handsontable table is printed
Handsontable.hooks.add('afterFilter', function(conditionsStack) { // When Handsontable table is filtered
    setMySummaryHeaderCalc();
}, hotInstance);

随时发表评论，我可以改进我的答案。

未添加 columnSummary

columnSummary is not added

handsontable

vue.js