动态单元格格式

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

If you want to have dynamic currency you should set it on Tabulator Constructor everytime I would suggest

但如果您仍想在运行时间更改它，您可以使用 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 格式化程序类型。然后，您可以在设置动态 bottomCalcFormatterParams.

后使用 Tabulator.prototype.moduleBindings.format.prototype.formatters.money 调用原始货币格式化程序实现

Answer 3

在阅读 GitHub 和 Tabulator 文档后，我发现这种非常 swift 的方式可以在用户更改 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);

动态单元格格式

Dynamic Cell formatting

tabulator