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

三生石上(FineUI控制元件)發表於2020-06-23
客戶端

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

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

　　

 

FineUIPro/Mvc/Core v6.4.0 官網示例已更新，現在就可以線上看效果了：

FineUIPro：https://pro.fineui.com/#/grid/grid_summary_client.aspx

FineUIMvc：https://mvc.fineui.com/#/Grid/SummaryClient

FineUICore：https://core.fineui.com/#/Grid/SummaryClient

FineUICore（RazorPages）：https://pages.fineui.com/#/Grid/SummaryClient

 

 

歡迎入夥：https://fineui.com/fans/

三石出品，必屬精品 

相關文章