我正在使用kendo网格，现在我想通过减去另外两个字段来显示kendo网格中的第三列。这在剑道网格中是否可行。例如：我想显示字段
“已分配”=“TotalAmount-TotalDepriciated”
代码：
$("#grid").kendoGrid({
dataSource: DataSource,
autoBind: false,
scrollable: false,
sortable: {
allowUnsort: false
},
filterable: { mode: "row", style: "max-width:100px;" },
groupable: true,
pageable: {
refresh: true,
buttonCount: 5,
pageSizes: GlobalPagingDDL
},
//rowTemplate: kendo.template($("#template").html()),
dataBound: gridDataBound,
columns:
[
//field: "Name", title: "Licensee", width: 200, filterable: { cell: { showOperators: false, suggestionOperator: "contains" } }, template: "<a href='javascript:void(0)' onclick='RedirectToOrgDetail("#:LicenseeId#" , "#:PublicName#" )' >#:LicenseeName# </a>" },
{ field: "AgreementName", title: "Agreement Name", width: 200, filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } },
{
field: "Count", title: "Related Agreement", width: 150,
filterable: { cell: { showOperators: true, suggestionOperator: "contains" } }
},
{
field: "Status", title: "Status", width: 150, filterable: {
cell: {
template: function (args) {
args.element.kendoDropDownList({
dataSource: new kendo.data.DataSource({
data:
[
{ Status: "Approved" },
{ Status: "Pending" },
]
}),
dataTextField: "Status",
optionLabel: "All",
dataValueField: "Status",
valuePrimitive: true
});
}, showOperators: false, suggestionOperator: "contains"
}
}
},
{
field: "Type", title: "Type", width: 150, filterable: {
cell: {
template: function (args) {
args.element.kendoDropDownList({
dataSource: new kendo.data.DataSource({
data:
[
{ Type: "4" },
{ Type: "3" },
{ Type: "2" },
{ : "1" }
]
}),
dataTextField: "Type",
optionLabel: "All",
dataValueField: "Type",
valuePrimitive: true
});
}, showOperators: false, suggestionOperator: "contains"
}
}
},
{ field: "StartDate", title: "All Periods Start Date", width: 150, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: true } } },
{ field: "EndDate", title: "All Periods End Date", width: 150, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: true } } },
{ field: "TotalAmount", title: "Invoiced", format: "{0:c2}", footerTemplate: "$ #= sum # ", width: 200, filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } },
{ field: "TotalDepriciated", title: "Allocated", format: "{0:c2}", width: 200, footerTemplate: "$ #= sum # " },
{ field: "Allocated", title: "Balance", format: "{0:c2}", filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } },
//{ field: "LastUpdatedDate", title: "Last Updated Date", width: 150, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: true } } }
]
});
答案 0 :(得分：0)
此代码适用于我。我希望有帮助
{ field: "Allocated", title: "Allocated",
template: '<div>#= TotalAmount-TotalDepriciated#</div>'
}
我也试图创建一个footerTemplate来显示这个结果的总和，但我不明白目前是如何实现这个目标
答案 1 :(得分：-1)
请尝试使用以下代码段。
下面的代码通过减去另外两个字段
在kendo网格中添加第三列Allocated: function () {
return this.TotalAmount - this.TotalDepriciated;
},
.....
.....
{ field: "Allocated", title: "Allocated", template: "#= Allocated() #", footerTemplate: "<label id='sumAllocated'></label>" },
完整代码：
<!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>
var products = [{
ProductID: 1,
ProductName: "Chai",
TotalAmount: 100,
TotalDepriciated: 10,
}, {
ProductID: 2,
ProductName: "Chang",
TotalAmount: 100,
TotalDepriciated: 10,
}, {
ProductID: 3,
ProductName: "Aniseed Syrup",
TotalAmount: 100,
TotalDepriciated: 10,
}, {
ProductID: 4,
ProductName: "Chef Anton's Cajun Seasoning",
TotalAmount: 100,
TotalDepriciated: 10,
}, {
ProductID: 5,
ProductName: "Chef Anton's Gumbo Mix",
TotalAmount: 100,
TotalDepriciated: 30,
}];
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductName: {
type: "string"
},
TotalAmount: {
type: "number"
},
TotalDepriciated: {
type: "number"
}
},
Allocated: function () {
return this.TotalAmount - this.TotalDepriciated;
},
}
},
aggregate: [{ field: "TotalAmount", aggregate: "sum" },
{ field: "TotalDepriciated", aggregate: "sum" }],
pageSize: 10
},
sortable: true,
dataBound: function (e) {
var sumTotalAmount = parseFloat($("#sumTotalAmount").html());
var sumTotalDepriciated = parseFloat($("#sumTotalDepriciated").html());
$("#sumAllocated").html(sumTotalAmount - sumTotalDepriciated);
},
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
{ field: "ProductID", title: "ProductID" },
{ field: "ProductName", title: "ProductName" },
{ field: "TotalAmount", title: "TotalAmount", aggregates: ["sum"], footerTemplate: "<label id='sumTotalAmount'> #=sum# </label>" },
{ field: "TotalDepriciated", title: "TotalDepriciated", aggregates: ["sum"], footerTemplate: "<label id='sumTotalDepriciated'> #=sum# </label>" },
{ field: "Allocated", title: "Allocated", template: "#= Allocated() #", footerTemplate: "<label id='sumAllocated'></label>" },
{ command: ["edit", "destroy"], title: " " }
],
editable: "inline"
});
});
</script>
</body>
</html>
如果有任何疑虑，请告诉我。