EasyUI DataGird底部统计行

EasyUI DataGird底部统计行

先上一个datagrid底部统计行的图片：



官方文档对于datagrid的底部统计行的说明很简单，只提到了showFooter定义是否显示行脚，并没有说怎么去用。我用firebug查看了官网文档返回的json数据，分析了json的数据结构，自己尝试了一下底部统计行的正确用法，在这里和大家分享一下。

在datagrid中加入showFooter: true这个参数。

response传回到datagrid的json的数据中要求新加入一个footer的值，footer里面的值要求针对datagrid的不同列，赋予你要显示的值。比如让姓名那一列显示语文平均分，课程名称那一列显示平均分的数值。response返回的数据如下所示：

{**"footer":[{"courseName":74,"studentName":"语文平均分"},{"courseName":76,"studentName":"数学平均分"},{"courseName":67,"studentName":"英语平均分"}]**,"rows":[{"courseName":"语文","score":80,"studentName":"Allen"},{"courseName":"英语","score":60,"studentName":"Allen"},{"courseName":"数学","score":70,"studentName":"Allen"},{"courseName":"英语","score":68,"studentName":"Bill"},{"courseName":"数学","score":90,"studentName":"Bill"},{"courseName":"语文","score":70,"studentName":"Bill"},{"courseName":"语文","score":90,"studentName":"Carter"},{"courseName":"英语","score":100,"studentName":"Carter"},{"courseName":"数学","score":90,"studentName":"Carter"},{"courseName":"语文","score":59,"studentName":"Darl"}],"total":19}

js的代码如下：

$('#dg_scores').datagrid({
url:'',
fitColumns:true,
pagination:true,
rownumbers:true,
showFooter: true,
columns:[[
{field:'studentName',title:'学生姓名'},
{field:'courseName',title:'课程名称'},
{field:'score',title:'分数',sortable:'true'},

]]
});