Menu

FineUI. Menu

Description:
Examples

菜单通常作为Button、Tool等控件的menu属性挂载（不单独渲染）：

FineUI.create({
	type: 'Button', renderTo: document.body, text: '操作', iconFont: 'bank',
	menu: {
		type: 'Menu',
		items: [{
			type: 'MenuItem', text: '新建', iconFont: 'plus'
		}, {
			type: 'MenuItem', text: '编辑', iconFont: 'edit'
		}, {
			type: 'MenuSeparator'
		}, {
			type: 'MenuItem', text: '删除', iconFont: 'remove'
		}]
	}
});

支持多级嵌套菜单 —— 在子项里再挂menu：

FineUI.create({
	type: 'Button', renderTo: document.body, text: '更多',
	menu: {
		type: 'Menu',
		items: [{
			type: 'MenuItem', text: '导出',
			menu: {
				type: 'Menu',
				items: [
					{ type: 'MenuItem', text: '导出为 Excel' },
					{ type: 'MenuItem', text: '导出为 PDF' },
					{ type: 'MenuItem', text: '导出为 CSV' }
				]
			}
		}, {
			type: 'MenuItem', text: '设置'
		}]
	}
});
Parameters:
Name Type Description
options Object

初始参数

Properties
Name Type Default Description
hidden boolean true

是否隐藏（菜单默认隐藏）
type string 'Menu'

控件类型

Extends

Members

el :jQuery

Description:

  • 控件对应的jQuery节点对象

Inherited From:

控件对应的jQuery节点对象

Type:
  • jQuery

items :Object

Description:

  • 子控件列表

Inherited From:

子控件列表

Type:
  • Object

Methods

getCheckedItem(groupNameopt) → {FineUI.MenuCheckBox}

Description:

  • 获取选中的复选框菜单项

Parameters:
Name Type Attributes Description
groupName string <optional>

分组名称
Returns:

复选框菜单项

Type
FineUI.MenuCheckBox

getCheckedItems(groupNameopt) → {Array.<FineUI.MenuCheckBox>}

Description:

  • 获取选中的复选框菜单项数组

Parameters:
Name Type Attributes Description
groupName string <optional>

分组名称
Returns:

复选框菜单项数组

Type
Array.<FineUI.MenuCheckBox>

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

getTopMenu() → {FineUI.Menu}

Description:

  • 获取顶层菜单

Returns:

顶层菜单

Type
FineUI.Menu

hidePopEl()

Description:

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

Inherited From:

hideTopMenu()

Description:

  • 隐藏顶层菜单

isTopMenu() → {boolean}

Description:

  • 是否顶层菜单

Returns:

是否顶层菜单

Type
boolean

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

Events

beforehide

Description:

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

Inherited From:

beforeshow

Description:

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

Inherited From:

checkchange

Description:

  • 任一子项复选框状态改变时触发（由 Menu 本身触发，不同于 MenuCheckBox 自身的同名事件）

Parameters:
Name Type Description
event jQuery.Event

事件对象
item FineUI.MenuCheckBox

触发事件的复选框菜单项
checked boolean

是否选中

hide

Description:

  • 隐藏控件时触发

Inherited From:

itemcheckchange

Description:

  • [已废弃] 旧版本事件名，新代码请使用 FineUI.Menu#event:checkchange。源码会同时触发两个事件名仅为兼容旧业务代码，未来版本可能移除。

Deprecated:
Parameters:
Name Type Description
event jQuery.Event

事件对象
item FineUI.MenuCheckBox

触发事件的复选框菜单项
checked boolean

是否选中

itemclick

Description:

  • 菜单项点击时触发（替代逐项配置handler的集中处理方案；与 MenuItem 自身的handler互不影响 —— 两者都会触发）

Example

用itemclick集中处理菜单点击（按id分发，比每项写handler更紧凑）：

FineUI.create({
    type: 'Button', renderTo: document.body, text: '操作',
    menu: {
        type: 'Menu',
        items: [
            { type: 'MenuItem', id: 'mNew', text: '新建' },
            { type: 'MenuItem', id: 'mEdit', text: '编辑' },
            { type: 'MenuItem', id: 'mDelete', text: '删除' }
        ],
        listeners: {
            itemclick: function (event, menuItem) {
                switch (menuItem.id) {
                    case 'mNew':    console.log('新建'); break;
                    case 'mEdit':   console.log('编辑'); break;
                    case 'mDelete': console.log('删除'); break;
                }
            }
        }
    }
});
Parameters:
Name Type Description
event jQuery.Event

事件对象
menuItem FineUI.MenuItem

菜单项实例

layout

Description:

  • 布局控件时触发

Inherited From:

remove

Description:

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

Inherited From:

render

Description:

  • 渲染控件时触发

Inherited From:

show

Description:

  • 显示控件时触发

Inherited From: