【新特性速遞】表格的客戶端合計

FineUIPro/Mvc/Core的下個版本（v6.4.0），我們會爲表格增加客戶端合計功能。

這個也是網友期待的一個功能，在 v6.1.0 版本更新時增加了多行合計的支持，網友 @迷失的二進制就提到這個需求：

https://t.zsxq.com/r72F6UB

是的，6個月過去了，我們不曾忘記，現在你需要的表格客戶端合計來了。

FineUIPro/Mvc/Core v6.4.0 會新增一些服務器端和客戶端屬性方法來支持這個功能：

爲表格增加SummaryRowCount屬性（合計行的行數）。
爲RenderField增加SummaryText、SummaryType、SummaryRendererFunction屬性。
增加客戶端JS函數：calcSummaryValue(columnId, summaryType)。
新增示例：表格控件/合計行/合計行（客戶端）；（客戶端，多行合計）。

先來看下示例效果：

和之前服務器端設置 SummaryData 的界面顯示沒有區別，不過這次只需在前臺設置幾個屬性就好了：

<f:RenderField ColumnID="major" DataField="Major" RendererFunction="renderMajor"
	ExpandUnusedSpace="true" MinWidth="150px" HeaderText="所學專業" SummaryText="合計：">
</f:RenderField>
<f:RenderField Width="100px" DataField="Fee" FieldType="Int" ColumnID="fee" HeaderText="學費" SummaryType="Sum" />
<f:RenderField Width="100px" DataField="Donate" FieldType="Int" ColumnID="donate" HeaderText="捐贈金額" SummaryType="Sum" />

注意，上面的幾個屬性的含義：

SummaryText：合計行文本
SummaryType：合計行類型（可選項爲：Sum，Min，Max，Count，Avg）

當然，僅僅是預定義的幾個SummaryType是遠遠不夠的，我們還支持更強大的 SummaryRendererFunction 和多行合計：

這個示例顯示了 3 個合計行，所以表格的標籤定義需要先指定 SummaryRowCount 屬性：

<f:Grid ID="Grid1" Title="表格" ... EnableSummary="true" SummaryPosition="Bottom" SummaryRowCount="3">

<f:RenderField HeaderText="所學專業" DataField="Major" ColumnID="major" RendererFunction="renderMajor" MinWidth="150" ExpandUnusedSpace="true" SummaryRendererFunction="majorSummaryRenderer" />
<f:RenderField HeaderText="學費" DataField="Fee" ColumnID="fee" Width="80" SummaryRendererFunction="feeSummaryRenderer" />
<f:RenderField HeaderText="捐贈金額" DataField="Donate" ColumnID="donate" Width="80" SummaryRendererFunction="donateSummaryRenderer" />

下面，看下自定義的合計行渲染函數：

function majorSummaryRenderer(summaryRowIndex) {
	if (summaryRowIndex == 0) {
		return "最小值：";
	} else if (summaryRowIndex == 1) {
		return "最大值：";
	} else if (summaryRowIndex == 2) {
		return "合計：";
	}
}

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

	if (summaryRowIndex == 0) {
		result = grid1.calcSummaryValue('fee', 'min');
	} else if (summaryRowIndex == 1) {
		result = grid1.calcSummaryValue('fee', 'max');
	} else if (summaryRowIndex == 2) {
		result = grid1.calcSummaryValue('fee', 'sum');
	}
	// 千分位
	return F.addCommas(result);
}

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

	if (summaryRowIndex == 0) {
		result = grid1.calcSummaryValue('donate', 'min');
	} else if (summaryRowIndex == 1) {
		result = grid1.calcSummaryValue('donate', 'max');
	} else if (summaryRowIndex == 2) {
		result = grid1.calcSummaryValue('donate', 'sum');
	}
	// 千分位
	return F.addCommas(result);
}

這些自定義的渲染函數非常靈活，你可以返回任意需要的HTML字符串。

同時，我們還提供了內置的合計函數，用來對錶格當前頁的數據進行統計：

https://fineui.com/js/api/F.Grid.html#calcSummaryValue