无效模板 Kendo UI 数字格式
Invalid template Kendo UI Number Formatting
格式化模板的正确方法是什么:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treelist/local-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="treelist"></div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.TreeListDataSource({
data: [
{ id: 1, Name: "Daryl Sweeney", Position: "CEO", Num: 555757843457.65, parentId: null },
{ id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", Num: 555757843457.66889, parentId: 1 },
{ id: 32, Name: "Buffy Weber", Position: "VP, Engineering", Num:555757843457.86868, parentId: 2 },
{ id: 11, Name: "Hyacinth Hood", Position: "Team Lead", Num: 555757843457.58686, parentId: 32 },
{ id: 60, Name: "Akeem Carr", Position: "Junior Software Developer", Num: 555757843457.566456, parentId: 11 },
{ id: 78, Name: "Rinah Simon", Position: "Software Developer", Num:555757843457.88567567, parentId: 11 },
],
schema: {
model: {
id: "id",
expanded: true,
fields: {
Num: {type: "number",
parse: function(value) {
return kendo.parseFloat(kendo.toString(value,"#,##0.0000"));
}
}
}
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
height: 540,
filterable: true,
columns: [
{ field: "Position" },
{ field: "Name" },
{ field: "Num",template: '#= formatNm(Num) #',
filterable: {
ui: function (element) {
element.kendoNumericTextBox({
decimals: getDecimals("#,##0.0000")
});
}
}
}
]
});
});
//\#,\#\#0.00
function formatNm(Num,val){
console.log('Num---',Num)
if (Num)
return kendo.toString(Num, "#,##0.0000");
else
return '';
}
function getDecimals(format){
return format.split('.')[1].split('').length;
}
</script>
</div>
</body>
</html>
它适用于 Jquery。我在 .ts 文件中实现了同样的事情。
那里不是模板:'#= formatNm(Num) #' 我正在写 this.formatNum 但它在数据可用之前被触发
知道我们如何实现这一点。
或者我不能直接通过 kendo.toString('Num',"#,##0.0000")
中的格式来代替编写单独的函数
如果你不想要额外的格式化功能,你可以这样做:
模板:(dataItem) => kendo.toString(dataItem.Num, '#,##0.0000')
格式化模板的正确方法是什么:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treelist/local-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="treelist"></div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.TreeListDataSource({
data: [
{ id: 1, Name: "Daryl Sweeney", Position: "CEO", Num: 555757843457.65, parentId: null },
{ id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", Num: 555757843457.66889, parentId: 1 },
{ id: 32, Name: "Buffy Weber", Position: "VP, Engineering", Num:555757843457.86868, parentId: 2 },
{ id: 11, Name: "Hyacinth Hood", Position: "Team Lead", Num: 555757843457.58686, parentId: 32 },
{ id: 60, Name: "Akeem Carr", Position: "Junior Software Developer", Num: 555757843457.566456, parentId: 11 },
{ id: 78, Name: "Rinah Simon", Position: "Software Developer", Num:555757843457.88567567, parentId: 11 },
],
schema: {
model: {
id: "id",
expanded: true,
fields: {
Num: {type: "number",
parse: function(value) {
return kendo.parseFloat(kendo.toString(value,"#,##0.0000"));
}
}
}
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
height: 540,
filterable: true,
columns: [
{ field: "Position" },
{ field: "Name" },
{ field: "Num",template: '#= formatNm(Num) #',
filterable: {
ui: function (element) {
element.kendoNumericTextBox({
decimals: getDecimals("#,##0.0000")
});
}
}
}
]
});
});
//\#,\#\#0.00
function formatNm(Num,val){
console.log('Num---',Num)
if (Num)
return kendo.toString(Num, "#,##0.0000");
else
return '';
}
function getDecimals(format){
return format.split('.')[1].split('').length;
}
</script>
</div>
</body>
</html>
它适用于 Jquery。我在 .ts 文件中实现了同样的事情。
那里不是模板:'#= formatNm(Num) #' 我正在写 this.formatNum 但它在数据可用之前被触发
知道我们如何实现这一点。
或者我不能直接通过 kendo.toString('Num',"#,##0.0000")
中的格式来代替编写单独的函数如果你不想要额外的格式化功能,你可以这样做:
模板:(dataItem) => kendo.toString(dataItem.Num, '#,##0.0000')