没有添加columnSummary

Question

我正在尝试使用Handsontable将columnSummary添加到我的表中。但似乎该功能不会触发。 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，但很麻烦（它需要固定的行号，并且不能用于过滤和排序操作。尽管如此，它在某些情况下仍可以很好地工作。

不过，根据我的拙见，摘要列必须完全起作用。然后，我们需要从表数据中设置汇总行。我想到的是将上面提到的其他行从表数据“区域”中删除，但这将迫使我们使表表行中的始终看起来仍然在桌子。

因此，我认为不用换行，我们只需在列标题中添加列摘要即可：

这里是working JSFiddle example。

呈现Handsontable表后，我们需要遍历各列，并在表单元格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);

请随时发表评论，我可以改善答案。

Answer 3

无法按照您希望的方式将columnSummary添加到Handsontable。我尝试了很长时间，但是却无法做到。

您在此处发现的同一问题，其中包含更多或其他详细信息： https://github.com/handsontable/handsontable/issues/5794

如果您还有其他错误，请访问GitHub网站并打开问题。这是解决它的最佳方法。

这是一个使用columnSummary的JSFiddle： http://jsfiddle.net/AMBudnik/g2f8h6dt/

希望您能找到解决方法。如果您还有其他疑问，请告诉我！ ：）