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

三生石上(FineUI控制元件)發表於2020-08-26

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

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

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

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

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

  • CheckBoxSelectDisplayType="Radio"

此時的顯示效果：

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

 

 

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

 

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

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

這個表格擁有三個核取方塊列，標籤定義：

<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/

三石出品，必屬精品 

相關文章