F.js - 企业级前端界面库

new F.Grid(options)

F.Grid.js, line 52

表格控件

Name Type Description

options

Object

初始参数

Name Type Default Description

data Object 表格数据

gridHeader boolean true 是否显示表格的列标题栏

multiSelect boolean true 是否允许多选（通过 Ctrl, Shift 键进行多选）

keepCurrentSelection boolean false 多选时保持当前已选中行

showSelectedCell boolean false 显示选中的单元格

showSelectedRow boolean true 显示选中的行

rowHoverState boolean true 启用表格行的鼠标悬停样式

altRowColor boolean true 为交替行显示不同的颜色

checkboxSelect boolean false 是否启用多选框列

checkboxSelectOnly boolean false 只能通过多选框列选中行

checkboxSelectWidth boolean 多选框列的宽度

checkboxSelectHeaderText boolean '' 多选框列的标题栏文字

checkboxSelectDisplayType boolean 'default' 多选框列的显示类型（可选项为：default, switch, radio）

sorting boolean false 是否启用排序

databaseSorting boolean false 是否数据库排序

sortField string '' 当前的排序字段

sortDirection string 'ASC' 排序方向（可选项为：ASC, DESC）

sortingCancel boolean false 允许点击列头来取消排序

sortingTooltip boolean false 显示列头的排序提示信息

minColumnWidth number 20 最小列宽度

defaultColumnWidth number 100 缺省列宽度

rowExpander

Object

行扩展列

Name	Type	Default	Description
`id`	string		行扩展列的标识符（可以使用 F(grid1.rowExpander.id) 获取此对象）
`field`	string		行扩展列的字段名
`columnId`	string		行扩展列的列标识符
`expanded`	boolean	false	默认展开全部行扩展列
`expandOnDblClick`	boolean	true	双击展开折叠行扩展列
`expandOnEnter`	boolean	true	回车按键展开折叠行扩展列
`expandToSelectRow`	boolean	false	点击行扩展列的图标时选中行

forceFit boolean false 强制列宽度自适应

fields Array.<string> [ 数据源对应的字段列表

idField string '' 标识行 id 的字段名称

textField string '' 标识行 text 的字段名称

parentIdField string '' 标识行 parentId 的字段名称（仅用于树表格）

paging boolean false 是否启用分页

databasePaging boolean false 是否数据库分页

pageSize number 15 每页显示记录数

pageIndex number 0 当前所处的分页序号

recordCount number 0 总记录数

showPageMsg boolean true 是否显示分页信息

quickPaging boolean false 是否启用快速翻页功能（上下按键或者鼠标滚轮改变选中行）

quickPagingThenSelect boolean true 快速翻页后自动选中第一行或者最后一行

mouseWheelSelection boolean false 鼠标滚轮改变选中行

arrowKeySelection boolean true 箭头按键改变选中行和单元格

emptyText string '' 数据为空时显示的内容

columnLines boolean false 是否显示列边框线

rowLines boolean false 是否显示行边框线

rowVerticalAlign string 'middle' 表格行在垂直方向上的显示位置（可选项为：top, middle, bottom）

enableTextSelection boolean false 是否启用文本选择

summary boolean false 是否显示合计行

summaryPosition string 'flow' 合计行的位置（可选项为：flow, top, bottom）

summaryData Array.<Object> 合计行数据

summaryRowCount number 1 合计行的行数

cellEditing boolean false 是否启用单元格编辑

cellEditingClicks number 1 使单元格进入编辑状态的点击次数（可选项为：1, 2）

autoSelectEditor boolean false 单元格编辑时自动选中编辑框内的文本

tabVerticalNavigate boolean false Tab键纵向导航单元格（仅用于单元格编辑）

tabEditableCell boolean false Tab键只在可编辑单元格之间导航（仅用于单元格编辑）

enterSameAsTab boolean false Enter键Tab键行为相同（仅用于单元格编辑）

enterNavigate boolean false Enter键导航单元格（仅用于单元格编辑）

enterVerticalNavigate boolean false Enter键纵向导航单元格（仅用于单元格编辑）

enterEditableCell boolean false Enter键只在可编辑单元格之间导航（仅用于单元格编辑）

columnLocking boolean false 是否启用列锁定

columnMoving boolean false 是否启用列移动

sameGroupColumnMoving boolean false 是否启用同一分组内移动

columnResizing boolean true 是否启用列宽度调整

columnMenu boolean true 是否启用列菜单

columnMenuSort boolean true 是否启用排序菜单项

columnMenuColumns boolean true 是否启用隐藏列菜单项

filters boolean false 是否启用表头过滤

separateFilterMenu boolean false 是否启用单独的过滤菜单

tree

Object

树表格

Name	Type	Default	Description
`columnId`	string	''	树表格的列标识符
`icons`	boolean	true	是否显示树节点图标
`expanded`	boolean	false	默认展开全部树节点
`expandOnDblClick`	boolean	true	双击展开树节点
`checkbox`	boolean	false	是否启用节点复选框
`onlyLeafCheck`	boolean	false	是否只显示叶子节点复选框
`onlyFolderCheck`	boolean	false	是否只显示目录节点复选框
`cascadeCheck`	boolean	false	是否启用级联选择

dataUrl string '' 网址数据源

dataMethod string 'GET' 请求网址数据源的方法（可选项为：GET, POST）

bigData boolean false 启用大数据模式（表格需要有固定高度，并且表格行的高度固定）

bigDataRowTip boolean true 启用大数据模式下的行数提示

clickOnContextMenu boolean true 右键点击时选中当前行（默认为true）

scrollTopAfterPaging boolean false 翻页后滚动到顶部（默认为false）

scrollTopAfterSorting boolean false 排序后滚动到顶部（默认为false）

rowGroupField string '' 行分组数据字段名

rowGroup

Object

行分组

Name	Type	Default	Description
`collapsible`	boolean	true	是否显示行分组折叠图标
`expanded`	boolean	true	展开所有的行分组
`expandOnDblClick`	boolean	true	双击展开行分组节点
`renderer`	F_Grid_rowGroup_renderer		自定义行分组渲染器函数
`summary`	boolean	false	是否显示行分组合计行
`summaryRowCount`	number	1	行分组的合计行行数

rowRenderer F_Grid_rowRenderer 自定义行渲染器函数

fixedRowHeight boolean false 行高度固定

rowHeight number 行高度

rowHeightCompact number 紧凑模式下的行高度

rowHeightSmall number 小字体模式下的行高度

rowHeightLarge number 大字体模式下的行高度

rowHeightLargeSpace number 大间距模式下的行高度

delayRender boolean false 启用延迟渲染（表格需要有固定高度，并且表格行的高度固定）

displayType string 'default' 表格显示模式（可选项为：default, card）

cardRenderer F_Grid_cardRenderer 自定义卡片渲染器函数

type string 'grid' 控件类型

Example

创建一个表格，使用内联数据：

F.create({
	type: 'grid', id: 'grid1', renderTo: '#wrap1', title: '表格',
	columns: [{
		columnType: 'rownumberfield'
	}, {
		text: '姓名', field: 'name'
	}, {
		text: '性别', field: 'gender'
	}, {
		text: '是否在校', field: 'atSchool', columnType: 'checkboxfield'
	}, {
		text: '所学专业', field: 'major', flex: 1,
		renderer: function (value, params) {
			return '' + value + '';
		}
	}],
	fields: ["name", "gender", "entranceYear", "atSchool", "major", "logTime"],
	data: [
		["张萍萍", "女", "2000", true, "材料科学与工程系", "2015-03-10"],
		["陈飞", "男", "2000", false, "化学系", "2015-03-10"],
		["董婷婷", "女", "2000", true, "化学系", "2015-03-10"],
		["刘国", "男", "2002", false, "化学系", "2015-03-10"],
		["康颖颖", "女", "2008", true, "数学系", "2015-04-19"],
		["彭博", "男", "2008", false, "数学系", "2015-04-29"]
	]
});

Extends

F.Panel

Members

bodyEljQuery

控件主体对应的jQuery节点对象

eljQuery

控件对应的jQuery节点对象

itemsObject

子控件列表

Methods

inherited add(value) F.Container.js, line 55

添加新的子控件到当前控件

Name	Type	Description
`value`	Object \| Array.<Object>	控件实例数组

Example

menu1.add(['-', {
		type: 'menuitem',
		text: '新菜单项'
}]);

addNewRecord(id, text, record, appendToEnd, editColumnId){string} F.Grid.cellEditing.js, line 205

添加一条新记录

Name	Type	Description
`id`	string	optional 行标识符
`text`	string	optional 行文本
`record`	Object	新记录对象
`appendToEnd`	boolean \| number	是否添加到行尾部（如果是数字，则表示插入的位置）
`editColumnId`	string \| boolean	添加后立即进入编辑状态的列标识符（如果传入布尔值false，则不进入编辑状态）

Returns:

Type	Description
string	行标识符

Examples

添加一条新记录

F.ui.grid1.addNewRecord({
    "Name": "张三",
    "Gender": "1",
    "Major": "化学系"
}, true);

添加一条新记录（包含行标识符和行文本）

F.ui.grid1.addNewRecord({"104", "张三", {
	"Name": "张三",
	"Gender": "1",
	"Major": "化学系"
}, true);

添加一条新记录（包含行标识符和行文本）

F.ui.grid1.addNewRecord({
    "id": "104",
    "text": "张三",
    "values": {
        "Name": "张三",
        "Gender": "1",
        "Major": "化学系"
    }
}, true);

添加一条新记录（包含行标识符、行文本和禁用行选择）

F.ui.grid1.addNewRecord({
    "id": "104",
    "text": "张三",
	"unselectable": true,
    "values": {
        "Name": "张三",
        "Gender": "1",
        "Major": "化学系"
    }
}, true);

addNewRecords(records, appendToEnd) F.Grid.cellEditing.js, line 154

添加多条新记录

Name	Type	Description
`records`	Object	新记录对象数组
`appendToEnd`	boolean \| number	是否添加到行尾部（如果是数字，则表示插入的位置）

Examples

添加两条新记录

F.ui.grid1.addNewRecords([{
    "Name": "张三",
    "Gender": "1",
    "Major": "化学系"
}, {
    "Name": "李诗诗",
    "Gender": "2",
    "Major": "物理系"
}], true);

添加两条新记录（包含行标识符和行文本）

F.ui.grid1.addNewRecords([{
    "id": "104",
    "text": "张三",
    "values": {
        "Name": "张三",
        "Gender": "1",
        "Major": "化学系"
    }
}, {
    "id": "105",
    "text": "李诗诗",
    "values": {
        "Name": "李诗诗",
        "Gender": "2",
        "Major": "物理系"
    }
}], true);

inherited addTool(item) F.PanelBase.js, line 171

添加工具图标

Name	Type	Description
`item`	F.Tool	工具图标实例

appendData(data) F.Grid.loadData.js, line 45

追加数据

Name	Type	Description
`data`	Array.<Object>	数据

calcSummaryValue(columnId, summaryType) F.Grid.js, line 1162

计算合计行的值

Name	Type	Default	Description
`columnId`	string		列标识符
`summaryType`	string	'sum'	合计行类型（可选项为：sum, min, max, count, avg）

cancelEdit() F.Grid.cellEditing.js, line 114

取消正在编辑的单元格

clearData() F.Grid.js, line 964

清空全部数据

clearDirty() F.Grid.js, line 1188

不支持此方法

clearSelection() F.Grid.js, line 956

清空全部选中行、单元格

inherited collapse() F.PanelBase.js, line 194

折叠面板

collapseRow(row, deep) F.Grid.js, line 722

折叠行（适用于树表格和行分组）

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素
`deep`	boolean	是否递归调用子节点（仅树表格有效）

collapseRowExpander(row) F.Grid.js, line 812

折叠行扩展列

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素

collapseRowExpanders(rows) F.Grid.js, line 827

折叠行扩展列

Name	Type	Description
`rows`	Array.<number> \| Array.<string> \| Array.<jQuery>	行索引数组、行标识符数组或者行元素数组

collapseRows() F.Grid.js, line 728

折叠全部行（适用于树表格和行分组）

commitChanges() F.Grid.cellEditing.js, line 212

提交所有改动

configColumns(columns, options) F.Grid.js, line 1153

重新配置表格列

Name Type Description

columns Array.<Object> 表格列集合

options

Object

参数

Name	Type	Default	Description
`idField`	boolean	''	标识行 id 的字段名称
`textField`	boolean	''	标识行 text 的字段名称
`multiSelect`	boolean	true	是否允许多选
`checkboxSelect`	boolean	false	是否启用多选框列

deleteRow(row, forceUpdate) F.Grid.js, line 921

删除行

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素
`forceUpdate`	boolean	是否强制更新（强制更新时从数据源中删除行）

deleteRows(rowIds, forceUpdate) F.Grid.js, line 929

删除多行

Name	Type	Description
`rowIds`	Array.<number> \| Array.<string> \| Array.<jQuery>	行索引数组、行标识符数组或者行元素数组
`forceUpdate`	boolean	是否强制更新（强制更新时从数据源中删除行）

deleteSelectedRows(forceUpdate) F.Grid.js, line 911

删除选中的行

Name	Type	Description
`forceUpdate`	boolean	是否强制更新（强制更新时从数据源中删除行）

deselectAllRows() F.Grid.js, line 681

取消选中全部行

deselectRow(row) F.Grid.js, line 668

取消选中行

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素

deselectRows(rowIds) F.Grid.js, line 675

取消选中多行

Name	Type	Description
`rowIds`	Array.<number> \| Array.<string> \| Array.<jQuery>	行索引数组、行标识符数组或者行元素数组

inherited disable() F.PanelBase.js, line 102

禁用控件

inherited doLayout(startFormTopmostComonent) F.Component.js, line 122

执行布局操作

Name	Type	Default	Description
`startFormTopmostComonent`	boolean	false	optional 从最顶层的控件开始布局

inherited enable() F.PanelBase.js, line 108

启用控件

inherited expand() F.PanelBase.js, line 200

展开面板

expandPath(path) F.Grid.js, line 689

展开路径（仅树表格有效）

Name	Type	Description
`path`	string	指定的路径

expandRow(row, deep) F.Grid.js, line 707

展开行（适用于树表格和行分组）

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素
`deep`	boolean	是否递归调用子节点（仅树表格有效）

expandRowExpander(row) F.Grid.js, line 805

展开行扩展列

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素

expandRowExpanders(rows) F.Grid.js, line 820

展开行扩展列

Name	Type	Description
`rows`	Array.<number> \| Array.<string> \| Array.<jQuery>	行索引数组、行标识符数组或者行元素数组

expandRowPath(row) F.Grid.js, line 697

展开行所在路径（仅树表格有效）

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素

expandRows() F.Grid.js, line 713

展开全部行（适用于树表格和行分组）

inherited getAttr(key){string} F.Component.js, line 101

获取节点属性

Name	Type	Description
`key`	string	节点属性键

Returns:

Type	Description
string	节点属性值

getCellData(row, columnId){Object} F.Grid.js, line 487

获取单元格数据

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素
`columnId`	string	列标识符

Returns:

Type	Description
Object	单元格数据

getCellEl(row, columnId){jQuery} F.Grid.js, line 576

获取单元格元素

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素
`columnId`	string	列标识符

Returns:

Type	Description
jQuery	单元格元素

getCellValue(row, columnId){Object} F.Grid.js, line 476

获取单元格的值

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素
`columnId`	string	列标识符

Returns:

Type	Description
Object	单元格的值

getCheckedRows(){Array.<string>} F.Grid.js, line 949

获取选中的行标识符数组（仅适用于树表格）

Returns:

Type	Description
Array.<string>	行标识符数组

getColumn(column){Object} F.Grid.js, line 532

获取列对象

Name	Type	Description
`column`	string \| jQuery	列标识符、单元格元素

Returns:

Type	Description
Object	列对象

getColumnHeaderEl(columnId){jQuery} F.Grid.js, line 508

获取列的标题栏元素

Name	Type	Description
`columnId`	string	列标识符

Returns:

Type	Description
jQuery	列的标题栏元素

getColumnHeaderEls(){jQuery} F.Grid.js, line 500

获取所有列的标题栏元素

Returns:

Type	Description
jQuery	所有列的标题栏元素

getColumnId(column){Object} F.Grid.js, line 524

获取列标识符

Name	Type	Description
`column`	jQuery	单元格元素

Returns:

Type	Description
Object	列标识符

getColumnIds(){Array.<string>} F.Grid.js, line 540

获取列标识符数组

Returns:

Type	Description
Array.<string>	列标识符数组

getDeletedRows(){Array.<string>} F.Grid.js, line 935

获取删除的行标识符数组

Returns:

Type	Description
Array.<string>	行标识符数组

getEndRowIndex(){number} F.Grid.js, line 1069

获取当前页的结束索引值

Returns:

Type	Description
number	当前页的结束索引值

getExpandedRows(){Array.<string>} F.Grid.js, line 942

获取展开的行标识符数组（仅适用于树表格）

Returns:

Type	Description
Array.<string>	行标识符数组

getField(fieldName){string|Object} F.Grid.js, line 426

获取字段对象

Name	Type	Description
`fieldName`	string \| Number	字段名称或者索引

Returns:

Type	Description
string \| Object	字段名称或者字段对象

getFilteredData(){Object} F.Grid.headerMenuFilter.js, line 32

获取过滤参数

Returns:

Type	Description
Object	过滤参数

getFormFields() F.Grid.js, line 1176

不支持此方法

inherited getHeight(){number} F.Component.js, line 136

获取控件高度

Returns:

Type	Description
number	高度

getHiddenColumns(returnColumnData){Array.<string>} F.Grid.js, line 854

获取隐藏的列标识符数组

Name	Type	Description
`returnColumnData`	boolean	返回包含列对象的数组，否则返回包含列标识符的数组

Returns:

Type	Description
Array.<string>	隐藏的列标识符数组

inherited getIconEl(){jQuery} F.PanelBase.js, line 143

获取图标元素

Returns:

Type	Description
jQuery	图标元素

inherited getIFrameEl(){jQuery} F.PanelBase.js, line 253

获取内联框架元素

Returns:

Type	Description
jQuery	内联框架元素

inherited getIFrameUrl(){string} F.PanelBase.js, line 246

获取内联框架地址

Returns:

Type	Description
string	内联框架地址

inherited getIFrameWindow(){Window} F.PanelBase.js, line 260

获取内联框架窗体对象

Returns:

Type	Description
Window	内联框架窗体对象

inherited getItem(value){F.Component} F.Container.js, line 112

获取子控件

Name	Type	Description
`value`	number \| string \| function	子控件索引、标识符或者函数

Returns:

Type	Description
F.Component	子控件实例

getMergedData() F.Grid.cellEditing.js, line 234

获取合并后的值（排除删除行数据）

getModifiedData() F.Grid.cellEditing.js, line 228

获取修改的值

getNextCellEl(td, verticalNavigate, multiRowsNavigate) F.Grid.js, line 1130

获取下一单元格

Name	Type	Default	Description
`td`	jQuery		单元格元素
`verticalNavigate`	boolean	false	垂直方向导航（默认为false）
`multiRowsNavigate`	boolean	false	跨行导航（默认为false）

getNextRowEl(tr) F.Grid.js, line 1112

获取下一行

Name	Type	Description
`tr`	jQuery	行元素

getPageCount(){number} F.Grid.js, line 1076

获取总页数

Returns:

Type	Description
number	总页数

getPagedData(){Array.<Object>} F.Grid.js, line 1104

获取分页数据

Returns:

Type	Description
Array.<Object>	分页数据

getPageIndex(){number} F.Grid.js, line 1083

获取当前页的索引值

Returns:

Type	Description
number	当前页的索引值

getPageSize(){number} F.Grid.js, line 1090

获取每页显示记录数

Returns:

Type	Description
number	每页显示记录数

getPrevCellEl(td, verticalNavigate, multiRowsNavigate) F.Grid.js, line 1140

获取上一单元格

Name	Type	Default	Description
`td`	jQuery		单元格元素
`verticalNavigate`	boolean	false	垂直方向导航（默认为false）
`multiRowsNavigate`	boolean	false	跨行导航（默认为false）

getPrevRowEl(tr) F.Grid.js, line 1120

获取上一行

Name	Type	Description
`tr`	jQuery	行元素

getRecordCount(){number} F.Grid.js, line 1097

获取总记录数

Returns:

Type	Description
number	总记录数

getRowData(row){Object} F.Grid.js, line 447

获取行数据

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素

Returns:

Type	Description
Object	行数据

getRowEl(row, includeLockedTable){jQuery} F.Grid.js, line 565

获取行元素

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素
`includeLockedTable`	boolean	是否包含锁定表格中的行

Returns:

Type	Description
jQuery	行元素

getRowEls(includeLockedTable){jQuery} F.Grid.js, line 614

获取行元素

Name	Type	Description
`includeLockedTable`	boolean	是否包含锁定表格中的行元素

Returns:

Type	Description
jQuery	行元素

getRowId(row){string} F.Grid.js, line 436

获取行标识符

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素

Returns:

Type	Description
string	行标识符

getRowPath(row){string} F.Grid.js, line 466

获取行路径（仅适用于树表格，返回类似 frow11/frow23/frow60 的字符串）

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素

Returns:

Type	Description
string	行路径

getRowValue(row){Object} F.Grid.js, line 457

获取行值（列标识符和值的键值对）

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素

Returns:

Type	Description
Object	行值

inherited getScrollEl(){jQuery} F.PanelBase.js, line 115

获取可滚动元素

Returns:

Type	Description
jQuery	可滚动元素

getSelectedCell(returnCellData){Array.<string>} F.Grid.js, line 895

获取选中的单元格

Name	Type	Description
`returnCellData`	boolean	返回单元格对象，否则返回标识单元格的数组

Returns:

Type	Description
Array.<string>	选中的单元格（[行标识符, 列标识符]）

getSelectedCellColumnId(){string} F.Grid.js, line 903

获取选中单元格的列ID

Returns:

Type	Description
string	选中的单元格所在的列标识符

getSelectedCellEl() F.Grid.js, line 886

获取选中的单元格元素

getSelectedRow(returnRowData){string} F.Grid.js, line 758

获取选中的行标识符

Name	Type	Description
`returnRowData`	boolean	返回包含行对象的数组，否则返回包含行标识符的数组

Returns:

Type	Description
string	列标识符

getSelectedRowEl(includeLockedRows){jQuery} F.Grid.js, line 774

获取选中的行元素

Name	Type	Description
`includeLockedRows`	boolean	是否包含锁定表格的行元素

Returns:

Type	Description
jQuery	选中的行元素

getSelectedRowEls(includeLockedRows){jQuery} F.Grid.js, line 766

获取选中的行元素

Name	Type	Description
`includeLockedRows`	boolean	是否包含锁定表格的行元素

Returns:

Type	Description
jQuery	选中的行元素

getSelectedRows(returnRowData){Array.<string>} F.Grid.js, line 749

获取选中的行标识符数组

Name	Type	Description
`returnRowData`	boolean	返回包含行对象的数组，否则返回包含行标识符的数组

Returns:

Type	Description
Array.<string>	列标识符数组

getSortColumn(sortField){Object} F.Grid.js, line 516

获取排序列对象

Name	Type	Description
`sortField`	string	排序字段

Returns:

Type	Description
Object	列对象

getStartRowIndex(){number} F.Grid.js, line 1062

获取当前页的开始索引值

Returns:

Type	Description
number	当前页的开始索引值

inherited getTitle(){string} F.PanelBase.js, line 218

获取面板标题

Returns:

Type	Description
string	标题文本

inherited getTitleTooltip(){string} F.PanelBase.js, line 225

获取面板标题提示信息

Returns:

Type	Description
string	标题提示信息

inherited getTooltip(){string} F.Component.js, line 196

获取提示信息

Returns:

Type	Description
string	提示信息

getVisibleColumnCount(){number} F.Grid.js, line 493

获取可见列的数量

Returns:

Type	Description
number	可见列的数量

inherited getWidth(){number} F.Component.js, line 130

获取控件宽度

Returns:

Type	Description
number	宽度

inherited hasHScrollbar(){boolean} F.PanelBase.js, line 122

是否存在水平滚动条

Returns:

Type	Description
boolean	是否存在水平滚动条

inherited hasIcon(){boolean} F.PanelBase.js, line 137

是否有图标

Returns:

Type	Description
boolean	是否有图标

hasSelection(){boolean} F.Grid.js, line 782

是否有选中行

Returns:

Type	Description
boolean	是否有选中行

inherited hasVScrollbar(){boolean} F.PanelBase.js, line 130

是否存在垂直滚动条

Returns:

Type	Description
boolean	是否存在垂直滚动条

inherited hide() F.PanelBase.js, line 273

隐藏面板

hideColumn(columnId, hidden) F.Grid.js, line 869

隐藏列

Name	Type	Description
`columnId`	string	列标识符
`hidden`	boolean	是否隐藏

inherited hideLoading() F.Container.js, line 95

隐藏加载动画

inherited insert(insertIndex, value) F.Container.js, line 44

插入新的子控件到当前控件

Name	Type	Description
`insertIndex`	number	插入的位置
`value`	Object \| Array.<Object>	控件实例数组

Example

menu1.insert(0, ['-', {
		type: 'menuitem',
		text: '新菜单项'
}]);

inherited insertTool(item, insertIndex) F.PanelBase.js, line 179

插入工具图标

Name	Type	Description
`item`	F.Tool	工具图标实例
`insertIndex`	number	插入的位置

isAllSelected(){boolean} F.Grid.js, line 789

是否所有行都处于选中状态

Returns:

Type	Description
boolean	是否所有行都处于选中状态

inherited isCollapsed(){boolean} F.PanelBase.js, line 188

是否处于折叠状态

Returns:

Type	Description
boolean	折叠状态

isDirty() F.Grid.js, line 1184

不支持此方法

inherited isDisabled(){boolean} F.Component.js, line 224

是否禁用

Returns:

Type	Description
boolean	是否禁用

inherited isType(value){boolean} F.Base.js, line 23

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

Name	Type	Description
`value`	Object	控件类型

Returns:

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

Example

grid1.isType('panel') // 返回true
grid1.isType('grid')  // 返回true

isValid() F.Grid.js, line 1180

不支持此方法

inherited isVisible(){boolean} F.Component.js, line 216

是否可见

Returns:

Type	Description
boolean	是否可见

loadData(parentRowId, data, summaryData) F.Grid.loadData.js, line 36

加载数据

Name	Type	Description
`parentRowId`	string	optional 加载节点数据（仅适用于树表格）
`data`	Array.<Object>	数据
`summaryData`	Array.<Object>	汇总数据

loadDataUrl(dataUrl, dataParams) F.Grid.loadData.js, line 55

加载数据

Name	Type	Description
`dataUrl`	string	optional 数据源地址
`dataParams`	object	参数

loadPageData(pageIndex) F.Grid.js, line 416

加载分页数据（仅适用于客户端数据分页）

Name	Type	Description
`pageIndex`	number	分页序号

loadSortData(pageIndex) F.Grid.js, line 409

加载排序数据（仅适用于客户端数据排序）

Name	Type	Description
`pageIndex`	number	分页序号

lockColumn(columnId) F.Grid.js, line 838

锁定列

Name	Type	Description
`columnId`	string	列标识符

mergeCells(cells) F.Grid.js, line 990

合并单元格

Name	Type	Description
`cells`	Array.<Object>	需要合并的单元格数组

Example

F.ui.grid1.mergeCells([{
			rowId: 'row1',
			columnId: 'entranceYear',
			rowspan: 3
		}, {
			rowId: 'row1',
			columnId: 'major',
			rowspan: 3
		}, {
			rowId: 'row8',
			columnId: 'group',
			rowspan: 4,
			colspan: 2
		}]);

mergeColumns(columns, options) F.Grid.js, line 1004

合并列

Name Type Description

columns Array.<string> 需要合并的列标识符数组

options

Object

合并参数

Name	Type	Description
`depends`	boolean	后一列的单元格合并取决于前一列的合并状态
`dependsFirst`	boolean	后一列的单元格合并取决于第一列的合并状态

Example

F.ui.grid1.mergeColumns(['Major', 'Group', 'LogTime']);

moveRowDown(row) F.Grid.js, line 590

行下移

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素

moveRowsDown(rows) F.Grid.js, line 604

多行下移

Name	Type	Description
`rows`	Array.<number> \| Array.<string> \| Array.<jQuery>	行索引数组、行标识符数组或者行元素数组

moveRowsUp(rows) F.Grid.js, line 597

多行上移

Name	Type	Description
`rows`	Array.<number> \| Array.<string> \| Array.<jQuery>	行索引数组、行标识符数组或者行元素数组

moveRowUp(row) F.Grid.js, line 583

行上移

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素

inherited off(eventNames, fn) F.Component.js, line 181

移除事件

Name	Type	Description
`eventNames`	string	事件名称（可以空格分割多个事件名称）
`fn`	F_Component_on	之前注册的事件处理函数

inherited on(eventNames, fn) F.Component.js, line 174

注册事件

Name	Type	Description
`eventNames`	string	事件名称（可以空格分割多个事件名称）
`fn`	F_Component_on	触发事件时执行的函数

inherited refreshIFrame() F.PanelBase.js, line 267

刷新内联框架

rejectChanges() F.Grid.cellEditing.js, line 220

拒绝所有改动

inherited remove() F.Component.js, line 115

删除父控件中移除当前控件

inherited removeAttr(key) F.Component.js, line 108

删除节点属性

Name	Type	Description
`key`	string	节点属性键

inherited removeTooltip() F.Component.js, line 208

删除提示信息

reset() F.Grid.js, line 1192

不支持此方法

resetFilter(columnId) F.Grid.headerMenuFilter.js, line 47

重置某个列的过滤参数

Name	Type	Description
`columnId`	string	列标识符

resetFilters() F.Grid.headerMenuFilter.js, line 39

重置过滤参数

resolveColumn(fn) F.Grid.js, line 555

遍历列

Name	Type	Description
`fn`	F_Grid_resolveColumn	遍历列的回调函数

resolveRow(fn, row) F.Grid.js, line 1032

遍历行

Name	Type	Description
`fn`	F_Grid_resolveRow	遍历行的回调函数
`row`	number \| string \| jQuery \| Array	optional 行索引、行标识符、行元素或者包含行数据的数组（如果留空则为全部行数据）

saveEdit() F.Grid.cellEditing.js, line 108

保存正在编辑的单元格

scrollToCell(row, columnId) F.Grid.js, line 654

滚动到单元格

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素
`columnId`	string	列标识符

scrollToRow(row) F.Grid.js, line 646

滚动到行

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素

selectAllRows() F.Grid.js, line 661

选中全部行

selectCell(row, columnId, options) F.Grid.js, line 740

选中单元格

Name Type Description

row number | string | jQuery 行索引、行标识符或者行元素

columnId string 列标识符

options

Object

参数

Name	Type	Default	Description
`scrollTo`	boolean	true	是否滚动到选中单元格

selectRow(row, options) F.Grid.js, line 626

选中行

Name Type Description

row number | string | jQuery 行索引、行标识符或者行元素

options

Object

参数

Name	Type	Default	Description
`keep`	boolean	false	是否保持已选中行
`keepUnselectable`	boolean	true	是否保持不可选择行的选中状态（options.keep=true时，此参数无效）
`scrollTo`	boolean	true	是否滚动到选中行（仅有一行处于选中状态时有效）

selectRows(rowIds, options) F.Grid.js, line 638

选中多行

Name Type Description

rowIds Array.<number> | Array.<string> | Array.<jQuery> 行索引数组、行标识符数组或者行元素数组

options

Object

参数

Name	Type	Default	Description
`keep`	boolean	false	是否保持已选中行
`keepUnselectable`	boolean	true	是否保持不可选择行的选中状态（options.keep=true时，此参数无效）
`scrollTo`	boolean	true	是否滚动到选中行（仅有一行处于选中状态时有效）

inherited setAttr(key, value) F.Component.js, line 94

设置节点属性

Name	Type	Description
`key`	string	节点属性键
`value`	string	节点属性值

inherited setAttrs(attrs) F.Component.js, line 86

设置节点属性

Name	Type	Description
`attrs`	Object	节点属性对象

inherited setDisabled(disabled) F.Component.js, line 248

设置控件的禁用状态

Name	Type	Description
`disabled`	boolean	是否禁用

setDisplayType(displayType) F.Grid.js, line 1170

设置显示模式

Name	Type	Description
`displayType`	string	显示模式

inherited setEnabled(enabled) F.Component.js, line 254

设置控件的启用状态

Name	Type	Description
`enabled`	boolean	是否启用

inherited setHeight(height) F.Component.js, line 143

设置控件高度

Name	Type	Description
`height`	number	高度

inherited setHidden(hidden) F.Component.js, line 286

设置控件的隐藏状态

Name	Type	Description
`hidden`	boolean	是否隐藏

setHiddenColumns(columns) F.Grid.js, line 861

设置隐藏的列

Name	Type	Description
`columns`	Array.<string>	隐藏的列标识符数组

inherited setIcon(icon) F.PanelBase.js, line 152

设置图标地址

Name	Type	Description
`icon`	string	图标地址

Example

F.ui.panel1.setIcon('../res/images/16/1.png');

inherited setIconFont(iconFont) F.PanelBase.js, line 161

设置图标字体

Name	Type	Description
`iconFont`	string	图标字体

Example

F.ui.panel1.setIconFont('bank');

inherited setIFrameUrl(url) F.PanelBase.js, line 239

设置内联框架地址

Name	Type	Description
`url`	string	内联框架地址

setPageIndex(newPageIndex) F.Grid.js, line 1041

设置新的分页索引

Name	Type	Description
`newPageIndex`	number	新的分页索引

setPageSize(newPageSize) F.Grid.js, line 1055

设置每页记录数

Name	Type	Description
`newPageSize`	number	每页记录数

setRecordCount(newRecordCount) F.Grid.js, line 1048

设置总记录数

Name	Type	Description
`newRecordCount`	number	总记录数

inherited setSize(width, height) F.Component.js, line 158

设置控件尺寸

Name	Type	Description
`width`	number	宽度
`height`	number	高度

setSortField(field, direction) F.Grid.js, line 402

设置表格的排序状态

Name	Type	Description
`field`	string \| Array.<string>	排序字段（或者排序字段列表，仅适用于多列排序）
`direction`	string	optional 排序方向（可选项为：ASC, DESC）

inherited setSplitDraggable(){boolean} F.PanelBase.js, line 281

设置分隔条是否可以拖动

Returns:

Type	Description
boolean	是否可以拖动

setSummaryData(summaryRowIndex, summaryData) F.Grid.loadData.js, line 63

设置合计行数据

Name	Type	Description
`summaryRowIndex`	number	optional 合计行索引
`summaryData`	object	合计行数据

inherited setTitle(title) F.PanelBase.js, line 212

设置面板标题

Name	Type	Description
`title`	string	标题文本

inherited setTitleTooltip(tooltip) F.PanelBase.js, line 232

设置面板标题提示信息

Name	Type	Description
`tooltip`	string	提示信息字符串

inherited setTooltip(tooltip) F.Component.js, line 202

设置提示信息

Name	Type	Description
`tooltip`	string	提示信息

inherited setVisible(visible) F.Component.js, line 280

设置控件的显示状态

Name	Type	Description
`visible`	boolean	是否可见

inherited setWidth(width) F.Component.js, line 150

设置控件宽度

Name	Type	Description
`width`	number	宽度

inherited show() F.Component.js, line 268

显示控件

showColumn(columnId) F.Grid.js, line 880

显示列

Name	Type	Description
`columnId`	string	列标识符

inherited showLoading(opacity, container) F.Container.js, line 103

显示加载动画

Name	Type	Description
`opacity`	number	透明度（默认值：0.65）
`container`	jQuery	显示动画的目标元素（留空则为内容元素）

startEdit(row, columnId) F.Grid.cellEditing.js, line 102

开始编辑单元格

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素
`columnId`	string	列标识符

inherited toggleCollapse() F.PanelBase.js, line 206

切换面板的折叠状态

inherited toggleEnabled() F.Component.js, line 230

切换启用状态

toggleRowExpanders(rows) F.Grid.js, line 796

切换行扩展列的展开状态

Name	Type	Description
`rows`	jQuery	行元素

inherited toggleVisible() F.Component.js, line 274

切换显示状态

inherited trigger(eventName, args) F.Component.js, line 189

触发事件

Name	Type	Description
`eventName`	string	事件名称
`args`	Object	事件参数

unlockColumn(columnId) F.Grid.js, line 846

解锁列

Name	Type	Description
`columnId`	string	列标识符

updateCellValue(row, columnId, value, forceUpdate) F.Grid.cellEditing.js, line 93

更新单元格的值

Name	Type	Description
`row`	number \| string \| jQuery	行索引、行标识符或者行元素
`columnId`	string \| Object	列标识符或者简单对象
`value`	Object	optional 单元格的值
`forceUpdate`	boolean	是否强制更新（强制更新不显示左上角的已更改红色标识）

Examples

更新单元格的值

F.ui.grid1.updateCellValue(1, 'Name', '张三');

更新多个单元格的值

F.ui.grid1.updateCellValue(1, {
	'Name': '张三',
	'Gender': 1,
	'EntranceYear': 2018
});

更新单元格的属性（本示例禁用单元格）

F.ui.grid1.updateCellValue(1, 'Name.cls', 'f-grid-cell-uneditable');

更新多个单元格的属性（本示例禁用单元格）

F.ui.grid1.updateCellValue(1, {
	'Name.cls': 'f-grid-cell-uneditable',
	'Gender.cls': 'f-grid-cell-uneditable'
});

updateSummaryCellValue(rowIndex, columnId, value, forceUpdate) F.Grid.js, line 1015

更新合计行单元格的值

Name	Type	Default	Description
`rowIndex`	number	0	optional 合计行索引（默认为0）
`columnId`	string		列标识符
`value`	Object		合计行单元格的值
`forceUpdate`	boolean		是否强制更新（强制更新不显示左上角的已更改红色标识）

Events

afteredit F.Grid.cellEditing.js, line 39

单元格编辑完成时触发

Name Type Description

event jQuery.Event 事件对象

value * 单元格的值

params

Object

事件参数

Name	Type	Description
`rowValue`	Object	行数据（键值对，键的列标识符）
`rowIndex`	number	行索引
`rowId`	string	行标识符
`rowData`	Object	行数据
`columnIndex`	number	列索引
`columnId`	string	列标识符
`column`	Object	列对象
`td`	jQuery	单元格
`tr`	jQuery	行

beforeedit F.Grid.cellEditing.js, line 20

单元格进入编辑状态之前触发（返回false则取消编辑操作）

Name Type Description

event jQuery.Event 事件对象

value * 单元格的值

params

Object

事件参数

Name	Type	Description
`rowValue`	Object	行数据（键值对，键的列标识符）
`rowIndex`	number	行索引
`rowId`	string	行标识符
`rowData`	Object	行数据
`columnIndex`	number	列索引
`columnId`	string	列标识符
`column`	Object	列对象
`td`	jQuery	单元格
`tr`	jQuery	行

beforefilterchange F.Grid.headerMenuFilter.js, line 5

操作之前触发（返回false则取消过滤操作）

Name	Type	Description
`event`	jQuery.Event	事件对象
`columnId`	string	操作的列标识符
`actionType`	string	操作类型（reset,ok,cancel）

inherited beforehide F.Component.js, line 57

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

beforepaging F.Grid.js, line 376

分页之前触发（返回false则取消分页操作）

Name	Type	Description
`event`	jQuery.Event	事件对象
`pageIndex`	number	新页面的索引
`oldPageIndex`	number	老页面的索引

beforerowcontextmenu F.Grid.js, line 217

右键点击行时触发（返回false则阻止浏览器默认的右键菜单）

Name	Type	Description
`event`	jQuery.Event	事件对象
`rowId`	string	行标识符
`rowIndex`	number	行索引

inherited beforeshow F.Component.js, line 69

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

beforesorting F.Grid.js, line 273

操作之前触发（返回false则取消排序操作）

Name	Type	Description
`event`	jQuery.Event	事件对象
`sortField`	string	列字段名称
`sortDirection`	string	排序方向（可选项为：ASC, DESC）
`columnId`	string	列标识符

beforetabedit F.Grid.cellEditing.js, line 5

通过Tab键导航单元格之前触发（返回false则取消下一个单元格的编辑操作）

Name Type Description

event jQuery.Event 事件对象

params

Object

事件参数

Name	Type	Description
`columnIndex`	number	列索引
`columnId`	string	列标识符
`column`	Object	列对象
`td`	jQuery	单元格
`tr`	jQuery	行
`nextTd`	jQuery	即将进入编辑状态的单元格

bigdatarowtip F.Grid.js, line 229

大数据行数提示

Name	Type	Description
`event`	jQuery.Event	事件对象
`startRowNumber`	number	开始行数
`endRowNumber`	number	结束行数
`rowCount`	number	总行数

inherited collapse F.PanelBase.js, line 68

折叠面板时触发

Name	Type	Description
`event`	jQuery.Event	事件对象

columnhide F.Grid.js, line 359

隐藏列时触发

Name	Type	Description
`event`	jQuery.Event	事件对象
`columnId`	string	列标识符

columnlock F.Grid.js, line 343

锁定列时触发

Name	Type	Description
`event`	jQuery.Event	事件对象
`columnId`	string	列标识符

columnmove F.Grid.loadData.js, line 10

移动列时触发（拖动操作）

Name	Type	Description
`event`	jQuery.Event	事件对象
`targetColumnId`	string	目标列标识符
`sourceColumnId`	string	源列标识符
`operation`	string	操作类型（before：在目标列前面插入源列；after：在目标列后面插入源列）

columnresize F.Grid.loadData.js, line 20

改变列宽度时触发（拖动操作）

Name	Type	Description
`event`	jQuery.Event	事件对象
`columnId`	string	列标识符
`newColumnWidth`	number	改变后列宽度

columnshow F.Grid.js, line 368

显示列时触发

Name	Type	Description
`event`	jQuery.Event	事件对象
`columnId`	string	列标识符

columnunlock F.Grid.js, line 351

解锁列时触发

Name	Type	Description
`event`	jQuery.Event	事件对象
`columnId`	string	列标识符

datachange F.Grid.cellEditing.js, line 58

数据改变时触发

Name	Type	Description
`event`	jQuery.Event	事件对象

dataload F.Grid.loadData.js, line 4

表格数据加载完毕时触发

inherited dirtychange F.PanelBase.js, line 45

容器内的字段值改变时触发

inherited expand F.PanelBase.js, line 76

展开面板时触发

Name	Type	Description
`event`	jQuery.Event	事件对象

filterchange F.Grid.headerMenuFilter.js, line 16

表头过滤时触发

Name	Type	Description
`event`	jQuery.Event	事件对象
`filteredData`	Object	过滤数据
`columnId`	string	操作的列标识符
`actionType`	string	操作类型（reset,ok,cancel）

inherited hide F.Component.js, line 63

隐藏控件时触发

inherited iframeload F.PanelBase.js, line 84

内联框架加载完毕时触发

inherited layout F.Component.js, line 45

布局控件时触发

paging F.Grid.js, line 385

分页跳转时触发

Name	Type	Description
`event`	jQuery.Event	事件对象
`pageIndex`	number	新页面的索引
`oldPageIndex`	number	老页面的索引

inherited render F.Component.js, line 51

渲染控件时触发

inherited resize F.PanelBase.js, line 61

面板尺寸改变时触发

rowclick F.Grid.js, line 197

点击行时触发

Name	Type	Description
`event`	jQuery.Event	事件对象
`rowId`	string	行标识符
`rowIndex`	number	行索引

rowcollapse F.Grid.js, line 315

折叠行时触发

Name	Type	Description
`event`	jQuery.Event	事件对象
`rowId`	string	行标识符
`rowIndex`	number	行索引

rowdblclick F.Grid.js, line 207

双击行时触发

Name	Type	Description
`event`	jQuery.Event	事件对象
`rowId`	string	行标识符
`rowIndex`	number	行索引

rowdeselect F.Grid.js, line 254

取消选中行时触发

Name	Type	Description
`event`	jQuery.Event	事件对象
`rowId`	string	行标识符
`rowIndex`	number	行索引

rowexpand F.Grid.js, line 305

展开行时触发

Name	Type	Description
`event`	jQuery.Event	事件对象
`rowId`	string	行标识符
`rowIndex`	number	行索引

rowexpandercollapse F.Grid.js, line 334

折叠行扩展列时触发

Name	Type	Description
`event`	jQuery.Event	事件对象
`rowId`	string	行标识符
`rowIndex`	number	行索引

rowexpanderexpand F.Grid.js, line 324

展开行扩展列时触发

Name	Type	Description
`event`	jQuery.Event	事件对象
`rowId`	string	行标识符
`rowIndex`	number	行索引

rowlazyload F.Grid.js, line 295

延迟加载行数据时触发

Name	Type	Description
`event`	jQuery.Event	事件对象
`rowId`	string	行标识符
`rowIndex`	number	行索引

rowselect F.Grid.js, line 243

选中行时触发

Name	Type	Description
`event`	jQuery.Event	事件对象
`rowId`	string	行标识符
`rowIndex`	number	行索引

selectionchange F.Grid.js, line 264

选中的行改变时触发

Name	Type	Description
`event`	jQuery.Event	事件对象

inherited show F.Component.js, line 75

显示控件时触发

sorting F.Grid.js, line 285

排序时触发

Name	Type	Description
`event`	jQuery.Event	事件对象
`sortField`	string	列字段名称
`sortDirection`	string	排序方向（可选项为：ASC, DESC）
`columnId`	string	列标识符

inherited splitdrag F.PanelBase.js, line 53

拖动分隔条时触发（拖动操作）

Name	Type	Description
`event`	jQuery.Event	事件对象

F.js v8.2.1

Class: Grid

new F.Grid(options)

Example

Extends

Members

bodyEljQuery

eljQuery

itemsObject

Methods

inherited add(value)

Example

addNewRecord(id, text, record, appendToEnd, editColumnId){string}

Returns:

Examples

addNewRecords(records, appendToEnd)

Examples

inherited addTool(item)

appendData(data)

calcSummaryValue(columnId, summaryType)

cancelEdit()

clearData()

clearDirty()

clearSelection()

inherited collapse()

collapseRow(row, deep)

collapseRowExpander(row)

collapseRowExpanders(rows)

collapseRows()

commitChanges()

configColumns(columns, options)

deleteRow(row, forceUpdate)

deleteRows(rowIds, forceUpdate)

deleteSelectedRows(forceUpdate)

deselectAllRows()

deselectRow(row)

deselectRows(rowIds)

inherited disable()

inherited doLayout(startFormTopmostComonent)

inherited enable()

inherited expand()

expandPath(path)

expandRow(row, deep)

expandRowExpander(row)

expandRowExpanders(rows)

expandRowPath(row)

expandRows()

inherited getAttr(key){string}

Returns:

getCellData(row, columnId){Object}

Returns:

getCellEl(row, columnId){jQuery}

Returns:

getCellValue(row, columnId){Object}

Returns:

getCheckedRows(){Array.<string>}

Returns:

getColumn(column){Object}

Returns:

getColumnHeaderEl(columnId){jQuery}

Returns:

getColumnHeaderEls(){jQuery}

Returns:

getColumnId(column){Object}

Returns:

getColumnIds(){Array.<string>}

Returns:

getDeletedRows(){Array.<string>}

Returns:

getEndRowIndex(){number}

Returns:

getExpandedRows(){Array.<string>}

Returns:

getField(fieldName){string|Object}

Returns:

getFilteredData(){Object}

Returns:

getFormFields()

inherited getHeight(){number}

Returns: