现在位置: 首页 / ASP.NET MVC / DataGrid / 正文

[原创]EasyUI的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.

View Demo

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:

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

Create DataGrid

  1. <table id="tt" title="DataGrid" class="easyui-datagrid" style="width:400px;height:250px"
  2. url="data/datagrid17_data.json"
  3. fitColumns="true" rownumbers="true" showFooter="true">
  4. <thead>
  5. <tr>
  6. <th field="name" width="80">Product Name</th>
  7. <th field="price" width="40" align="right">Unit Price</th>
  8. </tr>
  9. </thead>
  10. </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]