【新特性速遞】樹表格復選框與級聯選擇（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/

三石出品，必屬精品