Добавление bottomCalcFormatter останавливает генерацию табулятора - PullRequest
Новая
       15

Добавление bottomCalcFormatter останавливает генерацию табулятора

0 голосов
/ 12 апреля 2019

Tabulator не принимает bottomCalcFormatter в определении столбца

Моя таблица Tabulator работает довольно хорошо, и я могу успешно добавить bottomCalc и форматтер, но я не могу добавить bottomCalcFormatter. поэтому у меня есть столбец денег с форматером: «деньги» и bottomCalc: «сумма», но сумма не отформатирована как деньги. Если я попытаюсь добавить bottomCalcFormatter: «деньги» таблица не будет отображать.

Отображается, хотя сумма указана не в формате "деньги": 

    columns:[
        {title:0, titleFormatter:closeButton},
        {title:"Revision#", field:"revNum", sorter:"number", align:"center", formatter:revisionDoc, formatterParams:{urlField:"hyperlink"}},
        {formatter:pdfIcon, align:"center", formatterParams:{urlField:"hyperlink"}},
        {title:"TO Amount", field:"toAmount", sorter:"number", formatter:"money", align:"right", bottomCalc:"sum"},
        {title:"Adjusted", field:"adjusted", align:"right", formatter:"money", bottomCalc:"sum"},
                ],

Эта таблица вообще не отображается: 

    columns:[
        {title:0, titleFormatter:closeButton},
        {title:"Revision#", field:"revNum", sorter:"number", align:"center", formatter:revisionDoc, formatterParams:{urlField:"hyperlink"}},
        {formatter:pdfIcon, align:"center", formatterParams:{urlField:"hyperlink"}},
        {title:"TO Amount", field:"toAmount", sorter:"number", formatter:"money", align:"right", bottomCalc:"sum"},
        {title:"Adjusted", field:"adjusted", align:"right", formatter:"money", bottomCalc:"sum", bottomCalcFormatter:"money"},
                ],

1 Ответ

0 голосов
/ 13 апреля 2019

Я только что проверил Tabulator.js есть дополнительный параметр

bottomCalcFormatterParams

Проверьте этот код, он суммирует валюту, и расчет показывает знак $ 

<!DOCTYPE html>
<html lang="en">
<head><link href="https://unpkg.com/tabulator-tables@4.2.4/dist/css/tabulator.min.css" rel="stylesheet"></head>
<body>
<div id="example-table"></div>
<script
  src="https://code.jquery.com/jquery-3.4.0.min.js"
  integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.4/dist/js/tabulator.min.js"></script>

<script>
  const tabledata = [
    {id: 1, name: "Oli Bob", money: "12", col: "red", dob: ""},
    {id: 2, name: "Mary May", money: "1", col: "blue", dob: "14/05/1982"},
    {id: 3, name: "Christine Lobowski", money: "42", col: "green", dob: "22/05/1982"},
    {id: 4, name: "Brendon Philips", money: "125", col: "orange", dob: "01/08/1980"},
    {id: 5, name: "Margret Marmajuke", money: "16", col: "yellow", dob: "31/01/1999"},
  ];

  const table = new Tabulator("#example-table", {
    height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
    data: tabledata, //assign data to table
    layout: "fitColumns", //fit columns to width of table (optional)
    columns: [ //Define Table Columns
      {title: "Name", field: "name", width: 150},
      {
        title: "money",
        field: "money",
        align: "left",
        formatter: "money",
        bottomCalc: "sum",
        bottomCalcParams: {
          precision: 3
        },
        bottomCalcFormatter: "money",
        bottomCalcFormatterParams:  {
          decimal: ".",
          thousand: ",",
          symbol: "$"
        },
        formatterParams: {
          decimal: ".",
          thousand: ",",
          symbol: "$"
        }


      },
      {title: "Favourite Color", field: "col"},
      {title: "Date Of Birth", field: "dob", sorter: "date", align: "center"},
    ]
  });


</script>
</body>
</html>
...