Grid

F. Grid

new Grid(options)

Description:
  • 表格控件

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 '<a href="http://gsa.ustc.edu.cn/search?q=' + encodeURIComponent(value) + '">' + value + '</a>';
		}
	}],
	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"]
	]
});
Parameters:
Name Type Description
options Object

初始参数

Properties
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

行扩展列

Properties
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

树表格

Properties
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

行分组

Properties
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'

控件类型

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

add(value)

Description:
  • 添加新的子控件到当前控件

Inherited From:
Example
menu1.add(['-', {
		type: 'menuitem',
		text: '新菜单项'
}]);
Parameters:
Name Type Description
value Object | Array.<Object>

控件实例数组

addNewRecord(idopt, textopt, record, appendToEnd, editColumnId) → {string}

Description:
  • 添加一条新记录

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);
Parameters:
Name Type Attributes Description
id string <optional>

行标识符

text string <optional>

行文本

record Object

新记录对象

appendToEnd boolean | number

是否添加到行尾部(如果是数字,则表示插入的位置)

editColumnId string | boolean

添加后立即进入编辑状态的列标识符(如果传入布尔值false,则不进入编辑状态)

Returns:

行标识符

Type
string

addNewRecords(records, appendToEnd)

Description:
  • 添加多条新记录

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);
Parameters:
Name Type Description
records Object

新记录对象数组

appendToEnd boolean | number

是否添加到行尾部(如果是数字,则表示插入的位置)

addTool(item)

Description:
  • 添加工具图标

Inherited From:
Parameters:
Name Type Description
item F.Tool

工具图标实例

appendData(data)

Description:
  • 追加数据

Parameters:
Name Type Description
data Array.<Object>

数据

calcSummaryValue(columnId, summaryType)

Description:
  • 计算合计行的值

Parameters:
Name Type Default Description
columnId string

列标识符

summaryType string 'sum'

合计行类型(可选项为:sum, min, max, count, avg)

cancelEdit()

Description:
  • 取消正在编辑的单元格

clearData()

Description:
  • 清空全部数据

clearDirty()

Description:
  • 不支持此方法

Overrides:

clearSelection()

Description:
  • 清空全部选中行、单元格

collapse()

Description:
  • 折叠面板

Inherited From:

collapseRow(row, deep)

Description:
  • 折叠行(适用于树表格和行分组)

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

deep boolean

是否递归调用子节点(仅树表格有效)

collapseRowExpander(row)

Description:
  • 折叠行扩展列

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

collapseRowExpanders(rows)

Description:
  • 折叠行扩展列

Parameters:
Name Type Description
rows Array.<number> | Array.<string> | Array.<jQuery>

行索引数组、行标识符数组或者行元素数组

collapseRows()

Description:
  • 折叠全部行(适用于树表格和行分组)

commitChanges()

Description:
  • 提交所有改动

configColumns(columns, options)

Description:
  • 重新配置表格列

Parameters:
Name Type Description
columns Array.<Object>

表格列集合

options Object

参数

Properties
Name Type Default Description
idField boolean ''

标识行 id 的字段名称

textField boolean ''

标识行 text 的字段名称

multiSelect boolean true

是否允许多选

checkboxSelect boolean false

是否启用多选框列

deleteRow(row, forceUpdate)

Description:
  • 删除行

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

forceUpdate boolean

是否强制更新(强制更新时从数据源中删除行)

deleteRows(rowIds, forceUpdate)

Description:
  • 删除多行

Parameters:
Name Type Description
rowIds Array.<number> | Array.<string> | Array.<jQuery>

行索引数组、行标识符数组或者行元素数组

forceUpdate boolean

是否强制更新(强制更新时从数据源中删除行)

deleteSelectedRows(forceUpdate)

Description:
  • 删除选中的行

Parameters:
Name Type Description
forceUpdate boolean

是否强制更新(强制更新时从数据源中删除行)

deselectAllRows()

