带有数据绑定的表目前如下所示：
Source Calls ChargeableCalls
Car Insurance
08434599111 3 2
08934345122 2 1
Home Insurance
08734599333 3 2
08034345555 2 1
所需的输出应如下图所示,该表应包含按分组分组的Calls和ChargeableCalls的总值,以及表中所有Calls和ChargeableCalls的总值.
Source Calls ChargeableCalls
Car Insurance
08434599154 3 2
08934345555 2 1
Total Calls 5 Total CC 3
Home Insurance
08434599154 6 3
08934345555 1 0
Total Calls 7 Total CC 3
Total Calls All 24 Total CC All 12
以下是表格中的绑定：
这是我的viewmodel：
function GroupedReportingviewmodel() {
var self = this;
self.results = ko.observableArray();
self.groupedResults = {};
self.getGroup = function (group) {
return self.groupedResults[group];
};
self.groupedResultsC = ko.computed(function () {
self.groupedResults = {};
ko.utils.arrayForEach(self.results(),function (r) {
if (!self.groupedResults[r.division]) self.groupedResults[r.division] = [];
self.groupedResults[r.division].push(r);
});
return self.groupedResults;
});
self.groups = ko.computed(function () {
var g = [];
for (x in self.groupedResultsC())
g.push(x);
return g;_
});
}
var model = new GroupedReportingviewmodel();
ko.applyBindings(model);
结果observableArray从ajax响应中填充,如下所示：
success: function (jsondata) {
model.results(jsondata["Data"]["Report"]);
}
jsondata对象如下所示：
{"Data":
{"Report":[ {"source":"08434599494","division":"Car Insurance","totalCalls":5,"chargeableCalls":23},{"source":"08434599172","totalCalls":512,"chargeableCalls":44},{"source":"08434599129","division":"Home Insurance","totalCalls":4,"chargeableCalls":2},{"source":"08434599215","division":"Home Insurance","totalCalls":234,"chargeableCalls":54},{"source":"08434599596","totalCalls":332,"chargeableCalls":266}
]
}
}
问：如何实现所需的输出？
最佳答案
在您的示例中,groupedResults是一个数组列表.而不是这样,尝试为一个组创建一个viewmodel.然后可以使用此viewmodel来计算总计.例如…
function Groupviewmodel(division) {
var self = this;
self.Division = division;
self.Items = ko.observableArray();
self.Count = ko.computed(function() {
var count = 0;
ko.utils.arrayForEach(self.Items(),function(r) { count += r.totalCalls; });
return count;
});
self.ChargeableCount = ko.computed(function() {
var count = 0;
ko.utils.arrayForEach(self.Items(),function(r) { count += r.chargeableCalls; });
return count;
});
}
您也可以简化主viewmodel,并将项目推送到Groupviewmodel中：
function GroupedReportingviewmodel() {
var self = this;
self.results = ko.observableArray();
self.groupedResults = ko.computed(function() {
var groups = [];
ko.utils.arrayForEach(self.Results(),function(r) {
var g = ko.utils.arrayFirst(groups,function(g) { return g.Division === r.division; });
if (!g) {
g = new Groupviewmodel(r.division);
groups.push(g);
}
g.Items.push(r);
});
return groups;
});
self.TotalCount = ko.computed(function() {
var count = 0;
ko.utils.arrayForEach(self.results(),function(r) { count += r.totalCalls; });
return count;
});
self.TotalChargeableCount = ko.computed(function() {
var count = 0;
ko.utils.arrayForEach(self.results(),function(r) { count += r.chargeableCalls; });
return count;
});
}
最后在您的视图中,遍历组,然后遍历项：
原文链接：https://www.f2er.com/html/426119.html
猜你在找的HTML相关文章
