使用计算函数制表符时格式化数字

Question

您好，我正在尝试在制表符中对列值求和时添加一些数字格式（页脚中求和函数的格式数字）。

这就是我目前所做的尝试。

$(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, ',');
    }
    if (str[1] && str[1].length >= 4) {
      str[1] = str[1].replace(/(\d{3})/g, ' ');
    }
    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>

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

我的 price 列来自制表符 Custom Calculation Function，因此我可以调用 formatNumber 函数。

但是 qty 列是内置函数。

是否可以从制表符调用内置函数中的formatNumber函数？

或者有解决这个问题的想法吗？

你也可以签到jsfiddle

Actually Happen is: qty total 8850

Expected result : 8,850 like my price total, seperate by comma.

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, ",");
    }}, //"sum",
  }

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

像这样

$(document).ready(function() {

  function formatNumber(num) {
    return ("" + num).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, ",");
  }

  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
},

使用计算函数制表符时格式化数字

Format number when using Calculation Functions tabulator

javascript

jquery

numbers

number-formatting

tabulator