Question

嗨，我正在尝试在制表符中求和列值时添加某种数字格式（页脚中求和函数的格式编号）。

这是我到目前为止的尝试。

const translation: { [key: string]: string } = {
    'The ticket field is required.': 'Musisz podać numer swojego biletu.',
    'The selected ticket is invalid.': 'Wybrany bilet jest nieprawidłowy.'
};

$(document).ready(function() {

  function formatNumber(num) {
    var str = num.toString().split('.');
    if (str[0].length >= 5) {
      str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
    }
    if (str[1] && str[1].length >= 4) {
      str[1] = str[1].replace(/(\d{3})/g, '$1 ');
    }
    return str.join('.');
  }

  function getSum(total, num) {
    return total + num;
  }

  var adultCalc = function(values, data, calcParams) {
    var totalcount = 0;
    var count = 0;

    data.forEach(function(data) {
      count = data.price * data.qty;
      totalcount += count;
    });

    return formatNumber(totalcount);
  }


  var tabledata = [{
      id: 1,
      name: "Item A",
      price: "1000",
      qty: "2000"
    },
    {
      id: 3,
      name: "Item B",
      price: "8500",
      qty: "1500"
    },
    {
      id: 4,
      name: "Item C",
      price: "9100",
      qty: "2500"
    },
    {
      id: 5,
      name: "Item D",
      price: "950",
      qty: "1100"
    },
    {
      id: 5,
      name: "Item E",
      price: "2000",
      qty: "750"
    },
    {
      id: 4,
      name: "Item F",
      price: "2500",
      qty: "1000"
    }
  ];

  var table = new Tabulator("#example-table", {
    height: 205,
    data: tabledata,
    layout: "fitColumns",
    columns: [{
        title: "Name",
        field: "name",
        width: 150
      },
      {
        title: "Price",
        field: "price",
        bottomCalc: adultCalc
      },
      {
        title: "Qty",
        field: "qty",
        bottomCalc: "sum"
      }
    ]
  });

});

问题是，如何像我的价格列那样调用用于分离总价值的函数？

我的<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>列是制表符中的Custom Calculation Function，因此我可以调用price函数。

但是formatNumber列是内置函数。

是否可以通过制表符在内置函数中调用qty函数？

或者有解决这个问题的主意吗？

您也可以签入jsfiddle

实际上发生的是：formatNumber总计8850

预期结果：8,850个，总计qty，用逗号隔开。

Answer 1

花点时间找到一个好的解决方案，而您的formatNumber对我没有帮助；）

  {
    title: "Qty",
    field: "qty",
    formatter:"money", formatterParams:{ thousand:",", precision:false },
    bottomCalc: function(values, data, calcParams) { if (values && values.length) {
       var total = values.reduce((sum, x) => +sum + +x);
       return (""+total).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    }}, //"sum",
  }

我还在所有价格和数量中添加了逗号

$(document).ready(function() {

  function formatNumber(num) {
    return ("" + num).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
  }

  function getSum(total, num) {
    return total + num;
  }

  var adultCalc = function(values, data, calcParams) {
    var totalcount = 0;
    var count = 0;
    var i = 0;
    data.forEach(function(data) {
      count = data.price * data.qty;
      totalcount += count;
      i++
    });
    return formatNumber(totalcount);
  }


  var tabledata = [{
      id: 1,
      name: "Item A",
      price: "1000",
      qty: "2000"
    },
    {
      id: 3,
      name: "Item B",
      price: "8500",
      qty: "1500"
    },
    {
      id: 4,
      name: "Item C",
      price: "9100",
      qty: "2500"
    },
    {
      id: 5,
      name: "Item D",
      price: "950",
      qty: "1100"
    },
    {
      id: 5,
      name: "Item E",
      price: "2000",
      qty: "750"
    },
    {
      id: 4,
      name: "Item F",
      price: "2500",
      qty: "1000"
    }
  ];

  var table = new Tabulator("#example-table", {
    height: 205,
    data: tabledata,
    layout: "fitColumns",
    columns: [{
        title: "Name",
        field: "name",
        width: 150
      },

      {
        title: "Price",
        field: "price",
        formatter: "money",
        formatterParams: {
          decimal: ".",
          thousand: ",",
          symbol: "$",
          symbolAfter: "p",
          precision: false,
        },
        bottomCalc: adultCalc
      },

      {
        title: "Qty",
        field: "qty",
        formatter: "money",
        formatterParams: {
          thousand: ",",
          precision: false
        },
        bottomCalc: function(values, data, calcParams) {
          if (values && values.length) {
            var total = values.reduce((sum, x) => +sum + +x);
            return formatNumber(total)
          }
        }, //"sum",
      }
    ]
  });

});

<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

您遇到的问题是，因为您将数字值存储为字符串形式的数据，如果将它们用引号引起来，则数学将正常运行：

{
    id: 5,
    name: "Item E",
    price: "2000",
    qty: "750"
},

应该是

{
    id: 5,
    name: "Item E",
    price: 2000,
    qty: 750
},

使用“计算功能”制表符时的格式编号

2 个答案: