GridColumn

FineUI. GridColumn

new GridColumn(options)

Description:
  • 表格列控件

Examples

表格列作为FineUI.Gridcolumns子项使用,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

getEncodedText(text) → {string}

Description:
  • 获取编码后的字符串

Inherited From:
Parameters:
Name Type Description
text string

原始字符串

Returns:

编码后的字符串

Type
string

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

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: