我想动态格式化money sum单元格的样式，用于行单元格和内置计算列单元格。
例如，将货币符号，小数符号，千位分隔符符号更改为单元格。
下面的代码格式化货币类型的行单元格以显示部分成本，包括货币符号，千位和小数符号以及精度。同样适用于底部计算单元。
{
"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
}
}
这段代码工作正常，但我没有得到文档来精确更改货币符号，十进制和千位分隔符，以及精度参数。
我想通过让用户在表单中更改自己的参数来动态更改这些参数。
如果你想拥有动态货币，你应该每次我建议在Tabulator Constructor上设置它
但如果您仍想在运行时更改它，您可以使用Javascript来执行此操作，请参阅下面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://unpkg.com/[email protected]/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/[email protected]/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>
通过扩展formatters模块而不是使用"money"来创建自己的calc格式化程序类型。然后，一旦设置了动态Tabulator.prototype.moduleBindings.format.prototype.formatters.money，就可以使用bottomCalcFormatterParams调用原始的格式化程序实现。
通过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);