【新特性速递】表格多行合计支持

FineUIPro/Mvc/Core的下个版本（v6.1.0），我们对表格控件进行了增强，可以显示多个合计行了。

 

先来看下显示效果：

 

和单合计行相比，前台代码没用任何变化，重点在后台代码，我们新增了一个SummaryDataArray属性。

 

上述示例的后台关键代码如下所示：

private void OutputSummaryData(DataTable source)
{
    JArray summaryArray = new JArray();

    // 分页合计
    DataTable table = GetPagedDataTable(Grid1.PageIndex, Grid1.PageSize);
    summaryArray.Add(CalcSummaryRow(table, "当前页合计："));

    // 全部合计
    summaryArray.Add(CalcSummaryRow(DataSourceUtil.GetDataTable2(), "全部合计："));

    Grid1.SummaryDataArray = summaryArray;
}

private JObject CalcSummaryRow(DataTable source, string title)
{
    float donateTotal = 0.0f;
    float feeTotal = 0.0f;
    foreach (DataRow row in source.Rows)
    {
        donateTotal += Convert.ToInt32(row["Donate"]);
        feeTotal += Convert.ToInt32(row["Fee"]);
    }


    JObject summary = new JObject();
    summary.Add("major", title);
    summary.Add("fee", feeTotal.ToString("F2"));
    summary.Add("donate", donateTotal.ToString("F2"));
    
    return summary;
}

 

可以看到，我们只需新建一个 JArray 对象，需要几个合计行，就插入几条数据。

 

需要注意的一点，向合计行对象添加的数据中：

summary.Add("donate", donateTotal.ToString("F2"));

其中的 donate 对应的是列的 ColumnID 属性（而不是DataField属性），看下前台的声明标签（属性值是严格区分大小写的）：

<f:BoundField Width="100px" DataField="Donate" ColumnID="donate" HeaderText="捐赠金额" />

 

 

官网示例已更新：

• FineUIPro：https://pro.fineui.com/
• FineUIMvc：https://mvc.fineui.com/
• FineUICore：https://core.fineui.com/
• FineUICore （Razor Pages & Tag Helpers）：https://pages.fineui.com/
• F.js：https://js.fineui.com/

 

现在加入【三石和他的朋友们】星球，下载FineUIPro/Mvc/Core（基础版）：https://fineui.com/fans/