我正在构建一个需要在页脚中有总和的网格，但内置的总和聚合并不能满足我的需要。
例如，假设我正在构建一个包含我正在销售的产品列表的网格。我还有一个字段显示“有资格获得折扣”。我想显示产品价格的总和，但仅限于符合折扣条件的商品。
理想情况下，我希望能够传入如下所示的函数，但我认为 Kendo 网格不支持它。
function(seed, model){
if(model.EligibleForDiscount === true){
return seed.Price + model.Price;
}
return seed.Price;
}
它还必须在网格更新时自动刷新。
是否只有手动处理网格上的事件并使用 jQuery 的帮助来更新页脚模板来做到这一点？
【问题讨论】：
标签： kendo-ui kendo-grid
试试下面的例子：
$("#SearchDetails").kendoGrid({
scrollable: true,
resizable: true,
sortable: true,
pageable: false,
navigatable: true,
filterable: false,
groupable: true,
selectable: "row",
schema: {
fields: {
Duration: { type: "number" }
}
},
columns: [
{ title: ' Name', field: 'CustName'},
{ title: ' Event Name', field: 'ServiceName'},
{ title: 'Resource Name', field: 'ResourceName', footerTemplate: '<span style=\'float:right;\'>Total</span>' },
{ title: 'Duration(Min)', field: 'Duration', template: '<span style=\'float:right;\'>#=Duration#</span>', aggregates: 'sum', footerTemplate: '<span id=\'footerPlaceholder\' style=\'float:right;font-weight: bold;\'>#=calc(sum)#</span>' },
{ title: 'Total Amount (' + currencySymbol + ')', field: 'TotalAmount', template: '<span style=\'float:right;\'>#=TotalAmount#</span>', aggregates: 'sum', footerTemplate: '<span style=\'float:right;font-weight: bold;\'>#=kendo.toString(sum,\'n\')#</span>' }
],
dataSource: {
data: viewModel.AppintDetails(),
aggregate: [{ field: 'Duration', aggregate: 'sum', format: 'n' }, { field: 'TotalAmount', aggregate: 'sum', format: 'n' }]
}
});
下面我们在html部分创建了一个函数
<script type="text/javascript">
function calc(val) {
var hour = Math.floor(val / 60);
var min = val % 60;
val = hour + ":" + min + " hrs";
return val;
}
</script>
我只是用于以正确的日期格式显示持续时间总计。此代码对我有用... 网格下方显示此...详细信息
【讨论】：
你好我迟到了，但如果它可以帮助某人。
我曾经遇到过同样的问题，我实现了一个解决方案，可以帮助您在 groupFooterTemplate 中使用自定义聚合函数。
项目链接here
function myAggregate(data){
// Data here is a list of data by group (brilliant right! :-) )
// Do anything here and return result string
}
var grid = $('#grid').kendoGrid({
...
columns: [
{ field: '', title: '', groupFooterTemplate: myAggregate
]
...
});<!DOCTYPE html>
<html>
<head>
<!-- YOUR CSS HERE -->
</head>
<body>
...
<div id="#grid"></div>
...
<script>// jQuery here </script>
<script>// kendo.all.min.js here </script>
<script src="kendo.aggregate.helper.js"></script>
</body>
</html>【讨论】：
不幸的是，Kendo DataSource 没有提供添加自定义聚合函数的方法，但您可以通过使用自定义列 footerTemplate 来完成此操作，例如：
var gridDataSource = new kendo.data.DataSource({...});
window.calculatePriceAggregate = function () {
var data = gridDataSource.data();
var total = 0;
for(var i = 0; i < data.length; i++) {
if (data[i].EligibleForDiscount === true) {
total += data[i].Price;
}
}
return total;
};
$("#grid").kendoGrid({
data: gridDataSource,
...
columns: [
{
field: 'Price',
footerTemplate: '#=window.calculatePriceAggregate()#'
}
]
});
【讨论】：
serverPaging 关闭，.data() 将返回所有页面的数据。如果您正在执行服务器端分页，那么客户端不可能进行聚合。您必须在服务器上计算它，然后将其返回给客户端。您可以使用 DataSource.schema.data 函数从服务器响应中提取任何自定义聚合。
或者像这样使用代码...
$("#grid").kendoGrid({
scrollable: true,
sortable: true,
pageable: true,
navigatable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
dataSource: {
data: viewModel.UserWithoutGUID(),
},
groupable: false,
selectable: "row",
columns: [
{ title: "ID", field: "ResourceID", template: '<span>#= ResourceID #</span> <input type="hidden" value="#= ResourceID #"/>', width: 40 },
{ title: "Photo", filterable: false, field: "Image", template: '<span class="image"><img id="#=ResourceID #" height="50" width="50" src="#=Image#" onerror="#=LoadDefaultImage()#"/></span>', width: 40 },
{ title: "Name", field: "Name", width: 100 },
{ title: "Email", field: "Email", width: 100 },
{ title: "Mobile", field: "Mobile", width: 100 }
]
});
LoadDefaultImage = function () {
return "null";
}
我在这里通过调用此函数通过模板绑定加载图像。
【讨论】：