【新特性速遞】樹表格核取方塊與級聯選擇（TreeCheckBox，TreeCascadeCheck）

FineUIPro/Mvc/Core的下個版本（v7.0.0），我們會為樹表格增加核取方塊和級聯選擇支援。

 

為了支援這個新特性，我們首先需要對錶格控制元件進行增強：

• 為表格控制元件增加TreeCheckBox、TreeOnlyLeafCheck、TreeOnlyFolderCheck、TreeCascadeCheck屬性。
• 為表格行增加TreeNodeCheckBox、TreeNodeChecked屬性。

 

基本用法

下面透過一個示例看下樹表格核取方塊的基本用法：

<f:Grid ID="Grid1" IsFluid="true" CssClass="blockpanel" ShowBorder="true" ShowHeader="true" Title="樹表格" runat="server" 
	EnableCollapse="false" DataKeyNames="Id,Name"
	EnableTree="true" TreeColumn="Name" DataIDField="Id" DataParentIDField="ParentId" DataTextField="Name" TreeCheckBox="true">
	<Columns>
		<f:RowNumberField />
		<f:BoundField ColumnID="Name" ExpandUnusedSpace="true" MinWidth="150px" DataField="Name" HeaderText="名稱" />
		<f:BoundField Width="100px" DataField="Type" HeaderText="型別" />
		<f:BoundField Width="100px" DataField="Size" HeaderText="大小" />
		<f:BoundField Width="150px" DataField="ModifyDate" DataFormatString="{0:yyyy-MM-dd}" HeaderText="修改日期" />
	</Columns>
</f:Grid>

相比普通的樹表格，只是多了一個TreeCheckBox=true屬性，顯示效果：

　　

如何在後臺獲取選中的核取方塊呢？

我們貼心的為開發人員準備了GetCheckedRows方法，可以直接獲取核取方塊處於選中狀態的表格行ID：

protected void btnGetCheckedValues_Click(object sender, EventArgs e)
{
	GridRow[] rows = Grid1.GetCheckedRows();
	if (rows.Length > 0)
	{
		List<string> checkedTexts = new List<string>();
		foreach (GridRow row in rows)
		{
			checkedTexts.Add(row.RowText);
		}
		labResult.Text = "核取方塊選中的值：<ul><li>" + String.Join("</li><li>", checkedTexts) + "</li></ul>";
	}
	else
	{
		labResult.Text = "沒有核取方塊被選中";
	}
}

　　

########################################################################

如果你在使用FineUIMvc/Core，則需要自行將核取方塊處於選中狀態的表格行傳入後臺：

<f:Button ID="btnGetCheckedValues" Text="獲取選中的核取方塊" OnClick="@Url.Handler("btnGetCheckedValues_Click")" OnClickParameter1="@(new Parameter("checkedRows", "getCheckedRows()"))"></f:Button>

　　

function getCheckedRows() {
	var result = [];

	var checkedRows = F.ui.Grid1.getCheckedRows(true);
	if (checkedRows.length) {
		$.each(checkedRows, function (index, row) {
			result.push({
				id: row.id,
				text: row.text
			});
		});
	}

	return F.toJSON(result);
}

########################################################################　　

 

隱藏指定行的核取方塊

如果需要隱藏指定行的核取方塊，則需要在RowDataBound中處理。如果你之前用過樹表格，會發現這個操作和【展開指定行】非常類似。

先看下示例效果：

這個樹表格預設隱藏【basic】和【res】兩個表格行的核取方塊。

 

頁面標籤：

<f:Grid ID="Grid1" IsFluid="true" CssClass="blockpanel" ShowBorder="true" ShowHeader="true" Title="樹表格" runat="server" 
	EnableCollapse="false" DataKeyNames="Id,Name"
	EnableTree="true" TreeColumn="Name" DataIDField="Id" DataParentIDField="ParentId" DataTextField="Name" TreeCheckBox="true"
　　 　　 OnRowDataBound="Grid1_RowDataBound" >
	<Columns>
		......
	</Columns>
</f:Grid>

標籤定義中多了 OnRowDataBound 定義，後臺程式碼：

protected void Grid1_RowDataBound(object sender, GridRowEventArgs e)
{
	if (e.RowID == "50" || e.RowID == "60")
	{
		e.TreeNodeCheckBox = false;
	}
}

其中，50和60分別對應於兩個表格行的行ID。

 

########################################################################

如果你在使用FineUIMvc/Core，因為表格沒有後臺的資料繫結事件，需要在前臺處理：

<f:Grid ID="Grid1" IsFluid="true" CssClass="blockpanel" ShowBorder="true" ShowHeader="true" Title="樹表格" 
	DataIDField="Id" DataTextField="Name" DataSource="@DataSourceUtil.GetTreeDataTable()" 
	EnableTree="true" TreeColumn="Name" DataParentIDField="ParentId" TreeCheckBox="true" 
	RowDataBoundFunction="onGrid1RowDataBound">
	<Columns>
		......
	</Columns>
</f:Grid>

前臺資料繫結（JavaScript程式碼）：

<script>
	function onGrid1RowDataBound(rowData) {
		var rowId = rowData.id;

		if (rowId == "50" || rowId == "60") {
			rowData.checkbox = false;
		}
	}
</script>

########################################################################　　

 

核取方塊的級聯選擇

只需要給樹表格增加TreeCascadeCheck="true"，即可啟用級聯選擇。頁面標籤就不重複了，直接看下頁面顯示效果：

後臺獲取核取方塊狀態的程式碼和上面的示例一模一樣，也不再重複了。

 

最後來一張動圖：

 

 

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

三石出品，必屬精品