【新特性速递】表格行分组(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/

三石出品,必属精品 

posted @ 2020-09-23 10:36  三生石上(FineUI控件)  阅读(1176)  评论(0编辑  收藏  举报