【新特性速遞】為表格內的復選框增加單選框樣式（CheckBoxType）

FineUIPro/Mvc/Core的下個版本（v7.0.0），我們會為表格內的復選框增加單選框樣式。

 

上上個版本中，我們為復選框增加了開關樣式，在編碼實現時，我們只需指定枚舉類型CheckBoxType.Switch即可。

這個版本，我們對CheckBoxType枚舉類型進一步擴充：

public enum CheckBoxDisplayType
{
	/// <summary>
	/// 默認樣式
	/// </summary>
	Default,
	/// <summary>
	/// 開關樣式
	/// </summary>
	Switch,
	/// <summary>
	/// 單選框樣式
	/// </summary>
	Radio
}

 

如果為單獨的復選框控件（CheckBox）指定單選框樣式會顯得很奇怪，不過在表格中就很好理解了。

 

這個示例在之前的版本中就一直存在：https://pro.fineui.com/#/grid/grid_checkall_singleselect.aspx

　　

通過為表格指定如下兩個屬性就能實現單選效果：

• EnableCheckBoxSelect="true"
• EnableMultiSelect="false"

這個版本，我們只需為表格指定如下屬性，就能實現復選框的單選框樣式：

• CheckBoxSelectDisplayType="Radio"

此時的顯示效果：

 

 

對於復選框列CheckBoxField，可以指定DisplayType==CheckBoxType.Radio來啟用單選框樣式。

 

下面通過一個示例來說明應用場景：

這個表格擁有三個復選框列，標簽定義：

<f:CheckBoxField ColumnID="CheckBoxField1" Width="100px" RenderAsStaticField="false" HeaderText="是否在校1" />
<f:CheckBoxField ColumnID="CheckBoxField2" Width="100px" RenderAsStaticField="false" HeaderText="是否在校2" DisplayType="Switch" />
<f:CheckBoxField ColumnID="CheckBoxField3" Width="100px" RenderAsStaticField="false" HeaderText="是否在校3" DisplayType="Radio" />

通過DisplayType來控制顯示的樣式不同：

1. DisplayType="Default"　　
2. DisplayType="Switch"
3. DisplayType="Radio"

然后通過JS代碼來添加同一列的單選邏輯：

<script>
	var grid1ClientID = '<%= Grid1.ClientID %>';

	F.ready(function () {

		var grid1 = F(grid1ClientID);
		var checkboxSelector = '.f-grid-cell .f-grid-checkbox';

		// 注冊復選框的點擊事件
		grid1.el.on('click', checkboxSelector, function (event) {
			var targetEl = $(this), checked = targetEl.hasClass('f-checked');

			// 如果取消復選框選中，則不做處理
			if (checked) {
				var cellEl = targetEl.closest('.f-grid-cell');
				var rowEl = cellEl.closest('.f-grid-row');

				var columnId = cellEl.attr('data-columnid');

				// 當前列的復選框的CSS選擇器
				var columnCheckboxSelector = '.f-grid-cell-' + columnId + checkboxSelector;

				rowEl.siblings().find(columnCheckboxSelector).removeClass('f-checked');
			}
		});
	});
</script>

注意最后一行邏輯，其中rowEl表示當前選中的表格行。如果點擊的是最后一列，我們分解如下：

1. rowEl.siblings()：當前點擊行的所有兄弟行
2. find(columnCheckboxSelector)：選中兄弟行的最后一列的復選框，CSS選擇器為：.f-grid-cell-CheckBoxField3.f-grid-cell .f-grid-checkbox
3. removeClass('f-checked')：去除所有兄弟行最后一列復選框的選中樣式

很明顯，對於這個示例，DisplayType=Radio更能展示開發者的意圖，以便和用戶達成共鳴。

 

 

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

三石出品，必屬精品