NumberBox

FineUI. NumberBox

new NumberBox(options)

Description:
Examples

创建基础数字输入框，increment设置增减步长：

FineUI.create({
	type: 'NumberBox', renderTo: document.body, fieldLabel: '数量', value: 1, increment: 1
});

使用noDecimal禁止小数、noNegative禁止负数、minValue/maxValue限制范围：

FineUI.create({
	type: 'NumberBox', renderTo: document.body, fieldLabel: '年龄',
	noDecimal: true, noNegative: true, minValue: 0, maxValue: 150
});

使用commas启用千分位，numberPrefix/numberSuffix添加前后缀：

FineUI.create({
	type: 'NumberBox', renderTo: document.body, fieldLabel: '金额',
	value: 12345.67, commas: true, numberPrefix: '¥', decimalPrecision: 2
});

使用displayType: 'progress'显示为进度条：

FineUI.create({
	type: 'NumberBox', renderTo: document.body, fieldLabel: '进度', value: 60,
	minValue: 0, maxValue: 100, displayType: 'progress', progressTextVisible: true, numberSuffix: '%'
});

使用displayType: 'rate'显示为评分控件：

FineUI.create({
	type: 'NumberBox', renderTo: document.body, fieldLabel: '评分', value: 3.5,
	displayType: 'rate', rateAllowHalf: true, rateCount: 5
});
Parameters:
Name Type Description
options Object

初始参数

Properties
Name Type Default Description
noDecimal boolean false

禁止输入小数（默认允许小数）
noNegative boolean false

禁止输入负数（默认允许负数）
minValue number

最小值
maxValue number

最大值
decimalPrecision number 2

允许小数时显示精度（小数点后的位数）
increment number 1

每次增加或减少的数值
commas boolean false

是否启用千分位
round boolean true

是否启用四舍五入
trimEndZero boolean true

是否去除小数位后面的零
dotSeparator string '.'

小数分隔符（默认为点号）
commaSeparator string ','

千分位分隔符（默认为逗号）
numberPrefix string ''

数字前缀
numberSuffix string ''

数字后缀
displayType string 'default'

数字输入框的显示类型（default, progress, rate）
progressHeight number

进度条的高度
progressTextVisible boolean false

是否显示进度条文本
progressTextInside boolean false

是否将进度条文本显示在进度条内部
rateAllowClear boolean true

是否允许通过点击来清除评分
rateAllowHalf boolean false

是否允许半星评分
rateIconFont string ''

评分图标字体
rateIconFontCls string ''

自定义评分图标字体的样式类
rateCharacter string ''

自定义评分字符
rateCount number 5

评分图标的个数
rateTextVisible boolean false

是否显示评分文本
rateTextRenderer function

自定义评分文本的渲染函数
triggerType string 'stack'

数字输入框触发图标的类型（stack, tile, separate）
type string 'NumberBox'

控件类型

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

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

Events

beforehide

Description:

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

Inherited From:

beforeshow

Description:

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

Inherited From:

blur

Description:

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

Inherited From:
Example

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

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

事件对象

change

Description:

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

Inherited From:
Example

响应值变化做联动：

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

事件对象

enter

Description:

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

Inherited From:
Example

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

FineUI.create({
    type: 'TextBox', fieldLabel: '关键字',
    listeners: {
        enter: function () {
            FineUI.ui.btnSearch.click();
        }
    }
});
Parameters:
Name Type Description
event jQuery.Event

事件对象

focus

Description:

  • 输入框获取焦点时触发

Inherited From:
Parameters:
Name Type Description
event jQuery.Event

事件对象

hide

Description:

  • 隐藏控件时触发

Inherited From:

layout

Description:

  • 布局控件时触发

Inherited From:

remove

Description:

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

Inherited From:

render

Description:

  • 渲染控件时触发

Inherited From:

show

Description:

  • 显示控件时触发

Inherited From:

trigger1click

Description:

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

Inherited From:
Parameters:
Name Type Description
event jQuery.Event

事件对象

trigger2click

Description:

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

Inherited From:
Parameters:
Name Type Description
event jQuery.Event

事件对象

triggerclick

Description:

  • 点击触发图标时触发

Inherited From:
Parameters:
Name Type Description
event jQuery.Event

事件对象