new Grid(options)
- Description:
表格控件
Example
FineUI.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
|
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
FineUI.ui.grid1.addNewRecord({
"Name": "张三",
"Gender": "1",
"Major": "化学系"
}, true);
FineUI.ui.grid1.addNewRecord({"104", "张三", {
"Name": "张三",
"Gender": "1",
"Major": "化学系"
}, true);
FineUI.ui.grid1.addNewRecord({
"id": "104",
"text": "张三",
"values": {
"Name": "张三",
"Gender": "1",
"Major": "化学系"
}
}, true);
FineUI.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
FineUI.ui.grid1.addNewRecords([{
"Name": "张三",
"Gender": "1",
"Major": "化学系"
}, {
"Name": "李诗诗",
"Gender": "2",
"Major": "物理系"
}], true);
FineUI.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 |
FineUI.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
|
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>
getEncodedText(text) → {string}
- Description:
获取编码后的字符串
- Inherited From:
Parameters:
Name | Type | Description |
---|---|---|
text |
string | 原始字符串 |
Returns:
编码后的字符串
- Type
- 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) → {FineUI.Component}
- Description:
获取子控件
- Inherited From:
Parameters:
Name | Type | Description |
---|---|---|
value |
number | string | function | 子控件索引、标识符或者函数 |
Returns:
子控件实例
- Type
- FineUI.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 |
FineUI.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
FineUI.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
FineUI.ui.grid1.mergeColumns(['Major', 'Group', 'LogTime']);
Parameters:
Name | Type | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
columns |
Array.<string> | 需要合并的列标识符数组 |
|||||||||
options |
Object | 合并参数 Properties
|
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
|
selectRow(row, options)
- Description:
选中行
Parameters:
Name | Type | Description | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
row |
number | string | jQuery | 行索引、行标识符或者行元素 |
||||||||||||||||
options |
Object | 参数 Properties
|
selectRows(rowIds, options)
- Description:
选中多行
Parameters:
Name | Type | Description | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
rowIds |
Array.<number> | Array.<string> | Array.<jQuery> | 行索引数组、行标识符数组或者行元素数组 |
||||||||||||||||
options |
Object | 参数 Properties
|
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
FineUI.ui.panel1.setIcon('../res/images/16/1.png');
Parameters:
Name | Type | Description |
---|---|---|
icon |
string | 图标地址 |
setIconFont(iconFont)
- Description:
设置图标字体
- Inherited From:
Example
FineUI.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, forceUpdateopt)
- Description:
更新单元格的值
Examples
FineUI.ui.grid1.updateCellValue(1, 'Name', '张三');
FineUI.ui.grid1.updateCellValue(1, {
'Name': '张三',
'Gender': 1,
'EntranceYear': 2018
});
FineUI.ui.grid1.updateCellValue(1, 'Name.cls', 'f-grid-cell-uneditable');
FineUI.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 |
<optional> |
是否强制更新(强制更新不显示左上角的已更改红色标识) |
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
|
beforeedit
- Description:
单元格进入编辑状态之前触发(返回false则取消编辑操作)
Parameters:
Name | Type | Description | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
event |
jQuery.Event | 事件对象 |
||||||||||||||||||||||||
value |
* | 单元格的值 |
||||||||||||||||||||||||
params |
Object | 事件参数 Properties
|
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
|
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 | 事件对象 |