jQuery EasyUI 数据网格 - 列运算
jQuery EasyUI 数据网格提供了列运算功能，可以对各列数据进行简单的数学运算，例如求和、平均数、最大值、最小值等等。
首先，为了展示列运算功能，我们需要在数据网格中添加一些数据。在 HTML 代码中，我们需要先创建一个包含表格的 div 元素，然后使用以下的 JavaScript 代码向表格中添加数据。
$(function() {
// 创建数据
var data = [
{name: "A", num1: 10, num2: 20, num3: 30},
{name: "B", num1: 15, num2: 25, num3: 35},
{name: "C", num1: 20, num2: 30, num3: 40}
];
// 创建数据网格
$('#datagrid').datagrid({
data: data,
columns: [[
{field:'name',title:'名称'},
{field:'num1',title:'数值1'},
{field:'num2',title:'数值2'},
{field:'num3',title:'数值3'}
]]
});
});
以上代码将创建一个包含名称、数值1、数值2、数值3 4 个列的数据网格。接下来，我们可以在表格底部添加一个表格工具栏，将列运算的功能添加进来。可以使用列运算的属性有 footer 和 footerFormatter。
- footer：默认为 false，设置为 true时，表示在数据网格底部添加一个合计行，或一个精简计算的优化行。如果设置为一个对象，那么该对象的属性将被使用来构造优化行。
- footerFormatter：一个函数，用来格式化表格底部展示的内容。函数接受一个参数，表示当前底部列对应的字段。可以在函数内部进行计算等操作，最后返回一个新的字符串来代替原有的底部文本。
使用以下的 JavaScript 代码，我们创建一个表格工具栏，列出了数值1到数值3这3个列的平均数和总和。
$(function() {
// 创建数据
var data = [
{name: "A", num1: 10, num2: 20, num3: 30},
{name: "B", num1: 15, num2: 25, num3: 35},
{name: "C", num1: 20, num2: 30, num3: 40}
];
// 创建数据网格
$('#datagrid').datagrid({
data: data,
columns: [[
{field:'name',title:'名称'},
{field:'num1',title:'数值1'},
{field:'num2',title:'数值2'},
{field:'num3',title:'数值3'}
]],
footer: true,
footerFormatter: function(column){
if(column=='name'){
return '总计：';
}else{
var rows = $('#datagrid').datagrid('getRows');
var total = 0;
for(var i=0; i<rows.length; i++){
total += parseInt(rows[i][column]);
}
return total + '（平均数：' + Math.round(total/rows.length) + '）';
}
}
});
});
以上代码中，通过设置 footer 为 true，表格就在底部显示了一个合计行。然后，设置 footerFormatter 函数，用来格式化要显示的文本。该函数会接受一个参数 column，代表当前底部所需要计算的列文本。在函数实现中，使用 getRows() 方法获得所有行数据，并循环累加各行中当前列的数值，以获得对应的总数。最后得出总数并计算平均值，用字符串格式返回即可。
总结一下，在 EasyUI 的数据网格中通过设置 footer 和 footerFormatter 属性即可轻松实现列运算的功能，使用户更方便的得出数据结果。