Description:
  • 取消选中全部行

deselectRow(row)

Description:
  • 取消选中行

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

deselectRows(rowIds)

Description:
  • 取消选中多行

Parameters:
Name Type Description
rowIds Array.<number> | Array.<string> | Array.<jQuery>

行索引数组、行标识符数组或者行元素数组

disable()

Description:
  • 禁用控件

Inherited From:

doLayout(startFormTopmostComonentopt)

Description:
  • 执行布局操作

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

从最顶层的控件开始布局

enable()

Description:
  • 启用控件

Inherited From:

expand()

Description:
  • 展开面板

Inherited From:

expandPath(path)

Description:
  • 展开路径(仅树表格有效)

Parameters:
Name Type Description
path string

指定的路径

expandRow(row, deep)

Description:
  • 展开行(适用于树表格和行分组)

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

deep boolean

是否递归调用子节点(仅树表格有效)

expandRowExpander(row)

Description:
  • 展开行扩展列

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

expandRowExpanders(rows)

Description:
  • 展开行扩展列

Parameters:
Name Type Description
rows Array.<number> | Array.<string> | Array.<jQuery>

行索引数组、行标识符数组或者行元素数组

expandRowPath(row)

Description:
  • 展开行所在路径(仅树表格有效)

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

expandRows()

Description:
  • 展开全部行(适用于树表格和行分组)

getAttr(key) → {string}

Description:
  • 获取节点属性

Inherited From:
Parameters:
Name Type Description
key string

节点属性键

Returns:

节点属性值

Type
string

getCellData(row, columnId) → {Object}

Description:
  • 获取单元格数据

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

columnId string

列标识符

Returns:

单元格数据

Type
Object

getCellEl(row, columnId) → {jQuery}

Description:
  • 获取单元格元素

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

columnId string

列标识符

Returns:

单元格元素

Type
jQuery

getCellValue(row, columnId) → {Object}

Description:
  • 获取单元格的值

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

columnId string

列标识符

Returns:

单元格的值

Type
Object

getCheckedRows() → {Array.<string>}

Description:
  • 获取选中的行标识符数组(仅适用于树表格)

Returns:

行标识符数组

Type
Array.<string>

getColumn(column) → {Object}

Description:
  • 获取列对象

Parameters:
Name Type Description
column string | jQuery

列标识符、单元格元素

Returns:

列对象

Type
Object

getColumnHeaderEl(columnId) → {jQuery}

Description:
  • 获取列的标题栏元素

Parameters:
Name Type Description
columnId string

列标识符

Returns:

列的标题栏元素

Type
jQuery

getColumnHeaderEls() → {jQuery}

Description:
  • 获取所有列的标题栏元素

Returns:

所有列的标题栏元素

Type
jQuery

getColumnId(column) → {Object}

Description:
  • 获取列标识符

Parameters:
Name Type Description
column jQuery

单元格元素

Returns:

列标识符

Type
Object

getColumnIds() → {Array.<string>}

Description:
  • 获取列标识符数组

Returns:

列标识符数组

Type
Array.<string>

getDeletedRows() → {Array.<string>}

Description:
  • 获取删除的行标识符数组

Returns:

行标识符数组

Type
Array.<string>

getEndRowIndex() → {number}

Description:
  • 获取当前页的结束索引值

Returns:

当前页的结束索引值

Type
number

getExpandedRows() → {Array.<string>}

Description:
  • 获取展开的行标识符数组(仅适用于树表格)

Returns:

行标识符数组

Type
Array.<string>

getField(fieldName) → {string|Object}

Description:
  • 获取字段对象

Parameters:
Name Type Description
fieldName string | Number

字段名称或者索引

Returns:

字段名称或者字段对象

Type
string | Object

getFilteredData() → {Object}

Description:
  • 获取过滤参数

Returns:

过滤参数

Type
Object

getFormFields()

Description:
  • 不支持此方法

Overrides:

getHeight() → {number}

Description:
  • 获取控件高度

Inherited From:
Returns:

高度

Type
number

getHiddenColumns(returnColumnData) → {Array.<string>}

Description:
  • 获取隐藏的列标识符数组

Parameters:
Name Type Description
returnColumnData boolean

返回包含列对象的数组,否则返回包含列标识符的数组

Returns:

隐藏的列标识符数组

Type
Array.<string>

getIFrameEl() → {jQuery}

Description:
  • 获取内联框架元素

Inherited From:
Returns:

内联框架元素

Type
jQuery

getIFrameUrl() → {string}

Description:
  • 获取内联框架地址

Inherited From:
Returns:

内联框架地址

Type
string

getIFrameWindow() → {Window}

Description:
  • 获取内联框架窗体对象

Inherited From:
Returns:

内联框架窗体对象

Type
Window

getIconEl() → {jQuery}

Description:
  • 获取图标元素

Inherited From:
Returns:

图标元素

Type
jQuery

getItem(value) → {F.Component}

Description:
  • 获取子控件

Inherited From:
Parameters:
Name Type Description
value number | string | function

子控件索引、标识符或者函数

Returns:

子控件实例

Type
F.Component

getMergedData()

Description:
  • 获取合并后的值(排除删除行数据)

getModifiedData()

Description:
  • 获取修改的值

getNextCellEl(td, verticalNavigate, multiRowsNavigate)

Description:
  • 获取下一单元格

Parameters:
Name Type Default Description
td jQuery

单元格元素

verticalNavigate boolean false

垂直方向导航(默认为false)

multiRowsNavigate boolean false

跨行导航(默认为false)

getNextRowEl(tr)

Description:
  • 获取下一行

Parameters:
Name Type Description
tr jQuery

行元素

getPageCount() → {number}

Description:
  • 获取总页数

Returns:

总页数

Type
number

getPageIndex() → {number}

Description:
  • 获取当前页的索引值

Returns:

当前页的索引值

Type
number

getPageSize() → {number}

Description:
  • 获取每页显示记录数

Returns:

每页显示记录数

Type
number

getPagedData() → {Array.<Object>}

Description:
  • 获取分页数据

Returns:

分页数据

Type
Array.<Object>

getPrevCellEl(td, verticalNavigate, multiRowsNavigate)

Description:
  • 获取上一单元格

Parameters:
Name Type Default Description
td jQuery

单元格元素

verticalNavigate boolean false

垂直方向导航(默认为false)

multiRowsNavigate boolean false

跨行导航(默认为false)

getPrevRowEl(tr)

Description:
  • 获取上一行

Parameters:
Name Type Description
tr jQuery

行元素

getRecordCount() → {number}

Description:
  • 获取总记录数

Returns:

总记录数

Type
number

getRowData(row) → {Object}

Description:
  • 获取行数据

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

Returns:

行数据

Type
Object

getRowEl(row, includeLockedTable) → {jQuery}

Description:
  • 获取行元素

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

includeLockedTable boolean

是否包含锁定表格中的行

Returns:

行元素

Type
jQuery

getRowEls(includeLockedTable) → {jQuery}

Description:
  • 获取行元素

Parameters:
Name Type Description
includeLockedTable boolean

是否包含锁定表格中的行元素

Returns:

行元素

Type
jQuery

getRowId(row) → {string}

Description:
  • 获取行标识符

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

Returns:

行标识符

Type
string

getRowPath(row) → {string}

Description:
  • 获取行路径(仅适用于树表格,返回类似 frow11/frow23/frow60 的字符串)

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

Returns:

行路径

Type
string

getRowValue(row) → {Object}

Description:
  • 获取行值(列标识符和值的键值对)

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

Returns:

行值

Type
Object

getScrollEl() → {jQuery}

Description:
  • 获取可滚动元素

Inherited From:
Returns:

可滚动元素

Type
jQuery

getSelectedCell(returnCellData) → {Array.<string>}

Description:
  • 获取选中的单元格

Parameters:
Name Type Description
returnCellData boolean

返回单元格对象,否则返回标识单元格的数组

Returns:

选中的单元格([行标识符, 列标识符])

Type
Array.<string>

getSelectedCellColumnId() → {string}

Description:
  • 获取选中单元格的列ID

Returns:

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

Type
string

getSelectedCellEl()

Description:
  • 获取选中的单元格元素

getSelectedRow(returnRowData) → {string}

Description:
  • 获取选中的行标识符

Parameters:
Name Type Description
returnRowData boolean

返回包含行对象的数组,否则返回包含行标识符的数组

Returns:

列标识符

Type
string

getSelectedRowEl(includeLockedRows) → {jQuery}

Description:
  • 获取选中的行元素

Parameters:
Name Type Description
includeLockedRows boolean

是否包含锁定表格的行元素

Returns:

选中的行元素

Type
jQuery

getSelectedRowEls(includeLockedRows) → {jQuery}

Description:
  • 获取选中的行元素

Parameters:
Name Type Description
includeLockedRows boolean

是否包含锁定表格的行元素

Returns:

选中的行元素

Type
jQuery

getSelectedRows(returnRowData) → {Array.<string>}

Description:
  • 获取选中的行标识符数组

Parameters:
Name Type Description
returnRowData boolean

返回包含行对象的数组,否则返回包含行标识符的数组

Returns:

列标识符数组

Type
Array.<string>

getSortColumn(sortField) → {Object}

Description:
  • 获取排序列对象

Parameters:
Name Type Description
sortField string

排序字段

Returns:

列对象

Type
Object

getStartRowIndex() → {number}

Description:
  • 获取当前页的开始索引值

Returns:

当前页的开始索引值

Type
number

getTitle() → {string}

Description:
  • 获取面板标题

Inherited From:
Returns:

标题文本

Type
string

getTitleTooltip() → {string}

Description:
  • 获取面板标题提示信息

Inherited From:
Returns:

标题提示信息

Type
string

getTooltip() → {string}

Description:
  • 获取提示信息

Inherited From:
Returns:

提示信息

Type
string

getVisibleColumnCount() → {number}

Description:
  • 获取可见列的数量

Returns:

可见列的数量

Type
number

getWidth() → {number}

Description:
  • 获取控件宽度

Inherited From:
Returns:

宽度

Type
number

hasHScrollbar() → {boolean}

Description:
  • 是否存在水平滚动条

Inherited From:
Returns:

是否存在水平滚动条

Type
boolean

hasIcon() → {boolean}

Description:
  • 是否有图标

Inherited From:
Returns:

是否有图标

Type
boolean

hasSelection() → {boolean}

Description:
  • 是否有选中行

Returns:

是否有选中行

Type
boolean

hasVScrollbar() → {boolean}

Description:
  • 是否存在垂直滚动条

Inherited From:
Returns:

是否存在垂直滚动条

Type
boolean

hide()

Description:
  • 隐藏面板

Inherited From:

hideColumn(columnId, hidden)

Description:
  • 隐藏列

Parameters:
Name Type Description
columnId string

列标识符

hidden boolean

是否隐藏

hideLoading()

Description:
  • 隐藏加载动画

Inherited From:

insert(insertIndex, value)

Description:
  • 插入新的子控件到当前控件

Inherited From:
Example
menu1.insert(0, ['-', {
		type: 'menuitem',
		text: '新菜单项'
}]);
Parameters:
Name Type Description
insertIndex number

插入的位置

value Object | Array.<Object>

控件实例数组

insertTool(item, insertIndex)

Description:
  • 插入工具图标

Inherited From:
Parameters:
Name Type Description
item F.Tool

工具图标实例

insertIndex number

插入的位置

isAllSelected() → {boolean}

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

Returns:

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

Type
boolean

isCollapsed() → {boolean}

Description:
  • 是否处于折叠状态

Inherited From:
Returns:

折叠状态

Type
boolean

isDirty()

Description:
  • 不支持此方法

Overrides:

isDisabled() → {boolean}

Description:
  • 是否禁用

Inherited From:
Returns:

是否禁用

Type
boolean

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

isValid()

Description:
  • 不支持此方法

Overrides:

isVisible() → {boolean}

Description:
  • 是否可见

Inherited From:
Returns:

是否可见

Type
boolean

loadData(parentRowIdopt, data, summaryData)

Description:
  • 加载数据

Parameters:
Name Type Attributes Description
parentRowId string <optional>

加载节点数据(仅适用于树表格)

data Array.<Object>

数据

summaryData Array.<Object>

汇总数据

loadDataUrl(dataUrlopt, dataParams)

Description:
  • 加载数据

Parameters:
Name Type Attributes Description
dataUrl string <optional>

数据源地址

dataParams object

参数

loadPageData(pageIndex)

Description:
  • 加载分页数据(仅适用于客户端数据分页)

Parameters:
Name Type Description
pageIndex number

分页序号

loadSortData(pageIndex)

Description:
  • 加载排序数据(仅适用于客户端数据排序)

Parameters:
Name Type Description
pageIndex number

分页序号

lockColumn(columnId)

Description:
  • 锁定列

Parameters:
Name Type Description
columnId string

列标识符

mergeCells(cells)

Description:
  • 合并单元格

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
		}]);
Parameters:
Name Type Description
cells Array.<Object>

需要合并的单元格数组

mergeColumns(columns, options)

Description:
  • 合并列

Example
F.ui.grid1.mergeColumns(['Major', 'Group', 'LogTime']);
Parameters:
Name Type Description
columns Array.<string>

需要合并的列标识符数组

options Object

合并参数

Properties
Name Type Description
depends boolean

后一列的单元格合并取决于前一列的合并状态

dependsFirst boolean

后一列的单元格合并取决于第一列的合并状态

moveRowDown(row)

Description:
  • 行下移

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

moveRowUp(row)

Description:
  • 行上移

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

moveRowsDown(rows)

Description:
  • 多行下移

Parameters:
Name Type Description
rows Array.<number> | Array.<string> | Array.<jQuery>

行索引数组、行标识符数组或者行元素数组

moveRowsUp(rows)

Description:
  • 多行上移

Parameters:
Name Type Description
rows Array.<number> | Array.<string> | Array.<jQuery>

行索引数组、行标识符数组或者行元素数组

off(eventNames, fn)

Description:
  • 移除事件

Inherited From:
Parameters:
Name Type Description
eventNames string

事件名称(可以空格分割多个事件名称)

fn F_Component_on

之前注册的事件处理函数

on(eventNames, fn)

Description:
  • 注册事件

Inherited From:
Parameters:
Name Type Description
eventNames string

事件名称(可以空格分割多个事件名称)

fn F_Component_on

触发事件时执行的函数

refreshIFrame()

Description:
  • 刷新内联框架

Inherited From:

rejectChanges()

Description:
  • 拒绝所有改动

remove()

Description:
  • 删除父控件中移除当前控件

Inherited From:

removeAttr(key)

Description:
  • 删除节点属性

Inherited From:
Parameters:
Name Type Description
key string

节点属性键

removeTooltip()

Description:
  • 删除提示信息

Inherited From:

reset()

Description:
  • 不支持此方法

Overrides:

resetFilter(columnId)

Description:
  • 重置某个列的过滤参数

Parameters:
Name Type Description
columnId string

列标识符

resetFilters()

Description:
  • 重置过滤参数

resolveColumn(fn)

Description:
  • 遍历列

Parameters:
Name Type Description
fn F_Grid_resolveColumn

遍历列的回调函数

resolveRow(fn, rowopt)

Description:
  • 遍历行

Parameters:
Name Type Attributes Description
fn F_Grid_resolveRow

遍历行的回调函数

row number | string | jQuery | Array <optional>

行索引、行标识符、行元素或者包含行数据的数组(如果留空则为全部行数据)

saveEdit()

Description:
  • 保存正在编辑的单元格

scrollToCell(row, columnId)

Description:
  • 滚动到单元格

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

columnId string

列标识符

scrollToRow(row)

Description:
  • 滚动到行

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

selectAllRows()

Description:
  • 选中全部行

selectCell(row, columnId, options)

Description:
  • 选中单元格

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

columnId string

列标识符

options Object

参数

Properties
Name Type Default Description
scrollTo boolean true

是否滚动到选中单元格

selectRow(row, options)

Description:
  • 选中行

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

options Object

参数

Properties
Name Type Default Description
keep boolean false

是否保持已选中行

keepUnselectable boolean true

是否保持不可选择行的选中状态(options.keep=true时,此参数无效)

scrollTo boolean true

是否滚动到选中行(仅有一行处于选中状态时有效)

selectRows(rowIds, options)

Description:
  • 选中多行

Parameters:
Name Type Description
rowIds Array.<number> | Array.<string> | Array.<jQuery>

行索引数组、行标识符数组或者行元素数组

options Object

参数

Properties
Name Type Default Description
keep boolean false

是否保持已选中行

keepUnselectable boolean true

是否保持不可选择行的选中状态(options.keep=true时,此参数无效)

scrollTo boolean true

是否滚动到选中行(仅有一行处于选中状态时有效)

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

是否禁用

setDisplayType(displayType)

Description:
  • 设置显示模式

Parameters:
Name Type Description
displayType string

显示模式

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

是否隐藏

setHiddenColumns(columns)

Description:
  • 设置隐藏的列

Parameters:
Name Type Description
columns Array.<string>

隐藏的列标识符数组

setIFrameUrl(url)

Description:
  • 设置内联框架地址

Inherited From:
Parameters:
Name Type Description
url string

内联框架地址

setIcon(icon)

Description:
  • 设置图标地址

Inherited From:
Example
F.ui.panel1.setIcon('../res/images/16/1.png');
Parameters:
Name Type Description
icon string

图标地址

setIconFont(iconFont)

Description:
  • 设置图标字体

Inherited From:
Example
F.ui.panel1.setIconFont('bank');
Parameters:
Name Type Description
iconFont string

图标字体

setPageIndex(newPageIndex)

Description:
  • 设置新的分页索引

Parameters:
Name Type Description
newPageIndex number

新的分页索引

setPageSize(newPageSize)

Description:
  • 设置每页记录数

Parameters:
Name Type Description
newPageSize number

每页记录数

setRecordCount(newRecordCount)

Description:
  • 设置总记录数

Parameters:
Name Type Description
newRecordCount number

总记录数

setSize(width, height)

Description:
  • 设置控件尺寸

Inherited From:
Parameters:
Name Type Description
width number

宽度

height number

高度

setSortField(field, directionopt)

Description:
  • 设置表格的排序状态

Parameters:
Name Type Attributes Description
field string | Array.<string>

排序字段(或者排序字段列表,仅适用于多列排序)

direction string <optional>

排序方向(可选项为:ASC, DESC)

setSplitDraggable() → {boolean}

Description:
  • 设置分隔条是否可以拖动

Inherited From:
Returns:

是否可以拖动

Type
boolean

setSummaryData(summaryRowIndexopt, summaryData)

Description:
  • 设置合计行数据

Parameters:
Name Type Attributes Description
summaryRowIndex number <optional>

合计行索引

summaryData object

合计行数据

setTitle(title)

Description:
  • 设置面板标题

Inherited From:
Parameters:
Name Type Description
title string

标题文本

setTitleTooltip(tooltip)

Description:
  • 设置面板标题提示信息

Inherited From:
Parameters:
Name Type Description
tooltip string

提示信息字符串

setTooltip(tooltip)

Description:
  • 设置提示信息

Inherited From:
Parameters:
Name Type Description
tooltip string

提示信息

setVisible(visible)

Description:
  • 设置控件的显示状态

Inherited From:
Parameters:
Name Type Description
visible boolean

是否可见

setWidth(width)

Description:
  • 设置控件宽度

Inherited From:
Parameters:
Name Type Description
width number

宽度

show()

Description:
  • 显示控件

Inherited From:

showColumn(columnId)

Description:
  • 显示列

Parameters:
Name Type Description
columnId string

列标识符

showLoading(opacity, container)

Description:
  • 显示加载动画

Inherited From:
Parameters:
Name Type Description
opacity number

透明度(默认值:0.65)

container jQuery

显示动画的目标元素(留空则为内容元素)

startEdit(row, columnId)

Description:
  • 开始编辑单元格

Parameters:
Name Type Description
row number | string | jQuery

行索引、行标识符或者行元素

columnId string

列标识符

toggleCollapse()

Description:
  • 切换面板的折叠状态

Inherited From:

toggleEnabled()

Description:
  • 切换启用状态

Inherited From:

toggleRowExpanders(rows)

Description:
  • 切换行扩展列的展开状态

Parameters:
Name Type Description
rows jQuery

行元素

toggleVisible()

Description:
  • 切换显示状态

Inherited From:

trigger(eventName, args)

Description:
  • 触发事件

Inherited From:
Parameters:
Name Type Description
eventName string

事件名称

args Object

事件参数

unlockColumn(columnId)

Description:
  • 解锁列

Parameters:
Name Type Description
columnId string

列标识符

updateCellValue(row, columnId, valueopt, forceUpdate)

Description:
  • 更新单元格的值

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'
});
Parameters:
Name Type Attributes Description
row number | string | jQuery

行索引、行标识符或者行元素

columnId string | Object

列标识符或者简单对象

value Object <optional>

单元格的值

forceUpdate boolean

是否强制更新(强制更新不显示左上角的已更改红色标识)

updateSummaryCellValue(rowIndexopt, columnId, value, forceUpdate)

Description:
  • 更新合计行单元格的值

Parameters:
Name Type Attributes Default Description
rowIndex number <optional>
0

合计行索引(默认为0)

columnId string

列标识符

value Object

合计行单元格的值

forceUpdate boolean

是否强制更新(强制更新不显示左上角的已更改红色标识)

Events

afteredit

Description:
  • 单元格编辑完成时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

value *

单元格的值

params Object

事件参数

Properties
Name Type Description
rowValue Object

行数据(键值对,键的列标识符)

rowId string

行标识符

rowData Object

行数据

columnId string

列标识符

column Object

列对象

td jQuery

单元格

tr jQuery

beforeedit

Description:
  • 单元格进入编辑状态之前触发(返回false则取消编辑操作)

Parameters:
Name Type Description
event jQuery.Event

事件对象

value *

单元格的值

params Object

事件参数

Properties
Name Type Description
rowValue Object

行数据(键值对,键的列标识符)

rowId string

行标识符

rowData Object

行数据

columnId string

列标识符

column Object

列对象

td jQuery

单元格

tr jQuery

beforefilterchange

Description:
  • 操作之前触发(返回false则取消过滤操作)

Parameters:
Name Type Description
event jQuery.Event

事件对象

columnId string

操作的列标识符

actionType string

操作类型(reset,ok,cancel)

beforehide

Description:
  • 隐藏控件之前触发(返回false则取消隐藏操作)

Inherited From:

beforepaging

Description:
  • 分页之前触发(返回false则取消分页操作)

Parameters:
Name Type Description
event jQuery.Event

事件对象

pageIndex number

新页面的索引

oldPageIndex number

老页面的索引

beforerowcontextmenu

Description:
  • 右键点击行时触发(返回false则阻止浏览器默认的右键菜单)

Parameters:
Name Type Description
event jQuery.Event

事件对象

rowId string

行标识符

beforeshow

Description:
  • 显示控件之前触发(返回false则取消显示操作)

Inherited From:

beforesorting

Description:
  • 操作之前触发(返回false则取消排序操作)

Parameters:
Name Type Description
event jQuery.Event

事件对象

sortField string

列字段名称

sortDirection string

排序方向(可选项为:ASC, DESC)

columnId string

列标识符

beforetabedit

Description:
  • 通过Tab键导航单元格之前触发(返回false则取消下一个单元格的编辑操作)

Parameters:
Name Type Description
event jQuery.Event

事件对象

params Object

事件参数

Properties
Name Type Description
columnId string

列标识符

column Object

列对象

td jQuery

单元格

tr jQuery

nextTd jQuery

即将进入编辑状态的单元格

bigdatarowtip

Description:
  • 大数据行数提示

Parameters:
Name Type Description
event jQuery.Event

事件对象

startRowNumber number

开始行数

endRowNumber number

结束行数

rowCount number

总行数

collapse

Description:
  • 折叠面板时触发

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

事件对象

columnhide

Description:
  • 隐藏列时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

columnId string

列标识符

columnlock

Description:
  • 锁定列时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

columnId string

列标识符

columnmove

Description:
  • 移动列时触发(拖动操作)

Parameters:
Name Type Description
event jQuery.Event

事件对象

targetColumnId string

目标列标识符

sourceColumnId string

源列标识符

operation string

操作类型(before:在目标列前面插入源列;after:在目标列后面插入源列)

columnresize

Description:
  • 改变列宽度时触发(拖动操作)

Parameters:
Name Type Description
event jQuery.Event

事件对象

columnId string

列标识符

newColumnWidth number

改变后列宽度

columnshow

Description:
  • 显示列时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

columnId string

列标识符

columnunlock

Description:
  • 解锁列时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

columnId string

列标识符

datachange

Description:
  • 数据改变时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

dataload

Description:
  • 表格数据加载完毕时触发

dirtychange

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

Inherited From:

expand

Description:
  • 展开面板时触发

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

事件对象

filterchange

Description:
  • 表头过滤时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

filteredData Object

过滤数据

columnId string

操作的列标识符

actionType string

操作类型(reset,ok,cancel)

hide

Description:
  • 隐藏控件时触发

Inherited From:

iframeload

Description:
  • 内联框架加载完毕时触发

Inherited From:

layout

Description:
  • 布局控件时触发

Inherited From:

paging

Description:
  • 分页跳转时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

pageIndex number

新页面的索引

oldPageIndex number

老页面的索引

render

Description:
  • 渲染控件时触发

Inherited From:

resize

Description:
  • 面板尺寸改变时触发

Inherited From:

rowclick

Description:
  • 点击行时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

rowId string

行标识符

rowcollapse

Description:
  • 折叠行时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

rowId string

行标识符

rowdblclick

Description:
  • 双击行时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

rowId string

行标识符

rowdeselect

Description:
  • 取消选中行时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

rowId string

行标识符

rowexpand

Description:
  • 展开行时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

rowId string

行标识符

rowexpandercollapse

Description:
  • 折叠行扩展列时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

rowId string

行标识符

rowexpanderexpand

Description:
  • 展开行扩展列时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

rowId string

行标识符

rowlazyload

Description:
  • 延迟加载行数据时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

rowId string

行标识符

rowselect

Description:
  • 选中行时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

rowId string

行标识符

selectionchange

Description:
  • 选中的行改变时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

show

Description:
  • 显示控件时触发

Inherited From:

sorting

Description:
  • 排序时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

sortField string

列字段名称

sortDirection string

排序方向(可选项为:ASC, DESC)

columnId string

列标识符

splitdrag

Description:
  • 拖动分隔条时触发(拖动操作)

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

事件对象