CheckBoxList

FineUI. CheckBoxList

new CheckBoxList(options)

Description:
Examples

创建复选框列表，data提供 [value, text] 二维数组，value设置预选值：

FineUI.create({
	type: 'CheckBoxList', renderTo: document.body, fieldLabel: '兴趣',
	data: [['music', '音乐'], ['sport', '运动'], ['read', '阅读'], ['travel', '旅行']],
	value: ['music', 'read']
});

使用columnNumber控制每行列数，columnVertical: true纵向排列：

FineUI.create({
	type: 'CheckBoxList', renderTo: document.body, fieldLabel: '选项', width: 400,
	data: ['选项一', '选项二', '选项三', '选项四', '选项五', '选项六'],
	columnNumber: 3
});

使用displayType: 'switch'显示为开关样式：

FineUI.create({
	type: 'CheckBoxList', renderTo: document.body, fieldLabel: '通知',
	data: [['email', '邮件'], ['sms', '短信'], ['push', '推送']],
	displayType: 'switch'
});

禁用单个选项：data数组项的第 3 个元素对应默认 fields=['value','text','enabled','attrs'] 中的 enabled 字段，设为 false 即禁用该项（短数据项可省略后续字段，使用默认值 enabled=true）：

FineUI.create({
	type: 'CheckBoxList', renderTo: document.body, fieldLabel: '兴趣',
	data: [
		['music', '音乐'],                       // 省略第 3 项 → enabled=true
		['sport', '运动（暂不可选）', false],     // 第 3 项 enabled=false → 此项被禁用
		['read', '阅读'],
		['travel', '旅行（暂不可选）', false]
	]
});
Parameters:
Name Type Description
options Object

初始参数

Properties
Name Type Default Description
value Array.<string>

选中的值
fields Array.<string> ['value','text','enabled','attrs'

数据源对应的字段
data Array.<string>

数据源（一维数组：['可选项1','可选项2','可选项3']，或者二维数组：[['value1','可选项1'], ['value2','可选项2'], ['value3','可选项3']]）
columnNumber string | number 'auto'

几列显示
autoColumnWidth string | number false

自适应列宽度（默认所有列宽度相同）
columnVertical boolean false

是否纵向排列
required boolean false

是否必填项
displayType string 'default'

复选框的显示类型（可选项为：default, switch, radio）
switchTextVisible boolean false

是否显示开关类型的文本
switchOnText string ''

开关类型的选中文本
switchOffText string ''

开关类型的未选中文本
type string 'CheckBoxList'

控件类型

Extends

Members

bodyEl :jQuery

Description:

  • 字段主体对应的jQuery节点对象

Inherited From:

字段主体对应的jQuery节点对象

Type:
  • jQuery

el :jQuery

Description:

  • 控件对应的jQuery节点对象

Inherited From:

控件对应的jQuery节点对象

Type:
  • jQuery

items :Object

Description:

  • 子控件列表

Inherited From:

子控件列表

Type:
  • Object

Methods

getEncodedText(text) → {string}

Description:

  • 获取编码后的字符串

Inherited From:
Parameters:
Name Type Description
text string

原始字符串
Returns:

编码后的字符串

Type
string

getFormFields() → {Array.<FineUI.Field>}

Description:

  • 获取容器内（深度遍历）所有表单字段实例（FineUI.Field的子类，如TextBox/NumberBox/DatePicker等）

Inherited From:
Example

遍历表单全部字段，序列化为 name → value 的对象（用于自定义 ajax 提交；字段未声明name时改用id）：

var values = {};
FineUI.ui.form1.getFormFields().forEach(function (field) {
    values[field.name || field.id] = field.getValue();
});
// values 形如：{ tbxUserName: 'FineUIPro', numberAge: 30, ... }
Returns:

表单字段数组

Type
Array.<FineUI.Field>

getItem(value) → {FineUI.Component}

Description:

  • 获取子控件（按索引/标识符/匹配函数查找；通常配合items无显式 id 的场景，比按FineUI.ui[id]更精准）

Inherited From:
Examples

按索引取第一个子控件：

var firstChild = FineUI.ui.toolbar1.getItem(0);

按 id 取子控件：

var btn = FineUI.ui.toolbar1.getItem('btnSave');

按匹配函数找第一个匹配的子控件（函数对每项返回 true 即匹配）：

var btn = FineUI.ui.toolbar1.getItem(function (item) {
    return item.type === 'Button' && item.text === '保存';
});
Parameters:
Name Type Description
value number | string | function

子控件索引、标识符或者匹配函数
Returns:

子控件实例

Type
FineUI.Component

getTextByValue(value) → {string}

Description:

  • 获取值对应的显示文本

Parameters:
Name Type Description
value string

值
Returns:

值对应的显示文本

Type
string

hidePopEl()

Description:

  • 隐藏容器内的所有弹出框

Inherited From:

isType(value) → {boolean}

Description:

  • 检测当前实例是否指定的控件类型

Inherited From:
Example
grid1.isType('panel') // 返回true
grid1.isType('grid')  // 返回true
Parameters:
Name Type Description
value Object

控件类型
Returns:

如果当前实例是指定的控件类型，返回true；否则返回false

Type
boolean

loadData(data)

Description:

  • 加载数据

Parameters:
Name Type Description
data Array.<Object>

二维数组（[['value1','选项一'],['value2','选项二'],['value3','选项三']]）

Events

beforehide

Description:

  • 隐藏控件之前触发（返回false则取消隐藏操作）

Inherited From:

beforeshow

Description:

  • 显示控件之前触发（返回false则取消显示操作）

Inherited From:

change

Description:

  • 复选框列表选中状态改变时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象
item FineUI.CheckBox

触发事件的复选框对象
checked boolean

是否处于按下状态

hide

Description:

  • 隐藏控件时触发

Inherited From:

layout

Description:

  • 布局控件时触发

Inherited From:

remove

Description:

  • 移除控件时触发（调用 remove() 时，控件 DOM 被销毁之前触发；可用于清理外部资源 / 解绑全局事件）

Inherited From:

render

Description:

  • 渲染控件时触发

Inherited From:

show

Description:

  • 显示控件时触发

Inherited From: