Javascript 在剑道格线柱模板中添加计算 #如果（（data.Price1-data.Price2）/data.Price2
大家好, 上面是我添加的剑道列模板，但是我得到了无效的模板错误，我假设这是由于我在if条件下添加的计算造成的。我需要这个计算来设置列格式。请让我知道我在这里错过了什么，或者我在这里哪里出错了。Javascript 在剑道格线柱模板中添加计算 #如果（（data.Price1-data.Price2）/data.Price2,javascript,templates,kendo-ui,kendo-grid,Javascript,Templates,Kendo Ui,Kendo Grid,大家好, 上面是我添加的剑道列模板，但是我得到了无效的模板错误，我假设这是由于我在if条件下添加的计算造成的。我需要这个计算来设置列格式。请让我知道我在这里错过了什么，或者我在这里哪里出错了。 提前谢谢 我试图复制您的问题，但没有效果。我已经在下面分享了我的完整代码，所以请尝试使用它，如果有任何问题，请告诉我 # if (((data.Price1 - data.Price2) / data.Price2< 0.02)) { # <table class="bg-succes
提前谢谢 我试图复制您的问题，但没有效果。我已经在下面分享了我的完整代码，所以请尝试使用它，如果有任何问题，请告诉我
# if (((data.Price1 - data.Price2) / data.Price2< 0.02)) { #
<table class="bg-success">
<tr>
<td width="20px"><label title="Price1"></label></td>
<td width="90%">#= kendo.toString(Price1, 'n') || "0" #</td>
</tr>
<tr>
<td width="20px"><img title="Price2" /></td>
<td width="90%">#= kendo.toString(Price2, 'n') || "0" #</td>
</tr>
</table>
# } else { #
<table class="bg-danger">
<tr>
<td width="20px"><label title="Price1"></label></td>
<td width="90%">#= kendo.toString(Price1, 'n') || "0" #</td>
</tr>
<tr>
<td width="20px"><img title="Price2" /></td>
<td width="90%">#= kendo.toString(Price2, 'n') || "0" #</td>
</tr>
</table>
# } #
var乘积=[{
产品编号：11，
产品名称：“柴”，
价格1:13.0，
价格2:11.0，
}, {
产品编号:22,，
产品名称：“Chang”，
价格1:19.0，
价格2:11.0，
}, {
产品编号：33，
产品名称：“八角糖浆”，
价格1:1.0，
价格2:11.0，
}, {
产品编号：44，
产品名称：“安东厨师卡琼调味品”，
价格1:1.0，
价格2:11.0，
}, {
产品编号:55,，
产品名称：“厨师安东的秋葵混合物”，
价格1:1.0，
价格2:11.0，
}];
$（文档）.ready（函数（）{
$（“#网格”）.kendoGrid({
数据源：{
数据：产品，
模式：{
型号：{
id:“产品id”，
字段：{
产品名称：{
类型：“字符串”
}
},
}
},
页面大小：10
},
可排序：是的，
数据绑定：函数（e）{
},
可过滤：正确，
可分页：{
输入：正确，
数字：false
},
栏目：[
{字段：“ProductID”，标题：“ProductID”}，
{字段：“ProductName”，标题：“ProductName”}，
{
标题：“临时工”，
模板：“#如果（（Price1-Price2）/Price2<0.02））{#”+
'' +
'' +
'' +
“#=剑道.托斯特林（价格1，“n”）| |“0”#”+
'' +
'' +
'
#如果（（Price1-Price2）/Price2<0.02））{#
#=kendo.toString（价格1，“n”）| |“0”#
#=kendo.toString（价格2，“n”）||“0”#
#}否则{#
#=kendo.toString（价格1，“n”）| |“0”#
#=kendo.toString（价格2，“n”）||“0”#
# } #
var乘积=[{
产品编号：11，
产品名称：“柴”，
价格1:13.0，
价格2:11.0，
}, {
产品编号:22,，
产品名称：“Chang”，
价格1:19.0，
价格2:11.0，
}, {
产品编号：33，
产品名称：“八角糖浆”，
价格1:1.0，
价格2:11.0，
}, {
产品编号：44，
产品名称：“安东厨师卡琼调味品”，
价格1:1.0，
价格2:11.0，
}, {
产品编号:55,，
产品名称：“厨师安东的秋葵混合物”，
价格1:1.0，
价格2:11.0，
}];
$（文档）.ready（函数（）{
$（“#网格”）.kendoGrid({
数据源：{
数据：产品，
模式：{
型号：{
id:“产品id”，
字段：{
产品名称：{
类型：“字符串”
}
},
}
},
页面大小：10
},
可排序：是的，
数据绑定：函数（e）{
},
可过滤：正确，
可分页：{
输入：正确，
数字：false
},
栏目：[
{字段：“ProductID”，标题：“ProductID”}，
{字段：“ProductName”，标题：“ProductName”}，
{
标题：“临时工”，
模板：kendo.template（$（'#price columnt）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid">
</div>
<script>
var products = [{
ProductID: 11,
ProductName: "Chai",
Price1: 13.0,
Price2: 11.0,
}, {
ProductID: 22,
ProductName: "Chang",
Price1: 19.0,
Price2: 11.0,
}, {
ProductID: 33,
ProductName: "Aniseed Syrup",
Price1: 1.0,
Price2: 11.0,
}, {
ProductID: 44,
ProductName: "Chef Anton's Cajun Seasoning",
Price1: 1.0,
Price2: 11.0,
}, {
ProductID: 55,
ProductName: "Chef Anton's Gumbo Mix",
Price1: 1.0,
Price2: 11.0,
}];
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductName: {
type: "string"
}
},
}
},
pageSize: 10
},
sortable: true,
dataBound: function (e) {
},
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
{ field: "ProductID", title: "ProductID" },
{ field: "ProductName", title: "ProductName" },
{
title: "Temp",
template: '# if (((Price1 - Price2) / Price2< 0.02)) { #' +
'<table class="bg-success">' +
'<tr>' +
'<td width="20px"><label title="Price1"></label></td>' +
'<td width="90%">#= kendo.toString(Price1, "n") || "0" #</td>' +
'</tr>' +
'<tr>' +
' <td width="20px"><img title="Price2" alt="Price2" /></td>' +
' <td width="90%">#= kendo.toString(Price2, "n") || "0" #</td>' +
'</tr>' +
'</table>' +
'# } else { # ' +
' <table class="bg-danger">' +
'<tr>' +
'<td width="20px"><label title="Price1"></label></td>' +
'<td width="90%">#= kendo.toString(Price1, "n") || "0" #</td>' +
'</tr>' +
'<tr>' +
'<td width="20px"><img title="Price2" /></td>' +
'<td width="90%">#= kendo.toString(Price2, "n") || "0" #</td>' +
'</tr>' +
'</table>' +
' # } # ',
},
{ command: ["edit", "destroy"], title: " " }
],
editable: "inline"
});
});
</script>
<style>
.bg-success {
background-color: green;
}
.bg-danger {
background-color: red;
}
</style>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid">
</div>
<script type="text/x-kendo-template" id="priceColumnTemplate">
# if (((Price1 - Price2) / Price2< 0.02)) { #
<table class="bg-success">
<tr>
<td width="20px"><label title="Price1"></label></td>
<td width="90%">#= kendo.toString(Price1, "n") || "0" #</td>
</tr>
<tr>
<td width="20px"><img title="Price2" alt="Price2" /></td>
<td width="90%">#= kendo.toString(Price2, "n") || "0" #</td>
</tr>
</table>
# } else { #
<table class="bg-danger">
<tr>
<td width="20px"><label title="Price1"></label></td>
<td width="90%">#= kendo.toString(Price1, "n") || "0" #</td>
</tr>
<tr>
<td width="20px"><img title="Price2" /></td>
<td width="90%">#= kendo.toString(Price2, "n") || "0" #</td>
</tr>
</table>
# } #
</script>
<script>
var products = [{
ProductID: 11,
ProductName: "Chai",
Price1: 13.0,
Price2: 11.0,
}, {
ProductID: 22,
ProductName: "Chang",
Price1: 19.0,
Price2: 11.0,
}, {
ProductID: 33,
ProductName: "Aniseed Syrup",
Price1: 1.0,
Price2: 11.0,
}, {
ProductID: 44,
ProductName: "Chef Anton's Cajun Seasoning",
Price1: 1.0,
Price2: 11.0,
}, {
ProductID: 55,
ProductName: "Chef Anton's Gumbo Mix",
Price1: 1.0,
Price2: 11.0,
}];
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductName: {
type: "string"
}
},
}
},
pageSize: 10
},
sortable: true,
dataBound: function (e) {
},
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
{ field: "ProductID", title: "ProductID" },
{ field: "ProductName", title: "ProductName" },
{
title: "Temp",
template: kendo.template( $( '#priceColumnTemplate' ).html()),
},
{ command: ["edit", "destroy"], title: " " }
],
editable: "inline"
});
});
</script>
<style>
.bg-success {
background-color: green;
}
.bg-danger {
background-color: red;
}
</style>
</body>
</html>