EasyUI的DataGrid合击汇总页脚使用教程-优快云博客

本文介绍如何使用EasyUI的Datagrid组件实现页脚汇总功能，通过修改JSON数据格式，加入footer数组来显示订单数量和金额的总和。提供了一个C#服务器端代码示例，展示了如何动态生成包含汇总信息的Datagrid数据。

最近做订单处理，需要汇总订单明细的数量和金额，所以涉及到使用EasyUI的Datagrid组件的页脚汇总功能，先看了一下官方教程，如下：

Tutorial » Displaying Summary Information in DataGrid's Footer

In this tutorial, we will show you how to display the summary rows in the footer of datagrid.

To display footer row, you should set the showFooter property to true and then prepare the footer rows that is defined in datagrid data. Below is the sample data:

{"total":1,"rows":[{"id":1,"name":"Chai","price":18.00}],"footer":[{"name":"Total","price":18.00}]}

Create DataGrid

<tableid="tt"title="DataGrid"class="easyui-datagrid"style="width:400px;height:250px"
url="data/datagrid17_data.json"
fitColumns="true"rownumbers="true"showFooter="true">
<thead>
<tr>
<thfield="name"width="80">Product Name</th>
<thfield="price"width="40"align="right">Unit Price</th>
</tr>
</thead>
</table>

The footer rows are same as body rows, so you can display more than one summary information on footer.

Download the EasyUI example:

easyui-datagrid-demo.zip

上面的教程不用多说，大家可以看一下，重点是再Json数据的格式问题上，需要加入footer的数组记住是数组，并且数组的列要和你datagrid中的列名一致，需要汇总的列有值，其他列可以不赋值

我的服务器端代码如下：

[csharp]
public Dictionary getOrderList(string ordercode)
{
Dictionary result=new Dictionary();
if (String.IsNullOrEmpty(ordercode))
{
result.Add("total",1);
result.Add("rows", new BuyOrderList());
result.Add("footer", new { Goods_Name = "合计", Buy_Number = 0, Order_Amount=0 });
return result;
}
else
{
List datas = new BusinessLogic().Select(new BuyOrderList() { Order_Code = ordercode });
result.Add("total", datas.Count);
result.Add("rows", datas);
List footer=new List();
footer.Add(new BuyOrderList(){Identifier=-2,Goods_Name="合计:",Buy_Number=datas.Sum(m =&gt; m.Buy_Number),Order_Amount=datas.Sum(m =&gt; m.Order_Amount)});
result.Add("footer",footer);
return result;
}
}
[/csharp]