【新特性速遞】表格行分組（續）

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/

三石出品，必屬精品