DropDownList

FineUI.create({
	type: 'DropDownList', renderTo: document.body, fieldLabel: '性别', data: ['全部', '男', '女']
});

FineUI.create({
	type: 'DropDownList', renderTo: document.body, fieldLabel: '城市',
	data: [['bj', '北京'], ['sh', '上海'], ['gz', '广州'], ['sz', '深圳']],
	value: 'sh'
});

FineUI.create({
	type: 'DropDownList', renderTo: document.body, fieldLabel: '城市',
	fields: ['value', 'text', 'enabled'],
	data: [
		['bj', '北京'],                          // 省略第 3 项 → enabled=true
		['sh', '上海（暂不可选）', false],        // 第 3 项 enabled=false → 此项被禁用
		['gz', '广州'],
		['sz', '深圳']
	]
});

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

FineUI.create({
	type: 'DropDownList', renderTo: document.body, fieldLabel: '城市',
	data: ['北京', '上海', '广州'], editable: true, forceSelection: false
});

FineUI.create({
	type: 'DropDownList', renderTo: document.body, fieldLabel: '城市',
	data: [['bj', '北京'], ['sh', '上海']],
	listeners: {
		change: function (event) {
			FineUI.alert('选中值：' + this.getValue() + '，文本：' + this.getText());
		}
	}
});

FineUI.create({
	type: 'DropDownList', renderTo: document.body, fieldLabel: '老师', group: true,
	fields: ['value', 'text', 'group'],
	data: [
		['101', '张萍萍', '材料科学与工程系'],
		['102', '陈飞', '化学系'],
		['103', '董婷婷', '化学系'],
		['104', '康颖颖', '数学系'],
		['105', '彭博', '数学系'],
		['106', '唐超', '物理系']
	]
});

Extends

• FineUI.TriggerBox

Members

bodyEl :jQuery

Description:

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

Inherited From:

• FineUI.Field#bodyEl

Type:

• jQuery

el :jQuery

Description:

• 控件对应的jQuery节点对象

Inherited From:

• FineUI.Component#el

Type:

• jQuery

items :Object

Description:

• 子控件列表

Inherited From:

• FineUI.Container#items

Type:

• Object

Methods

getEncodedText(text) → {string}

Description:

• 获取编码后的字符串

Inherited From:

• FineUI.Component#getEncodedText

Parameters:

Returns:

Type

string

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

Description:

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

Inherited From:

• FineUI.Container#getFormFields

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:

• FineUI.Container#getItem

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:

Returns:

Type

FineUI.Component

getTextByValue(value) → {string}

Description:

• 获取值对应的显示文本

Parameters:

Returns:

Type

string

getValueByText(text) → {string}

Description:

• 获取显示文本对应的值

Parameters:

Returns:

Type

string

hidePopEl()

Description:

• 隐藏弹出框

Overrides:

• FineUI.TriggerBox#hidePopEl

isType(value) → {boolean}

Description:

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

Inherited From:

• FineUI.Base#isType

Example

grid1.isType('panel') // 返回true
grid1.isType('grid')  // 返回true

Parameters:

Returns:

Type

boolean

isUserInput() → {boolean}

Description:

• 是否为用户自行输入值

Returns:

Type

boolean

loadData(data, valueopt)

Description:

• 加载数据（会替换下拉项；常用于级联下拉：在父下拉change事件中调用子下拉的loadData）

Examples

省市县级联：选择省份后刷新城市下拉项：

FineUI.create({
    type: 'DropDownList', id: 'ddlSheng',
    data: [['bj', '北京'], ['shanghai', '上海'], ['guangdong', '广东']],
    listeners: {
        change: function () {
            var province = this.getValue();
            var cityData = getCitiesByProvince(province);
            FineUI.ui.ddlCity.loadData(cityData, '-1');  // 第二个参数指定默认选中
        }
    }
});

仅替换下拉项，不预设选中：

FineUI.ui.ddlCategory.loadData([
    ['fruit', '水果'],
    ['vegetable', '蔬菜']
]);

Parameters:

showPopEl()

Description:

• 显示弹出框

Events

beforehide

Description:

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

Inherited From:

• FineUI.Component#event:beforehide

beforeselect

Description:

• 选中列表项之前触发（返回false则取消选中操作）

Parameters:

beforeshow

Description:

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

Inherited From:

• FineUI.Component#event:beforeshow

blur

Description:

• 输入框失去焦点时触发（常用于失焦校验或失焦联动）

Inherited From:

• FineUI.TextBox#event:blur

Example

失焦触发字段校验（仅校验当前字段，不影响整表）：

FineUI.create({
    type: 'TextBox', fieldLabel: '邮箱', regex: /^[\w.]+@[\w.]+$/,
    listeners: {
        blur: function () {
            this.validate();
        }
    }
});

Parameters:

change

Description:

• 输入框值改变时触发（失焦或回车后；继承到所有 TextBox 派生类如NumberBox/DatePicker/DropDownList）

Inherited From:

• FineUI.TextBox#event:change

Example

响应值变化做联动：

FineUI.create({
    type: 'TextBox', fieldLabel: '关键字',
    listeners: {
        change: function () {
            FineUI.ui.grid1.loadDataUrl('/api/search', { q: this.getValue() });
        }
    }
});

Parameters:

cleariconclick

Description:

• 点击清空图标时触发

Parameters:

enter

Description:

• 输入框获取焦点并按下 ENTER 键时触发（常用于"搜索框回车提交"或"密码框回车登录"）

Inherited From:

• FineUI.TextBox#event:enter

Example

搜索框回车触发搜索（也可改用配置属性enterClickControl声明式实现）：

FineUI.create({
    type: 'TextBox', fieldLabel: '关键字',
    listeners: {
        enter: function () {
            FineUI.ui.btnSearch.click();
        }
    }
});

Parameters:

focus

Description:

• 输入框获取焦点时触发

Inherited From:

• FineUI.TextBox#event:focus

Parameters:

hide

Description:

• 隐藏控件时触发

Inherited From:

• FineUI.Component#event:hide

layout

Description:

• 布局控件时触发

Inherited From:

• FineUI.Component#event:layout

remove

Description:

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

Inherited From:

• FineUI.Component#event:remove

render

Description:

• 渲染控件时触发

Inherited From:

• FineUI.Component#event:render

select

Description:

• 选中列表项时触发

Parameters:

show

Description:

• 显示控件时触发

Inherited From:

• FineUI.Component#event:show

tagclose

Description:

• 关闭某个标签时触发（仅在启用多选标签模式时有效）

Parameters:

trigger1click

Description:

• 点击第一个触发图标时触发

Inherited From:

• FineUI.TriggerBox#event:trigger1click

Parameters:

trigger2click

Description:

• 点击第二个触发图标时触发

Inherited From:

• FineUI.TriggerBox#event:trigger2click

Parameters:

triggerclick

Description:

• 点击触发图标时触发

Inherited From:

• FineUI.TriggerBox#event:triggerclick

Parameters: