随笔- 445 文章- 0 评论- 5832 阅读- 270万

【新特性速递】表格行分组（EnableRowGroup）

FineUIPro/Mvc/Core的下个版本（v7.0.0），我们会为表格新增行分组功能，这也是很多用户期待的功能。

为了支持表格行分组功能，我们为表格添加了一些属性：

新增EnableRowGroup、DataRowGroupField、RowGroupCollapsible、RowGroupExpandOnDblClick、ExpandAllRowGroups、RowGroupRendererFunction属性。
新增RowGroupSummary、RowGroupSummaryRowCount属性（行分组的合计行行数）。
为RenderField增加RowGroupSummaryText、RowGroupSummaryType、RowGroupSummaryRendererFunction属性。

基本用法

下面通过一个例子来展示表格行分组的用法，页面标签定义：

<f:Grid ID="Grid1" IsFluid="true" CssClass="blockpanel" Height="500px" ShowBorder="true" ShowHeader="true" 
    Title="表格" runat="server" EnableCollapse="false" DataKeyNames="Id,Name"
    DataIDField="Id" DataTextField="Name" EnableRowGroup="true" DataRowGroupField="EntranceYear">
    <Columns>
        ......
    </Columns>
</f:Grid>

为了启用行分组，只需要设置如下两个属性：

EnableRowGroup="true"
DataRowGroupField="EntranceYear"

DataRowGroupField用来指定行分组对应的数据字段名，和我们所熟知的DataIDField、DataTextField类似。

页面显示效果：

因为分组逻辑是在客户端完成的，所以提供的数据源和正常的表格毫无二致：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindGrid();
    }
}
 
private void BindGrid()
{
    Grid1.DataSource = DataSourceUtil.GetDataTable();
    Grid1.DataBind();
}

自定义分组标题

默认分组标题就是分组数据文本，当然你可以自定义分组标题，FineUI提供了类似表格列渲染函数（RendererFunction）的方式。

首先看下最终的页面效果：

在上例的表格标签基础上，添加 RowGroupRendererFunction="onGrid1RowGroupRenderer" 属性，然后在JS中进行自定义：

<script>
 
    function onGrid1RowGroupRenderer(groupValue, rowData) {
        var maleCount = 0, total = rowData.children.length;
        for (var i = 0; i < total; i++) {
            var childData = rowData.children[i];
            var genderVaue = childData.values['Gender'];
            if (genderVaue.indexOf('男') >= 0) {
                maleCount++;
            }
        }
        return F.formatString('入学年份：{0}，男：{1}，女：{2}', groupValue, maleCount, total - maleCount);
    }
 
</script>

传入渲染函数的两个参数：

groupValue：对应于分组文本
rowData：对应于分组行的表格数据

注意这个行分组数据是在客户端自动生成的，因此我们有必要通过F12调试，来了解下它的内部构造：

需要关注如下几个属性：

children：包含当前行分组的行数据，这是一个数组类型
expanded：是否处于展开状态
id：行分组标题栏，在客户端自动生成
isRowGroup：表明当前数据是否行分组标题栏
rowGroup: 当前行分组文本

拿到分组内某一行的数据（ rowData.children[0]），这个我们应该就很熟悉了：

因为这是一个FineUIPro的示例，并且性别列用的是TemplateField渲染，所以这里的 rowData.children[0].values.Gender 得到的是渲染后的HTML片段。

对应的JavaScript代码，就需要自行解析这个渲染后的字符串了：

var genderVaue = childData.values['Gender'];
if (genderVaue.indexOf('男') >= 0) {
    maleCount++;
}

#################################################################

如果你在使用FineUIMvc/FineUICore，那么性别列就是用的RenderField，此时的内部数据类似如下所示：

注意，此时的 rowData.children[0].values.Gender 得到的就是原始的数据，因此解析方式就有所不同了：

function onGrid1RowGroupRenderer(groupValue, rowData) {
    var maleCount = 0, total = rowData.children.length;
    for (var i = 0; i < total; i++) {
        var childData = rowData.children[i];
        var genderVaue = childData.values['Gender'];
        if (genderVaue === 1) {
            maleCount++;
        }
    }
    return F.formatString('入学年份：{0}，男：{1}，女：{2}', groupValue, maleCount, total - maleCount);
}