【新特性速递】为表格内的复选框增加单选框样式(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/

三石出品,必属精品 

posted @ 2020-08-26 11:04  三生石上(FineUI控件)  阅读(522)  评论(0编辑  收藏  举报