Question

对于行单元格和内置计算列单元格，我想动态格式化货币单元格的样式。

例如，将货币符号，十进制符号，千位分隔符更改为单元格。

下面的代码将货币类型的行单元格格式化以显示部分成本，包括货币符号，千位和小数符号以及精度。底部计算单元也同样如此。

{
  "title": "Partial",
  "field": "Partial",
  "width": 150,
  "align": "right",
  "formatter": "money",
  "formatterParams": {
    "decimal": ",",
    "thousand": ".",
    "symbol": "USD ",
    "symbolAfter": false,
    "precision": 2
  },
  "bottomCalc": "sum",
  "bottomCalcFormatter": "money",
  "bottomCalcFormatterParams": {
    "decimal": ",",
    "thousand": ".",
    "symbol": "USD ",
    "symbolAfter": false,
    "precision": 2
  }
}

这段代码工作正常，但是我没有文档来精确更改货币符号，十进制和千位分隔符以及精度参数。

我想通过让用户更改表格中自己的参数来动态更改这些参数。

Answer 1

如果要使用动态货币，则应在制表器中进行设置每次我建议的构造函数

但是如果您仍然想在运行时进行更改，则可以使用Javascript来执行，请参见下面的代码

    <!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>
    <button id='changeCurrency'>
Change $ to £
</button>

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



  $("#changeCurrency").click(function() {

    const field = 'money';

    $('[tabulator-field=' + field + ']').each(function() {
      const oldCurrency = $(this).text();
      if (oldCurrency !== field) {
        $(this).text(oldCurrency.replace('$', '£'));
      }


    });

  });
</script>


  </body>

</html>

Answer 2

通过扩展formatters模块而不是使用"money"来创建自己的calc格式化程序类型。设置动态Tabulator.prototype.moduleBindings.format.prototype.formatters.money后，您就可以使用bottomCalcFormatterParams调用原始的货币格式化程序实现。

Answer 3

花了一些时间在GitHub和Tabulator文档上学习之后，当用户在SELECT输入中更改货币值时，我可以找到这种非常快的方式来实现此行为。

//get Currency Symbol from SELECT input
CurSymbol = $('#fldMoney').children('option:selected').val()+' ';
var i=0;
var colDefs = tabulatortable.getColumnDefinitions();

while(i < colDefs.length) {
    //compare which columns to change the currency symbol
    if (colDefs[i].title == 'UnitPrice') colDefs[i].formatterParams.symbol = CurSymbol;
        if (colDefs[i].title == 'PartialPrice') colDefs[i].formatterParams.symbol = CurSymbol;
        if (colDefs[i].title == 'PartialPrice') colDefs[i].bottomCalcFormatterParams.symbol = CurSymbol;

        i++;
};

//applies the new columns definition
tabulatortable.setColumns(colDefs);

动态单元格格式

3 个答案: