JsGrid 求和两个(数据库)字段并在网格中显示结果
JsGrid sum two (database) fields and show result in grid
我有一个 jsGrid,它是使用数据库查询的 JSON 结果构建的。
数据库 returns 字段 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
};
},
我怎样才能做到这一点?
How can I Achieve that?
itemTemplate
函数内部有两个参数value
和item
。
- itemTemplate是一个创建单元格内容的函数。它应该 return 标记为字符串、DomNode 或 jQueryElement。函数签名为function(value, item),其中value为数据项第属性列的值,item是行数据项。
您可以使用 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>
我有一个 jsGrid,它是使用数据库查询的 JSON 结果构建的。 数据库 returns 字段 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
};
},
我怎样才能做到这一点?
How can I Achieve that?
itemTemplate
函数内部有两个参数value
和item
。
- itemTemplate是一个创建单元格内容的函数。它应该 return 标记为字符串、DomNode 或 jQueryElement。函数签名为function(value, item),其中value为数据项第属性列的值,item是行数据项。
您可以使用 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>