添加 bottomCalcFormatter 停止生成制表符
Adding bottomCalcFormatter stops tabulator from generating
制表符不接受列定义中的 bottomCalcFormatter
我的 Tabulator table 工作得很好,我可以成功添加 bottomCalc 和格式化程序,但我似乎无法添加 bottomCalcFormatter。所以我有一列带有 formatter:"money" 和 bottomCalc:"sum" 的钱,但总和没有格式化为钱。如果我尝试添加 bottomCalcFormatter:"money" 则 table 不会呈现。
尽管总和不是 "money" 格式,但仍会呈现:
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"},
],
这个 table 根本不渲染:
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"},
],
我刚刚检查了 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>
制表符不接受列定义中的 bottomCalcFormatter
我的 Tabulator table 工作得很好,我可以成功添加 bottomCalc 和格式化程序,但我似乎无法添加 bottomCalcFormatter。所以我有一列带有 formatter:"money" 和 bottomCalc:"sum" 的钱,但总和没有格式化为钱。如果我尝试添加 bottomCalcFormatter:"money" 则 table 不会呈现。
尽管总和不是 "money" 格式,但仍会呈现:
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"},
],
这个 table 根本不渲染:
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"},
],
我刚刚检查了 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>