【新特性速递】表格行分组（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);
}

　

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

未完待续......

欢迎入伙：https://fineui.com/fans/

三石出品，必属精品