JsGrid 对两个(数据库)字段求和，并在网格中显示结果

Question

我有一个jsGrid，它是使用来自数据库查询的JSON结果构建的。 数据库返回字段 Amount1 和 Amount2(例如(。

我想将这些汇总到字段中以创建一个将在网格中显示的新字段。像这样：

fields: [{
name: "Amount1",
type: "text",
title: "bla",
width: 45
},
{
name: "Amount2",
type: "text",
title: "blabla",
width: 60 
},
{
name: "Sum",
type: "text"
}, 
{
itemTemplate: function(Sum) {
return Amount1.value + Amount2.value {
someformatting
};
},

我怎样才能实现呢？

Answer 1

我怎样才能实现呢？

itemTemplate函数内部有两个参数value和item。

• itemTemplate是一个创建单元格内容的函数。它应该将标记返回为字符串，DomNode或jQueryElement。函数签名是函数(值，项(，其中值是数据项的列属性值，项是行数据项。

您可以使用item.Amount1+item.Amount2获取总值

演示

$("#jsGrid").jsGrid({
width: "100%",

data: [{
Amount1: 10,
Amount2: 12
}, {
Amount1: 156,
Amount2: 125
}, {
Amount1: 101,
Amount2: 122
}],
fields: [{
width: 80,
align:'center',
name: "Amount1",
type: "number"
}, {
width: 80,
align:'center',
name: "Amount2",
type: "number",
}, {
width: 80,
align:'center',
headerTemplate: function() {
return "<th class='jsgrid-header-cell'>Sum</th>";
},
itemTemplate: function(value, item) {
return item.Amount1+item.Amount2;
}
}]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="jsGrid"></div>