【新特性速遞】表格行分組（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/

三石出品，必屬精品