来自行值的总和，“2 列”最大手数

编程问答 2022-05-13

问题描述

我有一个需要对 cols 求和的 handsontable，最后 col 对所有 cols 求和 我可以总结所有的 cols，问题是 cols 是动态的，有时 one-col 有一个孩子，在这种情况下，我需要对两者的最大值求和，但我不知道我该怎么做，!when 只是一个只是总结一个。如果有一个子和只是两个列的最大值。

例如：work1 是父级。孩子是 help 1，数组 cols 来自数据库

示例http://jsfiddle.net/duxL728h/

enter image description here

enter image description here

///test.tsx
import { useState } from 'react';
//Parsing error: Cannot read property 'map' of undefinedeslint
let x: [string,number];

function hexRenderer(instance,td,row,col,prop,value,cellProperties) {
  Handsontable.TextCell.renderer.apply(this,arguments);
}

var hot = new Handsontable($("#exampleGrid")[0],{
  data: [
    [0,0],[0,0]
  ],fillHandle: false,minSpareCols: 0,minSpareRows: 0,columns: [{
      data: 'work.name',title: 'Name',readOnly: true,type: 'numeric',width: 100
    },{
      data: 'work.1',perent: "1",title: 'work 1',width: 50
    },{
      data: 'work.2',perent: "1|h",title: 'help 1',{
      data: 'work.3',perent: "3",title: 'work 2',{
      data: 'work.4',perent: "3|h",title: 'help 2',{
      data: 'work.5',perent: "5",title: 'work 3',{
      data: 'work.6',perent: "6",title: 'work 4',{
      data: 'work.7',perent: "6|h",title: 'help 4',{
      data: 'total',title: 'Total',width: 100,type: {
        renderer: function(instance,row) {
          let cols = instance.countCols() - 1;
          let total = 0;

          for (let index = 1; index < cols; index++) {
            total += instance.getDataAtCell(row,index);
          }

          td.innerHTML = total;
        }
      }
    }


  ],afterChange: function(changes,source) {

    console.log("proces to save data")
  }
});

解决方法

我通过更改数据键来修复它，以便轻松识别哪个列是父列，哪个列是子列，如下所示。

function hexRenderer(instance,td,row,col,prop,value,cellProperties) {
  Handsontable.TextCell.renderer.apply(this,arguments);
}

var hot = new Handsontable($("#exampleGrid")[0],{
  data: [
    [0,0],[0,0]
  ],fillHandle: false,minSpareCols: 0,minSpareRows: 0,columns: [{
      data: 'work.name',title: 'Name',readOnly: true,type: 'numeric',width: 100
    },{
      data: 'work.1',perent: "1",title: 'work 1',width: 50
    },{
      data: 'help.1',perent: "1|h",title: 'help 1',{
      data: 'work.2',perent: "3",title: 'work 2',{
      data: 'help.2',perent: "3|h",title: 'help 2',{
      data: 'work.3',perent: "5",title: 'work 3',{
      data: 'work.4',perent: "6",title: 'work 4',{
      data: 'help.4',perent: "6|h",title: 'help 4',{
      data: 'total',title: 'Total',width: 100,type: {
        renderer: function(instance,row) {
          const cols = instance.getCellMetaAtRow(row);
          cols.shift();
          const values = cols.reduce((acc,ele) => {
            const [type,ind] = ele.prop.split('.');
            const value = instance.getDataAtCell(row,ele.col);
            if (value && (!acc[ind] || value > acc[ind])) {
              acc[ind] = value;
            }
            return acc;
          },{});


          td.innerHTML = Object.values(values).reduce((acc,e1) => acc + e1,0);
        }
      }
    }


  ],afterChange: function(changes,source) {

    // console.log("proces to save data")
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://handsontable.com/demo/css/samples.css">
<script type="text/javascript" src="http://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" type="text/css" href="http://handsontable.com/dist/handsontable.full.css">

<div id="exampleGrid" class="dataTable"></div>

javascriptrhandsontablesumsum