GridColumn

FineUI. GridColumn

表格列控件

Constructor

new GridColumn(options)

Examples

表格列作为FineUI.Grid的columns子项使用，field对应数据中的字段名：

FineUI.create({
	type: 'Grid', renderTo: document.body, width: 600, height: 250, title: '员工列表',
	columns: [
		{ text: '编号', field: 'id', width: 80 },
		{ text: '姓名', field: 'name', flex: 1 },
		{ text: '部门', field: 'dept', flex: 1 }
	],
	data: [
		{ id: 1, name: '张三', dept: '研发部' },
		{ id: 2, name: '李四', dept: '设计部' }
	]
});

使用renderer自定义单元格渲染（返回字符串或 HTML）：

FineUI.create({
	type: 'Grid', renderTo: document.body, width: 600, height: 250,
	columns: [
		{ text: '姓名', field: 'name' },
		{
			text: '状态', field: 'status', width: 100,
			renderer: function (value) {
				var color = value === '在职' ? 'green' : 'gray';
				return '<span style="color:' + color + '">' + value + '</span>';
			}
		}
	],
	data: [{ name: '张三', status: '在职' }, { name: '李四', status: '离职' }]
});

使用columnType预设特定列类型（rownumberfield/checkboxfield/templatefield 等）：

FineUI.create({
	type: 'Grid', renderTo: document.body, width: 600, height: 250,
	columns: [
		{ columnType: 'rownumberfield' },                    // 行号列
		{ text: '姓名', field: 'name' },
		{ text: '在校', field: 'atSchool', columnType: 'checkboxfield' }  // 复选框列
	],
	data: [{ name: '张三', atSchool: true }, { name: '李四', atSchool: false }]
});

使用summaryRenderer显示合计行（配合 Grid 的 showSummary: true），this指向 Grid 实例，calcSummaryValue(field, type)可计算 sum/min/max/avg/count：

FineUI.create({
	type: 'Grid', renderTo: document.body, width: 600, height: 250, showSummary: true,
	columns: [
		{ text: '产品', field: 'product', summaryRenderer: function () { return '合计：'; } },
		{
			text: '销量', field: 'count',
			summaryRenderer: function (summaryRowIndex) {
				return this.calcSummaryValue('count', 'sum');
			}
		}
	],
	data: [{ product: '产品 A', count: 10 }, { product: '产品 B', count: 25 }]
});
Parameters:
Name Type Description
options Object

初始参数

Properties
Name Type Default Description
text string ''

标题栏显示的文字
headerTooltip string ''

标题栏文字的提示文本
headerTooltipType string 'qtip'

标题栏文字的提示文本类型（可选项为：qtip, title）
headerTooltipPosition string ''

标题栏文字的提示信息位置（仅在headerTooltipType=qtip时有效）（可选项为：'', top, topstart, topend, bottom, bottomstart, bottomend, left, leftstart, leftend, right, rightstart, rightend）
showTooltip boolean false

是否显示单元格文字的提示文本
tooltipType string 'qtip'

单元格文字的提示文本类型（可选项为：qtip, title）
tooltipPosition string ''

单元格文字的提示信息位置（仅在tooltipType=qtip时有效）（可选项为：'', top, topstart, topend, bottom, bottomstart, bottomend, left, leftstart, leftend, right, rightstart, rightend）
showTooltipWhenTruncated boolean false

单元格提示仅在文字被列宽截断（出现省略号）时显示，需与 showTooltip=true 配合（仅 tooltipType=qtip 时有效）；未设置时取表格级 showTooltipWhenTruncated 的值
hidden boolean false

是否隐藏
sortable boolean false

是否允许排序
sortField string ''

排序字段
sorter F_GridColumn_sorter

自定义表格列排序函数
resizable boolean true

是否可以改变列宽度
lockable boolean false

是否允许锁定
locked boolean false

是否处于锁定状态
columnId string ''

列标识符
order number

列顺序
align string ''

文本的排列位置（可选项为：left, right, center）
headerAlign string ''

标题文本的排列位置（可选项为：left, right, center）
width number

列宽度
flex number

列宽度（hbox布局）
minWidth number

列的最小宽度
maxWidth number

列的最大宽度
menu boolean true

是否启用表头菜单
hideable boolean true

启用表头菜单中的隐藏列功能
filter Object

表头过滤参数

Properties
Name Type Default Description
multi boolean false

是否启用多条件
showMatcher boolean false

是否显示多条件匹配下拉框
matcherDefault string 'all'

多条件匹配规则的默认值（可选项为：all, any）
operator FineUI.DropDownList

操作符
field FineUI.Field

过滤字段
fieldRequired boolean false

过滤字段是否必填项
field string ''

本列对应的数据字段
fieldType string 'string'

字段类型（可选项为：string, int, float, double, boolean, date）
fieldFormat string ''

字段的格式化字符串（如果未定义列的渲染函数renderer，则根据fieldType的类型生成相应的渲染函数，仅支持日期和数字两种字段类型）

