【新特性速递】表格行分组(续)

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

 

上一篇文章,我们介绍了行分组的基本特性,今天就来讲解一下表格行分组的合计。 

 

基本用法

开启行分组合计,我们需要如下两个步骤:

  • 为表格增加 RowGroupSummary="true" 属性
  • 为需要开启行分组合计的行增加 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" RowGroupSummary="true">
	<Columns>
		......
		<f:RenderField ColumnID="Major" DataField="Major" RendererFunction="renderMajor"
			ExpandUnusedSpace="true" MinWidth="150px" HeaderText="所学专业" RowGroupSummaryText="平均(分组):">
		</f:RenderField>
		<f:RenderField Width="100px" DataField="ChineseScore" FieldType="Int" ColumnID="ChineseScore" HeaderText="语文成绩" RowGroupSummaryType="Avg" />
		<f:RenderField Width="100px" DataField="MathScore" FieldType="Int" ColumnID="MathScore" HeaderText="数学成绩" RowGroupSummaryType="Avg" />
	</Columns>
</f:Grid>

RowGroupSummaryType对应几个预定义的合计方式:

public enum SummaryType
{
	/// <summary>
	/// 未定义
	/// </summary>
	Undefined,
	/// <summary>
	/// 总和
	/// </summary>
	Sum,
	/// <summary>
	/// 最小值
	/// </summary>
	Min,
	/// <summary>
	/// 最大值
	/// </summary>
	Max,
	/// <summary>
	/// 个数
	/// </summary>
	Count,
	/// <summary>
	/// 平均
	/// </summary>
	Avg
}

当然,我们也可以通过 RowGroupSummaryRendererFunction 属性,来自定义合计。

 

多行分组合计

要开启多行分组合计,我们需要设置表格的RowGroupSummaryRowCount。

此时表格列就不能用 RowGroupSummaryText、RowGroupSummaryType两个属性了,因为它们无从告知每一行合计的结果,只能使用自定义合计的方式。

来看个示例效果(这个示例不仅启用多行分组合计,而且启用了表格多行合计):

 

表格的标签定义:

<f:Grid ID="Grid1" IsFluid="true" CssClass="blockpanel" Height="500px" ShowBorder="true" ShowHeader="true" 
	Title="表格" runat="server" EnableCollapse="false" DataKeyNames="Id,Name" 
	EnableSummary="true" SummaryPosition="Bottom" SummaryRowCount="3"
	DataIDField="Id" DataTextField="Name" EnableRowGroup="true" DataRowGroupField="EntranceYear" RowGroupSummary="true" RowGroupSummaryRowCount="3">
	<Columns>
		......
		<f:RenderField ColumnID="Major" DataField="Major" RendererFunction="renderMajor"
			ExpandUnusedSpace="true" MinWidth="150px" HeaderText="所学专业" SummaryRendererFunction="majorSummaryRenderer" RowGroupSummaryRendererFunction="majorRowGroupSummaryRenderer">
		</f:RenderField>
		<f:RenderField Width="100px" DataField="ChineseScore" FieldType="Int" ColumnID="ChineseScore" HeaderText="语文成绩" SummaryRendererFunction="chineseScoreSummaryRenderer" RowGroupSummaryRendererFunction="chineseScoreRowGroupSummaryRenderer" />
		<f:RenderField Width="100px" DataField="MathScore" FieldType="Int" ColumnID="MathScore" HeaderText="数学成绩" SummaryRendererFunction="mathScoreSummaryRenderer" RowGroupSummaryRendererFunction="mathScoreRowGroupSummaryRenderer" />
	</Columns>
</f:Grid>

标签有点复杂,是因为同时开启了行分组和表格的多行合计,可以从命名上区分:

表格的多行合计:

  • EnableSummary="true"
  • SummaryPosition="Bottom"
  • SummaryRowCount="3"  

行分组的多行合计:

  • EnableRowGroup="true"
  • DataRowGroupField="EntranceYear"
  • RowGroupSummary="true"
  • RowGroupSummaryRowCount="3"

同理,表格列的合计渲染函数命名也遵循类似的原则:

表格列的合计渲染函数:

  • SummaryRendererFunction="majorSummaryRenderer" 

行分组的合计渲染函数:

  • RowGroupSummaryRendererFunction="majorRowGroupSummaryRenderer"

 

下面来看下合计渲染函数的客户端实现:

表格列:

function majorSummaryRenderer(summaryRowIndex) {
	if (summaryRowIndex == 0) {
		return "最小值:";
	} else if (summaryRowIndex == 1) {
		return "最大值:";
	} else if (summaryRowIndex == 2) {
		return "平均值:";
	}
}

function chineseScoreSummaryRenderer(summaryRowIndex) {
	var grid1 = this, result;

	if (summaryRowIndex == 0) {
		result = grid1.calcSummaryValue('ChineseScore', 'min');
	} else if (summaryRowIndex == 1) {
		result = grid1.calcSummaryValue('ChineseScore', 'max');
	} else if (summaryRowIndex == 2) {
		result = grid1.calcSummaryValue('ChineseScore', 'avg');
	}
	return result;
}

function mathScoreSummaryRenderer(summaryRowIndex) {
	var grid1 = this, result;

	if (summaryRowIndex == 0) {
		result = grid1.calcSummaryValue('MathScore', 'min');
	} else if (summaryRowIndex == 1) {
		result = grid1.calcSummaryValue('MathScore', 'max');
	} else if (summaryRowIndex == 2) {
		result = grid1.calcSummaryValue('MathScore', 'avg');
	}
	return result;
}

 

行分组:

function majorRowGroupSummaryRenderer(summaryRowIndex) {
	if (summaryRowIndex == 0) {
		return "最小值:";
	} else if (summaryRowIndex == 1) {
		return "最大值:";
	} else if (summaryRowIndex == 2) {
		return "平均值:";
	}
}

function chineseScoreRowGroupSummaryRenderer(summaryRowIndex, rowGroupData) {
	var grid1 = this, result;

	if (summaryRowIndex == 0) {
		result = grid1.calcSummaryValue('ChineseScore', 'min', rowGroupData);
	} else if (summaryRowIndex == 1) {
		result = grid1.calcSummaryValue('ChineseScore', 'max', rowGroupData);
	} else if (summaryRowIndex == 2) {
		result = grid1.calcSummaryValue('ChineseScore', 'avg', rowGroupData);
	}
	return result;
}

function mathScoreRowGroupSummaryRenderer(summaryRowIndex, rowGroupData) {
	var grid1 = this, result;

	if (summaryRowIndex == 0) {
		result = grid1.calcSummaryValue('MathScore', 'min', rowGroupData);
	} else if (summaryRowIndex == 1) {
		result = grid1.calcSummaryValue('MathScore', 'max', rowGroupData);
	} else if (summaryRowIndex == 2) {
		result = grid1.calcSummaryValue('MathScore', 'avg', rowGroupData);
	}
	return result;
}

其中 calcSummaryValue 是由FineUI提供的一个计算合计的内置函数。当然,复杂的逻辑你也可以自己弄,合计行的数据你都能拿到。

  

行分组与分页排序 

由于行分组是在客户端实现的,所以我们可以很容易的加上数据库分页和排序。

注意:启用行分组时,不能使用内存分页。

下面看下示例效果(由于代码只是简单的组合两者,就不在此赘述了):

 

 

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

三石出品,必属精品 

posted @ 2020-10-01 15:13  三生石上(FineUI控件)  阅读(427)  评论(0编辑  收藏  举报