Handsontable：如何对行求和？

Posted 2023-03-22

【中文标题】Handsontable：如何对行求和？

【英文标题】：Handsontable: How to sum rows?

【发布时间】：2020-04-08 03:37:49

【问题描述】：

我从数据库中动态获取列，所以我不知道我将拥有多少列，但行数是固定的。

这是一个例子

  var data = [
      ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
      ['number of cars', -5, 5, 12, 13],
      ['price of a car', 10, -11, 14, 13],
    ['tax', 2, 15, -12, 30],
      ['Total price of all cars', 10, -11, 14, 13],
      ['price before tax', 2, 15, -12, 30],
      ['price after tax', 2, 15, -12, 30]
    ],
    container,
    hot1;
  
  function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) 
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.fontWeight = 'bold';
    td.style.color = 'green';
    td.style.background = '#CEC';
  
  
  function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) 
    Handsontable.renderers.TextRenderer.apply(this, arguments);
  
    // if row contains negative number
    if (parseInt(value, 10) < 0) 
      // add class "negative"
      td.className = 'make-me-red';
    
  
    if (!value || value === '') 
      td.style.background = '#EEE';
    
    else 
      if (value === 'Nissan') 
        td.style.fontStyle = 'italic';
      
      td.style.background = '';
    
  
  // maps function to lookup string
  Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);
  
  container = document.getElementById('example1');
  hot1 = new Handsontable(container, 
    data: data,
    licenseKey: 'non-commercial-and-evaluation',
    afterSelection: function (row, col, row2, col2) 
      var meta = this.getCellMeta(row2, col2);
  
      if (meta.readOnly) 
        this.updateSettings(fillHandle: false);
      
      else 
        this.updateSettings(fillHandle: true);
      
    ,
    cells: function (row, col) 
      var cellProperties = ;
      var data = this.instance.getData();
  
      if (row === 0 || data[row] && data[row][col] === 'readOnly') 
        cellProperties.readOnly = true; // make cell read-only if it is first row or the text reads 'readOnly'
      
      if (row === 0) 
        cellProperties.renderer = firstRowRenderer; // uses function directly
      
      else 
        cellProperties.renderer = "negativeValueRenderer"; // uses lookup map
      
  
      return cellProperties;
    
  );

.make-me-red 
  color: #f00;

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@7.3.0/dist/handsontable.full.min.css">

<script src="https://cdn.jsdelivr.net/npm/handsontable@7.3.0/dist/handsontable.full.min.js"></script>
<div id="example1" class="hot1 hot handsontable"></div>

我从数据库中得到汽车的数量。你定义：

汽车的价格 每辆车的税费

所有汽车的总价格应该是汽车总数*每辆车的价格

税后价格应该是汽车价格+税。

我现在能做的就是 setDataAtCell like this ，我想要 setDataAtRow 之类的东西，我不想将单元格指定为参数。

【问题讨论】：

我不明白你的问题。你能详细说明一下吗？你想对每一行（总列）的单元格求和吗？使用 setDataAtCell 有什么问题？而且你的jsfiddle链接似乎已经死了。 :)

【参考方案1】：

可以使用 Hansontable Column Summary，不需要使用 setDataAtCell/setDataAtRow 方法。

https://handsontable.com/docs/7.3.0/demo-summary-calculations.html

columnSummary: function() 
    // hotInstance(get total rows and total columns)
    let sumRow =  this.hot.countRows() - 1;
    let colSummaryArr = [];
    if(this.hot.countCols() > 0) 
        // sum would be for column 3 onwards
        for(let i = 3; i < this.hot.countCols(); i++) 
            colSummaryArr.push(
                destinationRow: sumRow - 1,
                destinationColumn: i,
                type: 'sum',
                ranges: [
                [0, this.hot.countRows() - 3]
                ],
            )
            // custom eg which calculates difference of sum row with certain value 
            colSummaryArr.push(
                type: 'custom',
                destinationRow: sumRow,
                destinationColumn: i,
                customFunction: function(endpoint) 
                    var hotInstance = this.hot;
                    function checkRange() 
                        let sum  = 0;
                        for(let i = 0; i < hotInstance.countRows()-2; i++) 
                            sum += hotInstance.getDataAtCell(i, endpoint.destinationColumn);
                        
                        return sum;
                    
                    return 8 - checkRange();
                
            )
                                               
        return colSummaryArr;
    
    else 
        return [];
    
,