fieldType='date' 如果未定义renderer，则自动生成列渲染函数为：F.format.dateRenderer(column.fieldFormat) 例如：F.format.dateRenderer('yyyy/MM/dd');

fieldType='int|float|double' 如果未定义renderer，则自动生成列渲染函数为：F.format.numberRenderer(column.fieldFormat, column.trimZero)
trimZero boolean false

是否省略数字尾零（仅 fieldType=int|float|double 且使用 fieldFormat 时有效，配合 F.format.numberRenderer 的 trimZero 参数）
htmlEncode boolean false

是否在客户端进行HTML编码（默认为false）
editable boolean false

是否启用本列的单元格编辑功能
editor FineUI.Field

单元格编辑器
autoSelectEditor boolean false

单元格编辑时自动选中编辑框内的文本（默认为false）
editGetter F_GridColumn_editGetter

自定义编辑器获取函数
editSetter F_GridColumn_editSetter

自定义编辑器设置函数
columnType string 'renderfield'

列类型（可选项为：renderfield, checkboxfield, rowexpanderfield, rownumberfield）
pagingNumber boolean false

是否启用分页行号（仅用于columnType==rownumberfield）
treeNumber boolean false

是否启用树表格行号（仅用于columnType==rownumberfield）
checkboxEditable boolean false

复选框是否可编辑（仅用于columnType==checkboxfield）
checkboxDisplayType string ''

复选框的显示类型（仅用于columnType==checkboxfield，可选项为：default, switch, radio）
checkboxPreciseClick boolean false

精确点击复选框才能改变其选中状态（仅用于columnType==checkboxfield）
checkboxSwitchTextVisible boolean false

是否显示开关类型复选框的文本
checkboxSwitchOnText string ''

开关类型复选框的选中文本
checkboxSwitchOffText string ''

开关类型复选框的未选中文本
expanded boolean false

展开所有的行扩展列（仅用于columnType==rowexpanderfield）
expandOnDblClick boolean true

双击展开折叠行扩展列（仅用于columnType==rowexpanderfield）
expandOnEnter boolean true

回车按键展开折叠行扩展列（仅用于columnType==rowexpanderfield）
expandToSelectRow boolean false

点击行扩展列的图标时选中行（仅用于columnType==rowexpanderfield）
renderer F_GridColumn_renderer

自定义单元格渲染函数
summaryText string ''

合计行文本
summaryType string 'sum'

合计行类型（可选项为：sum, min, max, count, avg）
summaryRenderer F_GridColumn_summaryRenderer

自定义合计行渲染器函数
rowGroupSummaryText string ''

行分组的合计行文本
rowGroupSummaryType string 'sum'

行分组的合计行类型（可选项为：sum, min, max, count, avg）
rowGroupSummaryRenderer F_GridColumn_rowGroupSummaryRenderer

自定义行分组的合计行渲染器函数
type string 'GridColumn'

控件类型

Extends

Members

el :jQuery

Description:

  • 控件对应的jQuery节点对象

Inherited From:

控件对应的jQuery节点对象

Type:
  • jQuery

Methods

disable()

Description:

  • 禁用控件（按钮变灰、表单字段不可输入；可用isDisabled查询当前状态）

Inherited From:
Example

提交期间禁用按钮，避免重复提交（用 jQuery 的 $.ajax）：

FineUI.create({
    type: 'Button', text: '提交',
    handler: function () {
        var me = this;
        me.disable();
        $.ajax({
            url: '/api/save', method: 'POST', dataType: 'json',
            complete: function () {
                me.enable();
            }
        });
    }
});

doLayout(startFormTopmostComonentopt)

Description:

  • 执行布局操作

Inherited From:
Parameters:
Name Type Attributes Default Description
startFormTopmostComonent boolean <optional>
 false

从最顶层的控件开始布局

enable()

Description:

  • 启用控件（与disable对应）

Inherited From:

getAttr(key) → {string}

Description:

  • 获取节点属性

Inherited From:
Parameters:
Name Type Description
key string

节点属性键
Returns:

节点属性值

Type
string

getEncodedText(text) → {string}

Description:

  • 获取编码后的字符串

Inherited From:
Parameters:
Name Type Description
text string

原始字符串
Returns:

编码后的字符串

Type
string

getHeight() → {number}

Description:

  • 获取控件高度

Inherited From:
Returns:

高度

Type
number

getTooltip() → {string}

Description:

  • 获取提示信息

Inherited From:
Returns:

提示信息

Type
string

getWidth() → {number}

Description:

  • 获取控件宽度

Inherited From:
Returns:

宽度

Type
number

hide()

Description:

  • 隐藏列

Overrides:

isDisabled() → {boolean}

Description:

  • 是否禁用

Inherited From:
Returns:

是否禁用

Type
boolean

isType(value) → {boolean}

Description:

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

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

控件类型
Returns:

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

Type
boolean

isVisible() → {boolean}

Description:

  • 列是否可见

Overrides:
Returns:

是否可见

Type
boolean

off(eventNames, fnopt)

Description:

  • 移除事件

Inherited From:
Examples

移除特定回调：

function onMyClick() { ... }
FineUI.ui.btn1.on('click', onMyClick);
// 后续解绑：
FineUI.ui.btn1.off('click', onMyClick);

移除某事件下的全部回调（不传 fn 参数）：

FineUI.ui.btn1.off('click');
Parameters:
Name Type Attributes Description
eventNames string

事件名称（可以空格分割多个事件名称）
fn F_Component_on <optional>

之前注册的事件处理函数（留空则移除该事件的所有回调）

on(eventNames, fn)

Description:

  • 注册事件（运行时绑定；与配置参数listeners的初始绑定等价，但可在控件创建后动态追加）

Inherited From:
Examples

初始绑定形态：在FineUI.create时通过listeners配置项一次性声明：

FineUI.create({
    type: 'Button', renderTo: document.body, text: '按钮',
    listeners: {
        click: function (event) {
            FineUI.alert('button clicked');
        },
        // 同一个 listeners 内可以同时声明多个事件
        beforeclick: function (event) {
            // 返回 false 可阻止 click 事件
        }
    }
});

运行时绑定形态：控件创建后通过on()追加，效果与上面的listeners等价：

FineUI.ui.btn1.on('click', function (event) {
    FineUI.alert('button clicked');
});

on()一次绑定多个事件（事件名之间空格分隔）：

FineUI.ui.tbxName.on('focus blur', function () {
    console.log('focus 或 blur 触发');
});
Parameters:
Name Type Description
eventNames string

事件名称（可以空格分割多个事件名称）
fn F_Component_on

触发事件时执行的函数

remove()

Description:

  • 从父控件中移除当前控件并销毁其 DOM（不可恢复；移除后 FineUI.ui[id] 也会清除）。触发 remove 事件可用于清理外部资源。

Inherited From:
Example

动态添加 + 移除子控件：

var btn = FineUI.create({
    type: 'Button', text: '临时按钮', renderTo: document.body
});
// 5 秒后移除
setTimeout(function () {
    btn.remove();
}, 5000);

removeAttr(key)

Description:

  • 删除节点属性

Inherited From:
Parameters:
Name Type Description
key string

节点属性键

removeTooltip()

Description:

  • 删除提示信息

Inherited From:

setAttr(key, value)

Description:

  • 设置节点属性

Inherited From:
Parameters:
Name Type Description
key string

节点属性键
value string

节点属性值

setAttrs(attrs)

Description:

  • 设置节点属性

Inherited From:
Parameters:
Name Type Description
attrs Object

节点属性对象

setDisabled(disabled)

Description:

  • 设置控件的禁用状态

Inherited From:
Parameters:
Name Type Description
disabled boolean

是否禁用

setEditable(editable)

Description:

  • 设置列的可编辑状态

Parameters:
Name Type Description
editable boolean

是否可编辑

setEnabled(enabled)

Description:

  • 设置控件的启用状态

Inherited From:
Parameters:
Name Type Description
enabled boolean

是否启用

setHeight(height)

Description:

  • 设置控件高度

Inherited From:
Parameters:
Name Type Description
height number

高度

setHidden(hidden)

Description:

  • 设置控件的隐藏状态

Inherited From:
Parameters:
Name Type Description
hidden boolean

是否隐藏

setHideable(hideable)

Description:

  • 设置表头菜单的隐藏列功能

Parameters:
Name Type Description
hideable boolean

是否启用

setSize(width, height)

Description:

  • 设置控件尺寸（同时设置宽高；等价于setWidth + setHeight但只触发一次布局）

Inherited From:
Example

响应窗口 resize 调整面板尺寸：

$(window).on('resize', function () {
    FineUI.ui.panel1.setSize($(window).width() - 20, $(window).height() - 40);
});
Parameters:
Name Type Description
width number

宽度
height number

高度

setTooltip(tooltip)

Description:

  • 设置提示信息

Inherited From:
Parameters:
Name Type Description
tooltip string

提示信息

setVisible(visible)

Description:

  • 设置列的显示状态

Overrides:
Parameters:
Name Type Description
visible boolean

是否可见

setWidth(width)

Description:

  • 设置控件宽度

Inherited From:
Parameters:
Name Type Description
width number

宽度

show()

Description:

  • 显示列

Overrides:

toggleEditable()

Description:

  • 切换列的可编辑状态

toggleEnabled()

Description:

  • 切换启用状态

Inherited From:

toggleHideable()

Description:

  • 切换表头菜单的隐藏列功能

toggleVisible()

Description:

  • 切换列的显示状态

Overrides:

trigger(eventName, args)

Description:

  • 触发事件

Inherited From:
Parameters:
Name Type Description
eventName string

事件名称
args Object

事件参数

Events

beforehide

Description:

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

Inherited From:

beforeshow

Description:

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

Inherited From:

hide

Description:

  • 隐藏控件时触发

Inherited From:

layout

Description:

  • 布局控件时触发

Inherited From:

remove

Description:

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

Inherited From:

render

Description:

  • 渲染控件时触发

Inherited From:

show

Description:

  • 显示控件时触发

Inherited From: