FineUI

Classes

Accordion

AccordionPane

Base

Button

ButtonGroup

Calendar

CheckBox

CheckBoxList

Component

Container

DataList

DatePicker

DropDownBox

DropDownList

Field

FileUpload

Form

Grid

GridColumn

GroupPanel

Hidden

HtmlEditor

HyperLink

Image

Label

LinkButton

Menu

MenuCheckBox

MenuItem

MenuItemBase

MenuSeparator

MessageBox

NumberBox

PagingToolbar

Panel

PanelBase

RadioButton

RadioButtonList

Tab

TabStrip

TextArea

TextBox

TimePicker

Tool

Toolbar

ToolbarFill

ToolbarItemBase

ToolbarSeparator

ToolbarText

Tree

TriggerBox

ViewPort

Window

Members

(static) KEY

Description:

• 键盘按键代码

Methods

(static) addCSS(id, content, isCSSFile)

Description:

• 向页面添加CSS内容或者引用CSS文件

Parameters:

(static) addCommas(string) → {string}

Description:

• 添加千分位分隔符

Parameters:

Returns:

Type

string

(static) addDotSeparator(string, dotSeparator, commaSeparator) → {string}

Description:

• 添加小数分隔符

Parameters:

Returns:

Type

string

(static) addJS(id, content, isJSFile)

Description:

• 向页面添加JS内容或者引用JS文件

Parameters:

(static) addMainTab(tabstripInstance, options)

Description:

• 添加选项卡

Parameters:

(static) addMainTabByHref(tabstripInstance, treeInstance, href, activedopt, moveToEndopt)

Description:

• 添加选项卡（在树中查找拥有href的树节点）

Parameters:

(static) alert(options)

Description:

• 弹出提示对话框

Parameters:

(static) beforeAjaxError(callback)

Description:

• 注册AJAX回发失败回调函数（返回false则不执行默认的错误处理）

Example

自定义错误提示框

FineUI.beforeAjaxError(function (data) {
	FineUI.alert('服务器返回错误！');
	return false;
});

Parameters:

(static) beforeAjaxSuccess(callback)

Description:

• 注册AJAX回发成功回调函数（返回false则不执行AJAX响应脚本）

Example

页面跳转前弹出系统确认对话框

FineUI.beforeAjaxSuccess(function (data) {
	// 通过返回的字符串，判断是否即将执行页面跳转
	if (data.indexOf('window.location.href=') === 0) {
		if (!window.confirm('是否执行页面跳转？')) {
			return false; // 继续留在当前页面
		}
	}
});

Parameters:

(static) beforePostBack(listener) → {function}

Description:

• 注册 FineUIJava 普通控件服务端事件发起回发前的监听器。

  本函数只用于补充或替换事件名后面的业务参数。客户端事件名由框架固定，监听器不能指定后台方法； 客户端 listeners 明确返回 false 时，回发会在进入本钩子前取消。

Example

var removeListener = F.beforePostBack(function(targetId, eventType, options) {
    if (targetId === 'btnSave' && eventType === 'click') {
        return { source: 'toolbar' };
    }
});

// 页面不再需要监听时调用
removeListener();

Parameters:

Returns:

Type

function

(static) confirm(options)

Description:

• 弹出确认对话框

Parameters:

(static) cookie(key, value, options)

Description:

• 新增或者修改Cookie

Parameters:

(static) customEvent(eventName, eventArgumentsopt)

Description:

• 触发页面级自定义回发事件（适用于 FineUIPro、FineUICore RazorForms 开发模式与 FineUIJava）。 服务端由 Page_CustomEvent 接收；数组和普通对象自动序列化，0 与 false 会作为明确参数保留。

  等价于 FineUI.doPostBack({ eventName: 事件名, eventArgument: 参数 })。需要用到完整选项时改用 FineUI.doPostBack——FineUIPro 可用 enableAjax、loading 与 success / error / complete，FineUICore 可用 params / fields / complete 等，FineUIJava 中只有 complete 生效。

Example

F.customEvent('Grid1_RowCommand', { rowId: '102', operation: 'delete' });

Parameters:

(static) doPostBack(options)

Description:

• 自定义回发请求

  注：

  • FineUIPro、FineUICore RazorForms 与 FineUIJava 均支持 eventName / eventArgument 页面级自定义回发，后台由 Page_CustomEvent 接收。
  • 在 FineUICore 与 FineUIPro 中，本函数要求后台的返回数据是一段可执行的 JavaScript 代码（不能是 JSON 字符串！）。
  • FineUIPro 使用自身的 WebForms 提交机制，支持 eventName / eventArgument / enableAjax、loading 与 success / error / complete； 不支持 Core 特有的 url / fields / params / disableControl。
  • FineUIJava 提供本函数的兼容实现，但只支持 eventName / eventArgument / eventTarget / complete 四个选项： 回发响应是纯 JSON（不含可执行脚本），其余选项（url / fields / params / success / error / disableControl / enableAjaxLoading / ajaxLoadingType / ajaxLoadingText / ajaxLoadingMaskText / showAjaxLoadingMaskText）均不生效； eventTarget 非空时只同步控件状态、不触发后台事件。FineUIJava 的普通控件事件由框架根据标签声明自动发起， 请求提交到当前页面 URL，只携带控件标识和客户端事件名；后台方法名只保留在服务端事件映射中。 在 FineUIJava 中触发页面级自定义回发，推荐直接用 FineUI.customEvent。

  参考示例：

  • 自定义回发（F.doPostBack）
  • 自定义回发（F.customEvent）
  • 自定义回发动画

  参考文档：

  • 自定义回发（F.doPostBack）
  • 更好用的自定义回发（F.customEvent）
  • 普通控件回发与服务端事件映射

Examples

function getPressedInfo(btngroup) {
	var result = {
		id: btngroup.id,
		pressed: []
	};
	$.each(btngroup.items, function (index, btn) {
		if (btn.isPressed()) {
			result.pressed.push(btn.getText());
		}
	});
	return FineUI.toJSON(result);
}

FineUI.doPostBack({
	url: '/Button/ButtonGroupPress/ButtonGroup_PressChanged',
	params: {
		pressedInfo: getPressedInfo(FineUI.ui.ButtonGroup3)
	}
});

FineUI.doPostBack({
	url: '/Other/FormAjaxComplete/onForm1Submit',
	fields: 'Form1',
	params: {
		key1: 'value1',
		key2: {
			'sub1': 'sub-value1',
			'sub2': 'sub-value2'
		}
	},
	enableAjaxLoading: false, // 不显示回发请求动画
	complete: function (data) {
		// 回发请求结束回调函数
	}
});

eventName 与 eventArgument 的合成规则按 eventTarget 分两支；非空 eventTarget 的手工控件回发只适用于 FineUICore RazorForms：

// eventTarget 留空 —— 页面级自定义回发，由后台 Page_CustomEvent 接收。
// 参数会被 URL 编码（后台会解码一次），所以参数里带 $ 也不会被误当分隔符。
// 下面两种写法等价，F.customEvent 就是这个用法的简化形式：
FineUI.doPostBack({
	eventName: 'GetCheckedNodes',
	eventArgument: { rowId: '102', operation: 'delete' }
});

F.customEvent('GetCheckedNodes', { rowId: '102', operation: 'delete' });


// eventTarget 非空 —— FineUICore RazorForms 手工触发普通控件后台事件。
// Pro、Core RazorForms 与 Java 的框架自动回发都使用同一线格式：第一段是 F.js 客户端事件名，
// 后面才是业务参数；但 Pro 的 F.doPostBack 始终回发 PageManager，Java 的普通控件事件也不向
// 公开 F.doPostBack 暴露入口，因此这两个产品的业务代码不要照抄下面写法。
// 参数原样拼接、不编码，因此可以带多段（如 '102$0'）。
// 注意两点：① 还要用 url 指定后台的事件处理方法名，否则后台找不到方法；
//          ② 各段内不能出现 $ —— 本支不编码，后台按 $ 原样分段，多出来的 $ 会让参数错位。
//             参数可能含 $ 时请留空 eventTarget 走自定义回发，那一支会编码。
// 下面两种写法等价：
FineUI.doPostBack({
	url: 'Grid1_RowClick',
	eventTarget: 'Grid1',
	eventName: 'rowclick',
	eventArgument: '102$0'
});

FineUI.doPostBack({
	url: 'Grid1_RowClick',
	eventTarget: 'Grid1',
	eventArgument: 'rowclick$102$0'   // 不给 eventName 时，eventArgument 就是已合成的完整参数串
});

Parameters:

(static) endsWith(value, source) → {boolean}

Description:

• 判断一个字符串是否以某个字符串结束

Parameters:

Returns:

Type

boolean

(static) formatDate(value, format) → {Date}

Description:

• 将日期对象转换为字符串

Example

日期格式规则请参考：FineUI.parseDate

Parameters:

Returns:

Type

Date

(static) formatNumber(number, format, trimZeroopt) → {string}

Description:

• 将数字格式化为字符串

Example

// 标准格式（小数位固定，不足补零）
FineUI.formatNumber(12345.6789, 'N2');    // "12,345.68"
FineUI.formatNumber(12345.6789, 'F2');    // "12345.68"
FineUI.formatNumber(0.1234, 'P2');        // "12.34%"
FineUI.formatNumber(12345.6789, 'E2');    // "1.23E+4"
FineUI.formatNumber(123, 'D5');           // "00123"

// 尾零省略（第三个参数传入 true）
FineUI.formatNumber(8500,    'N2', true);   // "8,500"    （原本 "8,500.00"，尾零省略）
FineUI.formatNumber(8500.1,  'N2', true);   // "8,500.1"  （原本 "8,500.10"，尾零省略）
FineUI.formatNumber(8500.75, 'N2', true);   // "8,500.75" （无尾零，保持不变）
FineUI.formatNumber(5,       'F2', true);   // "5"        （原本 "5.00"，尾零省略）
FineUI.formatNumber(0.5,     'P2', true);   // "50%"      （原本 "50.00%"，尾零省略）
FineUI.formatNumber(0.123,   'P2', true);   // "12.3%"    （原本 "12.30%"，尾零省略）
FineUI.formatNumber(10000,   'E2', true);   // "1E+4"     （原本 "1.00E+4"，尾零省略）
FineUI.formatNumber(15000,   'E2', true);   // "1.5E+4"   （原本 "1.50E+4"，尾零省略）

Parameters:

Returns:

Type

string

(static) formatString(form, …param)

Description:

• 格式化字符串

Parameters:

(static) getActiveWindow() → {FineUI.Window}

Description:

• 获取当前激活的窗体对象

Returns:

Type

FineUI.Window

(static) getHidden(fieldId) → {string}

Description:

• 获取隐藏字段的值（）

Parameters:

Returns:

Type

string

(static) getType(typeName) → {object}

Description:

• 获取类型字符串对应的类型（例如从字符串 'tabstrip' 获取类型 FineUI.TabStrip）

Parameters:

Returns:

Type

object

(static) hasHScrollbar(el) → {boolean}

Description:

• 是否存在水平滚动条

Parameters:

Returns:

Type

boolean

(static) hasVScrollbar(el) → {boolean}

Description:

• 是否存在垂直滚动条

Parameters:

Returns:

Type

boolean

(static) htmlDecode(value) → {string}

Description:

• HTML解码

Parameters:

Returns:

Type

string

(static) htmlEncode(value) → {string}

Description:

• HTML编码

Parameters:

Returns:

Type

string

(static) initTreeTabStrip(treeMenu, mainTabStrip, options)

Description:

• 初始化官网示例框架（左侧树与右侧选项卡面板交互）

Example

FineUI.initTreeTabStrip(FineUI.ui.Tree1, FineUI.ui.TabStrip1, {
    maxTabCount: 10,
    maxTabMessage: '请先关闭一些选项卡（最多允许打开 10 个）！'
});

Parameters:

(static) isARR(value) → {boolean}

Description:

• 测试对象是否为数组

Parameters:

Returns:

Type

boolean

(static) isBOO(value) → {boolean}

Description:

• 测试对象是否为布尔型

Parameters:

Returns:

Type

boolean

(static) isDAT(value) → {boolean}

Description:

• 测试对象是否为日期对象

Parameters:

Returns:

Type

boolean

(static) isELE(value) → {boolean}

Description:

• 测试对象是否为DOM节点元素

Parameters:

Returns:

Type

boolean

(static) isEMP(value) → {boolean}

Description:

• 测试对象是否为空（undefined, null 或者 空字符串）

Parameters:

Returns:

Type

boolean

(static) isEOBJ(value) → {boolean}

Description:

• 测试对象是否为空对象（不包含任何属性）

Parameters:

Returns:

Type

boolean

(static) isFUN(value) → {boolean}

Description:

• 测试对象是否为函数

Parameters:

Returns:

Type

boolean

(static) isNAN(value) → {boolean}

Description:

• 测试对象是否为NaN

Parameters:

Returns:

Type

boolean

(static) isNUM(value) → {boolean}

Description:

• 测试对象是否为数字

Parameters:

Returns:

Type

boolean

(static) isPOBJ(value) → {boolean}

Description:

• 测试对象是否为纯粹对象（通过 {} 或者 new Object 创建的对象）

Parameters:

Returns:

Type

boolean

(static) isSTR(value) → {boolean}

Description:

• 测试对象是否为字符串

Parameters:

Returns:

Type

boolean

(static) isUND(value) → {boolean}

Description:

• 测试对象是否为undefined或者null

Parameters:

Returns:

Type

boolean

(static) noAnimation(fn)

Description:

• 回调函数中不进行动画操作

Parameters:

(static) noConflict()

Description:

• 释放window.F命名空间，以便其他脚本可以使用它

(static) noEvent(fn)

Description:

• 回调函数中不触发事件

Parameters:

(static) noLayout(fn)

Description:

• 回调函数中不进行布局操作

Parameters:

(static) noValidate(fn)

Description:

• 回调函数中不验证表单字段

Parameters:

(static) notify(options)

Description:

• 弹出通知对话框

Parameters:

(static) parseDate(value, format) → {Date}

Description:

• 将字符串转换为日期对象

Examples

// 基本日期解析
FineUI.parseDate('2023-12-25', 'yyyy-MM-dd');        
// 返回: 2023年12月25日

FineUI.parseDate('25/12/2023', 'dd/MM/yyyy');        
// 返回: 2023年12月25日

FineUI.parseDate('Dec 25, 2023', 'MMM dd, yyyy');    
// 返回: 2023年12月25日

// 日期时间解析
FineUI.parseDate('2023-12-25 14:30:45', 'yyyy-MM-dd HH:mm:ss');
// 返回: 2023年12月25日 14:30:45

FineUI.parseDate('12/25/2023 02:30', 'MM/dd/yyyy hh:mm');
// 返回: 2023年12月25日 14:30:00

FineUI.parseDate('December 25, 2023', 'MMMM dd, yyyy');
// 返回: 2023年12月25日

// 短格式和缩写格式
FineUI.parseDate('23-12-25', 'yy-M-d');              
// 返回: 2023年12月25日

FineUI.parseDate('12/25/23', 'M/d/yy');              
// 返回: 2023年12月25日

// 时间格式解析
FineUI.parseDate('14:30', 'HH:mm');                  
// 返回: 今天14:30:00

FineUI.parseDate('14:30:45', 'H:m:s');               
// 返回: 今天14:30:45

Parameters:

Returns:

Type

Date

(static) parseJSON(value) → {Object}

Description:

• 将JSON字符串转换为JavaScript对象

Parameters:

Returns:

Type

Object

(static) progressHtml(value, options)

Description:

• 生成进度条HTML片段

Parameters:

(static) prompt(options)

Description:

• 弹出输入对话框

Parameters:

(static) queryString(name, urlopt) → {string}

Description:

• 获取URL中的参数值

Parameters:

Returns:

Type

string

(static) rateEvents(container, callback)

Description:

• 注册评分事件

Parameters:

(static) rateHtml(value, options)

Description:

• 生成评分HTML片段

Parameters:

(static) rawHtml(value, …param) → {object}

Description:

• 声明一段“可信 HTML”。控件的文本类属性（如 text、title、tooltip 等）默认会做 HTML 转义（防 XSS）， 当你确信某段 HTML 可信、需要原样输出（不转义）时，用它包裹后赋给对应属性即可。 详见文档：安全策略（用 RawHtml / F.rawHtml 安全输出 HTML）

Example

// 用法1：创建控件时，把带 HTML 的文本声明为可信，原样输出（不转义）
F.create({ type: 'Button', text: F.rawHtml('<i class="f-icon f-iconfont f-iconfont-add"></i> 新增') });

// 用法2：运行时调用控件方法更新文本，同样用 F.rawHtml 包裹
F.ui.label1.setText(F.rawHtml('<b>已保存</b>'));

// 用法3：菜单项、面板标题等文本类属性通用
F.create({ type: 'MenuItem', text: F.rawHtml('<span class="hot">热门</span> 推荐') });

// 特例：表格列渲染函数 renderer 的返回值本就原样输出（不转义），故【无需】用 F.rawHtml 包裹，
// 直接返回 HTML 字符串即可；因为不转义，其中若含用户数据务必先自行 F.htmlEncode
F.create({ type: 'Grid', columns: [{
    field: 'status',
    renderer: function (value) { return '<span class="tag">' + F.htmlEncode(value) + '</span>'; }
}] });

// 用法5：模板 + 用户数据——先对用户数据 HTML 编码，再用 {0}、{1} 占位放进可信 HTML（防 XSS）
F.rawHtml('<b>{0}</b>：{1}', F.htmlEncode(userName), F.htmlEncode(userInput));

// 反例：不要把用户输入直接包成可信 HTML（会导致 XSS）
// F.create({ type: 'Label', text: F.rawHtml(userInput) });  // ❌ 危险

Parameters:

Returns:

Type

object

(static) ready(callback)

Description:

• 注册页面渲染完毕回调函数

Parameters:

(static) removeCommas(string) → {string}

Description:

• 移除千分位分隔符

Parameters:

Returns:

Type

string

(static) removeCookie(key, options)

Description:

• 删除Cookie

Parameters:

(static) removeDotSeparator(string, dotSeparator, commaSeparator) → {string}

Description:

• 移除小数分隔符

Parameters:

Returns:

Type

string

(static) removeHidden(fieldId)

Description:

• 删除隐藏字段（）

Parameters:

(static) reset(containerId)

Description:

• 重置容器内的全部表单字段

Parameters:

(static) resolveUrl(url) → {string}

Description:

• 将「相对 Web 根/子应用根」的路径解析为客户端可用的完整 URL。 内部基于 FineUI.baseUrl 拼接，调用者无需关心 baseUrl 是否以 / 结尾，也无需关心页面部署在站点根还是子目录。 绝对 URL（http(s):// 、协议相对 // 、data:、blob: 等）原样返回；否则去掉前导的 ~ 和 / 后拼到 baseUrl 之后。

Parameters:

Returns:

Type

string

(static) setHidden(fieldId, fieldValue)

Description:

• 设置隐藏字段的值（）

Parameters:

(static) smartLayout(fn)

Description:

• 回调函数执行完毕后再进行布局操作

Parameters:

(static) startsWith(value, source) → {boolean}

Description:

• 判断一个字符串是否以某个字符串开头

Parameters:

Returns:

Type

boolean

(static) toJSON(value) → {string}

Description:

• 将JavaScript对象转换为JSON字符串

Parameters:

Returns:

Type

string

(static) ui(options) → {FineUI.Component}

Description:

• 创建控件实例

Parameters:

Returns:

Type

FineUI.Component

(static) urlDecode(url) → {string}

Description:

• URL解码

Parameters:

Returns:

Type

string

(static) urlEncode(url) → {string}

Description:

• URL编码

Parameters:

Returns:

Type

string

(static) validateForm(formId, optionsopt) → {boolean}

Description:

• 验证单个表单——FineUI.validateForms 的单表单形式，参数与返回值完全一致。

Example

验证一个表单：

if (FineUI.validateForm('form1')) {
	FineUI.alert('表单验证通过');
}

Parameters:

Returns:

Type

boolean

(static) validateForms(formIds, optionsopt) → {boolean}

Description:

• 验证多个表单，验证失败时弹出提示对话框并把焦点定位到第一个非法字段。

  大多数场景不需要手工调用：按钮、工具图标、菜单项、链接按钮都有 validateForm / validateForms 属性，点击时会自动验证、不通过就不再执行后续逻辑 （见 FineUI.Button）。本方法用于没有控件可挂的场景，例如自定义回发前的手工校验。

Examples

验证两个表单，失败时用简洁样式的提示框：

if (FineUI.validateForms(['form1', 'form2'], { messageBoxPlain: true })) {
	// 全部通过后才做的事
}

提示框弹到顶层窗口（本页处于 IFrame 中时常用）：

FineUI.validateForms(['form1'], { target: '_top' });

只想拿验证结果、不弹提示框：

if (!FineUI.validateForms(['form1'], { messageBox: false })) {
	// 自行处理
}

Parameters:

Returns:

Type

boolean

(static) windowResize(fn)

Description:

• 注册页面大小改变事件（延迟 500 毫秒触发）

Parameters: