javascript - 使用计算函数制表器时的格式数字

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, '$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>

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

我的price专栏是来自制表器的自定义计算函数，所以我可以调用formatNumber函数。

但是该qty列是内置的功能。

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

或者有什么想法可以解决这个问题？

您也可以签入jsfiddle

实际发生的是：qty总计 8850

预期结果：8,850 和我的price总数一样，用逗号分隔。

标签： javascriptjquerynumbersnumber-formattingtabulator

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>