Форматировать число при использовании табулятора функций расчета - PullRequest
Новая
       41

Форматировать число при использовании табулятора функций расчета

0 голосов
/ 28 января 2019

Привет, я пытаюсь добавить какой-нибудь числовой формат, когда значение столбца суммы в табуляторе (номер формата для функции суммы в нижнем колонтитуле).

И это то, что я пробую до сих пор. 

$(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 всего, через запятую.

Ответы [ 2 ]

0 голосов
/ 29 января 2019

Проблема, с которой вы столкнулись, заключается в том, что вы сохраняете числовые значения в своих данных в виде строк, и если вы берете их из кавычек, математика будет работать правильно: 

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

должно быть 

{
    id: 5,
    name: "Item E",
    price: 2000,
    qty: 750
},
0 голосов
/ 28 января 2019

Потребовалось время, чтобы найти хорошее решение, и ваш 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",
  }

Я также добавил запятые ко всем ценам и qtys

Как это 

$(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>
...