Question

我正在尝试对制表符中具有特定条件的列值求和，并遵循此Custom Calculation Function

到目前为止我尝试过的事情：

$(document).ready(function() {
  function getSum(total, num) {
    return total + num;
  }

  var adultCalc = function(values, data, calcParams) {
    var tempvalue = [];
    
    data.forEach(function(data) {
      var count = data.age * data.qty;
      tempvalue.push(count);
    });

    console.log('array', tempvalue);
    console.log('total', tempvalue.reduce(getSum));
    
    /*return tempvalue;*/
  }


  var tabledata = [{
      id: 1,
      name: "Oli Bob",
      age: "12",
      qty: "1",
      dob: ""
    },
    {
      id: 3,
      name: "Christine Lobowski",
      age: "42",
      qty: "1",
      dob: "22/05/1982"
    },
    {
      id: 4,
      name: "Brendon Philips",
      age: "35",
      qty: "2",
      dob: "01/08/1980"
    },
    {
      id: 5,
      name: "Margret Marmajuke",
      age: "16",
      qty: "0",
      dob: "31/01/1999"
    },
    {
      id: 5,
      name: "Marmajuke",
      age: "17",
      qty: "0",
      dob: "31/01/1999"
    },
    {
      id: 4,
      name: "Philips",
      age: "27",
      qty: "0",
      dob: "01/08/1980"
    }
  ];

  var table = new Tabulator("#example-table", {
    height: 205,
    data: tabledata,
    layout: "fitColumns",
    columns: [{
        title: "Name",
        field: "name",
        width: 150
      },
      {
        title: "Age",
        field: "age",
        bottomCalc: adultCalc
      },
      {
        title: "Qty",
        field: "qty"
      },
      {
        title: "Date Of Birth",
        field: "dob",
        sorter: "date",
        align: "center"
      }
    ]
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.1.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.1.4/dist/js/tabulator.min.js"></script>

<div id="example-table"></div>

我的公式是：age * qty将其推入数组并求和。

我成功获得了想要的值并将其推入数组，但是问题是我无法用array reduce function将数组求和。

我收到此错误

TypeError：减少没有初始值的空数组

我的问题仅仅是获取数组的总和。

有人可以告诉我我的代码有什么问题吗？

谢谢。

Answer 1

它甚至可以更轻松地完成。并且不要忘记Array.reduce方法的第二个参数（初始值）。

$(document).ready(function() {
  function getSum(total, num) {
    return total + num;
  }

  var adultCalc = function(values, data, calcParams) {
    return data.map(function(d) {
        return d.age * d.qty;
      })
      .reduce(getSum, 0);
  }
  //or even in ES6 style
  const qtyCalc = (values, data, calcParams) => 
     data.map(d => d.age * d.qty)
      .reduce((t, n) => t + n * 2, 0);
  

  var tabledata = [{
      id: 1,
      name: "Oli Bob",
      age: "12",
      qty: "1",
      dob: ""
    },
    {
      id: 3,
      name: "Christine Lobowski",
      age: "42",
      qty: "1",
      dob: "22/05/1982"
    },
    {
      id: 4,
      name: "Brendon Philips",
      age: "35",
      qty: "2",
      dob: "01/08/1980"
    },
    {
      id: 5,
      name: "Margret Marmajuke",
      age: "16",
      qty: "0",
      dob: "31/01/1999"
    },
    {
      id: 5,
      name: "Marmajuke",
      age: "17",
      qty: "0",
      dob: "31/01/1999"
    },
    {
      id: 4,
      name: "Philips",
      age: "27",
      qty: "0",
      dob: "01/08/1980"
    }
  ];

  var table = new Tabulator("#example-table", {
    height: 205,
    data: tabledata,
    layout: "fitColumns",
    columns: [{
        title: "Name",
        field: "name",
        width: 150
      },
      {
        title: "Age",
        field: "age",
        bottomCalc: adultCalc
      },
      {
        title: "Qty",
        field: "qty",
        bottomCalc: qtyCalc
      },
      {
        title: "Date Of Birth",
        field: "dob",
        sorter: "date",
        align: "center"
      }
    ]
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.1.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.1.4/dist/js/tabulator.min.js"></script>

<div id="example-table"></div>

Answer 2

您需要提供初始值以减少

console.log('total', tempvalue.reduce(getSum,0));

第一次使用reduce时，您有一个空数组，这导致reduce产生错误。您可以传递初始值，它应该会按预期工作。

注意：如果未提供initialValue，则reduce（）将执行从索引1开始的回调函数，跳过第一个索引。如果提供了initialValue，它将从索引0开始。

$(document).ready(function() {
  function getSum(total, num) {
    return total + num;
  }

  var adultCalc = function(values, data, calcParams) {
    var tempvalue = [];
    
    data.forEach(function(data) {
      var count = data.age * data.qty;
      tempvalue.push(count);
    });

    console.log('array', tempvalue);
    console.log('total', tempvalue.reduce(getSum,0));
    
    /*return tempvalue;*/
  }


  var tabledata = [{
      id: 1,
      name: "Oli Bob",
      age: "12",
      qty: "1",
      dob: ""
    },
    {
      id: 3,
      name: "Christine Lobowski",
      age: "42",
      qty: "1",
      dob: "22/05/1982"
    },
    {
      id: 4,
      name: "Brendon Philips",
      age: "35",
      qty: "2",
      dob: "01/08/1980"
    },
    {
      id: 5,
      name: "Margret Marmajuke",
      age: "16",
      qty: "0",
      dob: "31/01/1999"
    },
    {
      id: 5,
      name: "Marmajuke",
      age: "17",
      qty: "0",
      dob: "31/01/1999"
    },
    {
      id: 4,
      name: "Philips",
      age: "27",
      qty: "0",
      dob: "01/08/1980"
    }
  ];

  var table = new Tabulator("#example-table", {
    height: 205,
    data: tabledata,
    layout: "fitColumns",
    columns: [{
        title: "Name",
        field: "name",
        width: 150
      },
      {
        title: "Age",
        field: "age",
        bottomCalc: adultCalc
      },
      {
        title: "Qty",
        field: "qty"
      },
      {
        title: "Date Of Birth",
        field: "dob",
        sorter: "date",
        align: "center"
      }
    ]
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.1.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.1.4/dist/js/tabulator.min.js"></script>

<div id="example-table"></div>

根据条件求和的列制表符

2 个答案: