Grid

FineUI.create({
	type: 'Grid', renderTo: document.body, title: '学生表', width: 600, height: 250,
	columns: [
		{ columnType: 'rownumberfield' },                  // 行号列
		{ text: '姓名', field: 'name' },
		{ text: '性别', field: 'gender' },
		{ text: '在校', field: 'atSchool', columnType: 'checkboxfield' },
		{ text: '专业', field: 'major', flex: 1 }
	],
	data: [
		{ name: '张萍萍', gender: '女', atSchool: true, major: '材料科学' },
		{ name: '陈飞', gender: '男', atSchool: false, major: '化学' },
		{ name: '董婷婷', gender: '女', atSchool: true, major: '化学' }
	]
});

FineUI.create({
	type: 'Grid', renderTo: document.body, title: '学生表', width: 600, height: 250,
	columns: [
		{ text: '姓名', field: 'name' },
		{ text: '性别', field: 'gender' },
		{ text: '专业', field: 'major', flex: 1 }
	],
	fields: ['name', 'gender', 'major'],
	data: [
		['张萍萍', '女', '材料科学'],
		['陈飞', '男', '化学']
	]
});

FineUI.create({
	type: 'Grid', renderTo: document.body, title: '远程数据', width: 600, height: 300,
	columns: [
		{ text: '姓名', field: 'Name' },
		{ text: '专业', field: 'Major', flex: 1 }
	],
	idField: 'Id', textField: 'Name',
	dataUrl: '/api/students'
});

// /api/students 返回的 JSON 示例：
// {
//     "fields": ["Id", "Name", "Major"],
//     "data": [
//         ["1", "张萍萍", "材料科学"],
//         ["2", "陈飞", "化学"]
//     ],
//     "recordCount": 2
// }

FineUI.create({
	type: 'Grid', renderTo: document.body, title: '可勾选', width: 600, height: 300, checkboxSelect: true,
	columns: [
		{ text: '姓名', field: 'name' },
		{ text: '专业', field: 'major', flex: 1 }
	],
	fields: ['name', 'major'],
	data: [
		['张萍萍', '材料'],
		['陈飞', '化学']
	]
});

FineUI.create({
	type: 'Grid', renderTo: document.body, title: '分页排序', width: 600, height: 350,
	paging: true, pageSize: 10, sorting: true,
	columns: [
		{ text: '姓名', field: 'name', sortField: 'name' },
		{ text: '年份', field: 'year', sortField: 'year' },
		{ text: '专业', field: 'major', flex: 1 }
	],
	fields: ['name', 'year', 'major'],
	data: [
		['张萍萍', 2000, '材料'],
		['陈飞', 2001, '化学'],
		['董婷婷', 2002, '化学']
	]
});

FineUI.create({
	type: 'Grid', renderTo: document.body, title: '可过滤', width: 600, height: 350, filters: true,
	columns: [
		{ text: '姓名', field: 'name', filter: true },
		{ text: '专业', field: 'major', flex: 1, filter: true }
	],
	fields: ['name', 'major'],
	data: [
		['张萍萍', '材料'],
		['陈飞', '化学']
	],
	listeners: {
		filterchange: function (event, filteredData) {
			FineUI.alert('过滤条件：' + JSON.stringify(filteredData));
		}
	}
});

FineUI.create({
	type: 'Grid', renderTo: document.body, title: '行分组', width: 600, height: 400,
	rowGroupField: 'major', rowGroup: { collapsible: true, expanded: true },
	columns: [
		{ text: '姓名', field: 'name' },
		{ text: '专业', field: 'major' }
	],
	fields: ['name', 'major'],
	data: [
		['张萍萍', '材料'],
		['陈飞', '化学'],
		['董婷婷', '化学']
	]
});

FineUI.create({
	type: 'Grid', renderTo: document.body, title: '树表格', width: 600, height: 400,
	idField: 'Id', textField: 'Name', parentIdField: 'ParentId',
	tree: { columnId: 'colName', expanded: true },
	columns: [
		{ columnId: 'colName', text: '名称', field: 'Name', flex: 1 },  // columnId='colName'，被 tree 属性引用
		{ columnId: 'colType', text: '类型', field: 'Type', width: 120 }
	],
	fields: ['Id', 'ParentId', 'Name', 'Type'],
	data: [
		['1', '', '根目录', '文件夹'],
		['2', '1', '子目录 A', '文件夹'],
		['3', '1', '文件 B.txt', '文本']
	]
});

// 提示：若列未显式设置 columnId，会自动使用 field 值，所以下面这种简写形式也能跑（但建议显式声明 columnId）：
//   columns: [{ text: '名称', field: 'Name', flex: 1 }, ...]
//   tree: { columnId: 'Name' }  // 'Name' 既是 field 又是隐式 columnId

FineUI.create({
	type: 'Grid', renderTo: document.body, width: 600, height: 250, idField: 'id',
	columns: [
		{ text: '姓名', field: 'name' },
		{ text: '专业', field: 'major', flex: 1 }
	],
	fields: ['id', 'name', 'major'],
	data: [
		['a', '张三', '化学'],
		['b', '李四', '数学']
	],
	listeners: {
		rowclick: function (event, rowId) {
			var rowData = this.getRowData(rowId);
			FineUI.alert('点击行：' + rowData.name);
		},
		rowdblclick: function (event, rowId) {
			FineUI.alert('双击行 ID：' + rowId);
		}
	}
});

Extends

• FineUI.Panel

Members

bodyEl :jQuery

Description:

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

Inherited From:

• FineUI.PanelBase#bodyEl

Type:

• jQuery

el :jQuery

Description:

• 控件对应的jQuery节点对象

Inherited From:

• FineUI.Component#el

Type:

• jQuery

items :Object

Description:

• 子控件列表

Inherited From:

• FineUI.Container#items

Type:

• Object

Methods

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:

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:

addTool(item)

Description:

• 添加工具图标

Inherited From:

• FineUI.PanelBase#addTool

Parameters:

appendData(data)

Description:

• 追加数据（在现有数据末尾追加，不会清空原有数据；常用于"加载更多"分页）

Example

分页"加载更多"场景，每次追加下一页数据：

FineUI.ui.grid1.appendData([
    { Name: '王五', Major: '生物' },
    { Name: '赵六', Major: '医学' }
]);

Parameters:

calcSummaryValue(columnId, summaryType, summaryTypeArgumentopt)

Description:

• 计算合计行的值

Parameters:

cancelEdit()

Description:

• 取消正在编辑的单元格

checkRow(row, options)

Description:

• 选中行复选框（仅适用于树表格）

Parameters:

checkRows(rows, optionsopt)

Description:

• 选中行复选框（仅适用于树表格 + tree.checkbox: true；与selectRows不同：选中的是行复选框，不是行的选中状态）

Examples

勾选指定行的复选框（替换当前勾选）：

FineUI.ui.grid1.checkRows(['101', '102'], { keep: false });

递归勾选某行及其所有子行的复选框（同tree.cascadeCheck的级联效果）：

FineUI.ui.grid1.checkRows(['1'], { deep: true });

Parameters:

clearData()

Description:

• 清空全部数据

clearSelection()

Description:

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

collapse()

Description:

• 折叠面板（程序触发；启用collapsible: true时有效）

Inherited From:

• FineUI.PanelBase#collapse

Example

程序折叠侧栏：

FineUI.ui.panelSide.collapse();

collapseRow(row, deep)

Description:

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

Parameters:

collapseRowExpander(row)

Description:

• 折叠行扩展列

Parameters:

collapseRowExpanders(rows)

Description:

• 折叠行扩展列

Parameters:

collapseRows()

Description:

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

commitChanges()

Description:

• 提交所有改动（接受当前所有修改为"已保存"状态并清除单元格红色脏标记；调用后getModifiedData返回空数组）

Example

保存成功后清除脏标记（用 jQuery 的 $.ajax 调服务端接口）：

$.ajax({
    url: '/api/save', method: 'POST', dataType: 'json',
    data: { modified: JSON.stringify(FineUI.ui.grid1.getModifiedData()) },
    success: function (resp) {
        FineUI.ui.grid1.commitChanges();
    }
});

configColumns(columns, options)

Description:

• 重新配置表格列

Parameters:

deleteRow(row, forceUpdateopt)

Description:

• 删除单行（与deleteSelectedRows不同：本方法按 rowId 删除指定行；编辑场景下默认标记为deleted，forceUpdate: true则直接移除）

Example

列内"删除"按钮（配合rowcommand事件）：

FineUI.create({
    type: 'Grid', idField: 'Id',
    columns: [
        { text: '姓名', field: 'Name' },
        { text: '操作', commands: [{ commandName: 'del', text: '删除' }] }
    ],
    listeners: {
        rowcommand: function (event, rowId, rowIndex, columnId, commandName) {
            if (commandName === 'del') {
                this.deleteRow(rowId);
            }
        }
    }
});

Parameters:

deleteRows(rowIds, forceUpdate)

Description:

• 删除多行

Parameters:

deleteSelectedRows(forceUpdateopt)

Description:

• 删除选中的行（典型场景：表格上方"删除选中行"按钮；启用单元格编辑时，默认仅标记为 deleted 状态，需配合getModifiedData提交服务端；forceUpdate: true则直接从数据源移除）

Example

"删除选中行"按钮（编辑场景下保留数据源中的删除标记，提交时通过getModifiedData取到 deleted 状态行）：

FineUI.create({
    type: 'Button', text: '删除选中行',
    handler: function () {
        if (!FineUI.ui.grid1.hasSelection()) {
            FineUI.alert('请先选中要删除的行');
            return;
        }
        FineUI.confirm({
            message: '确定删除选中行？',
            ok: function () {
                FineUI.ui.grid1.deleteSelectedRows();
            }
        });
    }
});

Parameters:

deselectAllRows()

Description:

• 取消选中全部行

deselectRow(row)

Description:

• 取消选中行

Parameters:

deselectRows(rowIds)

Description:

• 取消选中多行

Example

取消选中指定多行：

FineUI.ui.grid1.deselectRows(['101', '103']);

Parameters:

expand()

Description:

• 展开面板（与collapse对应）

Inherited From:

• FineUI.PanelBase#expand

expandPath(path)

Description:

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

Parameters:

expandRow(row, deepopt)

Description:

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

Examples

展开单行：

FineUI.ui.grid1.expandRow('row_1');

树表格中递归展开某行及其全部后代：

FineUI.ui.grid1.expandRow('row_1', true);

Parameters:

expandRowExpander(row)

Description:

• 展开行扩展列

Parameters:

expandRowExpanders(rows)

Description:

• 展开行扩展列

Parameters:

expandRowPath(row)

Description:

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

Parameters:

expandRows()

Description:

• 展开全部行（适用于树表格和行分组；展开所有可展开节点）

Example

"全部展开"按钮：

FineUI.create({
    type: 'Button', text: '全部展开',
    handler: function () { FineUI.ui.grid1.expandRows(); }
});

getCellData(row, columnId) → {Object}

Description:

• 获取单元格数据

Parameters:

Returns:

Type

Object

getCellEl(row, columnId) → {jQuery}

Description:

• 获取单元格元素

Parameters:

Returns:

Type

jQuery

getCellValue(row, columnId) → {Object}

Description:

• 获取单元格的值

Parameters:

Returns:

Type

Object

getCheckedRows(returnRowData) → {Array.<Object>}

Description:

• 获取复选框处于选中状态的行（仅适用于树表格）

Parameters:

Returns:

Type

Array.<Object>

getColumn(column) → {Object}

Description:

• 获取列对象

Parameters:

Returns:

Type

Object

getColumnHeaderEl(columnId) → {jQuery}

Description:

• 获取列的标题栏元素

Parameters:

Returns:

Type

jQuery

getColumnHeaderEls() → {jQuery}

Description:

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

Returns:

Type

jQuery

getColumnId(column) → {Object}

Description:

• 获取列标识符

Parameters:

Returns:

Type

Object

getEncodedText(text) → {string}

Description:

• 获取编码后的字符串

Inherited From:

• FineUI.Component#getEncodedText

Parameters:

Returns:

Type

string

getEndRowIndex() → {number}

Description:

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

Returns:

Type

number

getExpandedRows() → {Array.<string>}

Description:

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

Returns:

Type

Array.<string>

getField(fieldName) → {string|Object}

Description:

• 获取字段对象

Parameters:

Returns:

Type

string | Object

getFilteredData() → {Object}

Description:

• 获取过滤参数

Returns:

Type

Object

getFormFields() → {Array.<FineUI.Field>}

Description:

• 获取容器内（深度遍历）所有表单字段实例（FineUI.Field的子类，如TextBox/NumberBox/DatePicker等）

Inherited From:

• FineUI.Container#getFormFields

Example

遍历表单全部字段，序列化为 name → value 的对象（用于自定义 ajax 提交；字段未声明name时改用id）：

var values = {};
FineUI.ui.form1.getFormFields().forEach(function (field) {
    values[field.name || field.id] = field.getValue();
});
// values 形如：{ tbxUserName: 'FineUIPro', numberAge: 30, ... }

Returns:

Type

Array.<FineUI.Field>

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

Description:

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

Parameters:

Returns:

Type

Array.<string>

getIFrameEl() → {jQuery}

Description:

• 获取内联框架元素

Inherited From:

• FineUI.PanelBase#getIFrameEl

Returns:

Type

jQuery

getIFrameUrl() → {string}

Description:

• 获取内联框架地址

Inherited From:

• FineUI.PanelBase#getIFrameUrl

Returns:

Type

string

getIFrameWindow() → {Window}

Description:

• 获取内联框架窗体对象

Inherited From:

• FineUI.PanelBase#getIFrameWindow

Returns:

Type

Window

getIndeterminateRows(returnRowData) → {Array.<Object>}

Description:

• 获取复选框处于中间状态的行（仅适用于树表格）

Parameters:

Returns:

Type

Array.<Object>

getItem(value) → {FineUI.Component}

Description:

• 获取子控件（按索引/标识符/匹配函数查找；通常配合items无显式 id 的场景，比按FineUI.ui[id]更精准）

Inherited From:

• FineUI.Container#getItem

Examples

按索引取第一个子控件：

var firstChild = FineUI.ui.toolbar1.getItem(0);

按 id 取子控件：

var btn = FineUI.ui.toolbar1.getItem('btnSave');

按匹配函数找第一个匹配的子控件（函数对每项返回 true 即匹配）：

var btn = FineUI.ui.toolbar1.getItem(function (item) {
    return item.type === 'Button' && item.text === '保存';
});

Parameters:

Returns:

Type

FineUI.Component

getMergedData() → {Array.<Object>}

Description:

• 获取合并后的值（返回当前表格的所有行：含未改动/新增/修改；排除已删除）

Example

用于一次性提交全表数据到服务端（不区分行的修改状态）：

var merged = FineUI.ui.grid1.getMergedData();
// merged 形如：
// [
//     { id: '101', index: 0, status: 'unchanged', values: { Name: '张萍萍', Major: '化学' } },
//     { id: '102', index: 1, status: 'modified',  values: { Name: '陈飞', Major: '物理（新）' } },
//     { id: '_newId_1', index: 2, status: 'newadded', values: { Name: '王五', Major: '生物' } }
// ];

Returns:

Type

Array.<Object>

getModifiedData() → {Array.<Object>}

Description:

• 获取修改的值（仅返回有改动的行：新增/编辑/删除三类）

Example

在afteredit事件中获取本次编辑后的修改集，提交服务端后调用commitChanges清除红色标记：

FineUI.create({
    type: 'Grid', renderTo: document.body, cellEditing: true,
    columns: [
        { text: '姓名', field: 'Name', editable: true, editor: { type: 'TextBox' } },
        { text: '专业', field: 'Major', flex: 1, editable: true, editor: { type: 'TextBox' } }
    ],
    idField: 'Id', fields: ['Id', 'Name', 'Major'],
    data: [['101', '张萍萍', '化学'], ['102', '陈飞', '物理']],
    listeners: {
        afteredit: function () {
            var modified = this.getModifiedData();
            // modified 形如：
            // [
            //     { id: '101', index: 0, status: 'modified', values: { Name: '张萍萍2' } },
            //     { id: '_newId_1', index: 2, status: 'newadded', values: { Name: '王五', Major: '生物' } },
            //     { id: '102', index: -1, status: 'deleted' }
            // ]
            console.log(modified);
            // 提交服务端成功后清除"已修改"红色标记：
            this.commitChanges();
        }
    }
});

Returns:

Type

Array.<Object>

getNextCellEl(td, verticalNavigate, multiRowsNavigate) → {jQuery}

Description:

• 获取下一单元格

Parameters:

Returns:

Type

jQuery

getNextRowEl(tr) → {jQuery}

Description:

• 获取下一行

Parameters:

Returns:

Type

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) → {jQuery}

Description:

• 获取上一单元格

Parameters:

Returns:

Type

jQuery

getPrevRowEl(tr) → {jQuery}

Description:

• 获取上一行

Parameters:

Returns:

Type

jQuery

getRecordCount() → {number}

Description:

• 获取总记录数

Returns:

Type

number

getRowData(row) → {Object}

Description:

• 获取行数据

Parameters:

Returns:

Type

Object

getRowEl(row) → {jQuery}

Description:

• 获取行元素

Parameters:

Returns:

Type

jQuery

getRowEls() → {jQuery}

Description:

• 获取行元素

Returns:

Type

jQuery

getRowId(row) → {string}

Description:

• 获取行标识符

Parameters:

Returns:

Type

string

getRowPath(row) → {string}

Description:

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

Parameters:

Returns:

Type

string

getRowValue(row) → {Object}

Description:

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

Parameters:

Returns:

Type

Object

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

Description:

• 获取选中的单元格

Parameters:

Returns:

Type

Array.<string>

getSelectedCellColumnId() → {string}

Description:

• 获取选中单元格的列ID

Returns:

Type

string

getSelectedCellEl() → {jQuery}

Description:

• 获取选中的单元格元素

Returns:

Type

jQuery

getSelectedRow(returnRowDataopt) → {string|Object}

Description:

• 获取选中的行标识符（单选场景）

Examples

单选场景获取选中行的 rowId 字符串：

var rowId = FineUI.ui.grid1.getSelectedRow();
if (rowId) {
    var rowData = FineUI.ui.grid1.getRowData(rowId);
}

传 true 直接返回行数据对象（含 id/text/values）：

var rowData = FineUI.ui.grid1.getSelectedRow(true);
// rowData 形如：{ id: '113', text: '曹飞', values: { Name: '曹飞', Major: '信息工程' } }

Parameters:

Returns:

Type

string | Object

getSelectedRowEl(includeLockedRows) → {jQuery}

Description:

• 获取选中的行元素

Parameters:

Returns:

Type

jQuery

getSelectedRowEls(includeLockedRows) → {jQuery}

Description:

• 获取选中的行元素

Parameters:

Returns:

Type

jQuery

getSelectedRows(returnRowDataopt) → {Array.<string>|Array.<Object>}

Description:

• 获取选中的行标识符数组（多选场景）

Examples

多选场景获取所有选中行的 rowId 字符串数组：

var rowIds = FineUI.ui.grid1.getSelectedRows();
// 例如：['104', '108', '113']

传 true 返回行数据对象数组（含 id/text/values）：

var rows = FineUI.ui.grid1.getSelectedRows(true);
// 例如：[{ id: '113', text: '曹飞', values: { Name: '曹飞', Gender: 1, EntranceYear: 2008, Major: '信息工程' } }]

数据库分页 + 跨页保持选中（databasePaging + keepCurrentSelection）时的差异：

// getSelectedRows() — 返回所有分页累计的 rowId（包括其他页选中的）
// getSelectedRows(true) — 只返回当前页选中行的完整数据（其他页数据未在客户端）

Parameters:

Returns:

Type

Array.<string> | Array.<Object>

getSortColumn(sortField) → {Object}

Description:

• 获取排序列对象

Parameters:

Returns:

Type

Object

getStartRowIndex() → {number}

Description:

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

Returns:

Type

number

getTitleTooltip() → {string}

Description:

• 获取面板标题提示信息

Inherited From:

• FineUI.PanelBase#getTitleTooltip

Returns:

Type

string

hasHScrollbar() → {boolean}

Description:

• 是否存在水平滚动条

Inherited From:

• FineUI.PanelBase#hasHScrollbar

Returns:

Type

boolean

hasSelection() → {boolean}

Description:

• 是否有选中行

Returns:

Type

boolean

hasVScrollbar() → {boolean}

Description:

• 是否存在垂直滚动条

Inherited From:

• FineUI.PanelBase#hasVScrollbar

Returns:

Type

boolean

hideColumn(columnId, hiddenopt)

Description:

• 隐藏列（也可传hidden: false显示；配合getHiddenColumns/setHiddenColumns做批量管理）

Examples

隐藏一列：

FineUI.ui.grid1.hideColumn('Major');

显示之前隐藏的列（也可用showColumn）：

FineUI.ui.grid1.hideColumn('Major', false);

Parameters:

hidePopEl()

Description:

• 隐藏容器内的所有弹出框

Inherited From:

• FineUI.Container#hidePopEl

insertTool(insertIndex, item)

Description:

• 插入工具图标

Inherited From:

• FineUI.PanelBase#insertTool

Parameters:

isAllSelected() → {boolean}

Description:

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

Returns:

Type

boolean

isCollapsed() → {boolean}

Description:

• 是否处于折叠状态

Inherited From:

• FineUI.PanelBase#isCollapsed

Returns:

Type

boolean

isType(value) → {boolean}

Description:

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

Inherited From:

• FineUI.Base#isType

Example

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

Parameters:

Returns:

Type

boolean

loadData(parentRowIdopt, data, summaryDataopt)

Description:

• 加载数据（会替换表格现有全部行）

Examples

加载普通表格数据（对象数组形式）：

FineUI.ui.grid1.loadData([
    { Name: '张萍萍', Major: '化学' },
    { Name: '陈飞', Major: '物理' }
]);

加载普通表格数据（二维数组形式，需配合fields声明字段顺序）：

FineUI.ui.grid1.loadData([
    ['张萍萍', '化学'],
    ['陈飞', '物理']
]);

树表格异步加载某节点的子节点数据（第一个参数传 parentRowId）：

FineUI.ui.grid1.loadData('1', [
    { Id: '11', ParentId: '1', Name: '子节点 A' },
    { Id: '12', ParentId: '1', Name: '子节点 B' }
]);

Parameters:

loadDataUrl(dataUrlopt, dataParams)

Description:

• 加载数据

Parameters:

lockColumn(columnId, lockedPosition)

Description:

• 锁定列（启用columnLocking: true时有效；锁定的列不随表格横向滚动；当分组表头中的某一列变成锁定列，该分组表头中的其他列会自动一同锁定）

Examples

锁定列到左侧（用户横向滚动时该列保持可见）：

FineUI.ui.grid1.lockColumn('Name', 'left');

锁定到右侧（常用于操作列）：

FineUI.ui.grid1.lockColumn('opCol', 'right');

Parameters:

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:

mergeColumns(columns, options)

Description:

• 合并列

Example

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

Parameters:

moveRowDown(row, loopMoveopt)

Description:

• 行下移（与moveRowUp对应；loopMove: true时最后一行下移会跳到开头）

Parameters:

moveRowUp(row, loopMoveopt)

Description:

• 行上移（常用于"向上排序"工具栏按钮；loopMove: true时第一行上移会跳到末尾）

Example

"上移"按钮：

FineUI.create({
    type: 'Button', text: '上移',
    handler: function () {
        var rowId = FineUI.ui.grid1.getSelectedRow();
        if (rowId) {
            FineUI.ui.grid1.moveRowUp(rowId);
        }
    }
});

Parameters:

moveRowsDown(rows)

Description:

• 多行下移

Parameters:

moveRowsUp(rows)

Description:

• 多行上移

Parameters:

refreshIFrame()

Description:

• 刷新内联框架

Inherited From:

• FineUI.PanelBase#refreshIFrame

rejectChanges()

Description:

• 拒绝所有改动（撤销所有未保存的修改，恢复到上次commitChanges或初始加载时的状态）

Example

"重置表格"按钮：

FineUI.create({
    type: 'Button', text: '重置',
    handler: function () {
        FineUI.confirm({
            message: '丢弃所有未保存的修改？',
            ok: function () { FineUI.ui.grid1.rejectChanges(); }
        });
    }
});

resetFilter(columnId)

Description:

• 重置某个列的过滤参数

Parameters:

resetFilters()

Description:

• 重置过滤参数

resolveColumn(callback, startColumnsopt)

Description:

• 遍历列

Parameters:

resolveRow(callback, rowopt)

Description:

• 遍历行

Parameters:

saveEdit()

Description:

• 保存正在编辑的单元格

scrollToCell(row, columnId)

Description:

• 滚动到单元格

Parameters:

scrollToRow(row)

Description:

• 滚动到行（让指定行进入可视区域；用于大数据表格中定位到某条记录）

Example

搜索按钮：定位并选中匹配行：

FineUI.create({
    type: 'Button', text: '定位到张三',
    handler: function () {
        var rowId = findRowIdByName('张三');
        if (rowId) {
            FineUI.ui.grid1.scrollToRow(rowId);
            FineUI.ui.grid1.selectRows([rowId]);
        }
    }
});

Parameters:

selectAllRows()

Description:

• 选中全部行

selectCell(row, columnId, options)

Description:

• 选中单元格

Parameters:

selectRow(row, options)

Description:

• 选中行

Parameters:

selectRows(rowIds, optionsopt)

Description:

• 选中多行

Examples

批量选中多行（rowIds 为字符串数组，按 idField 标识）：

FineUI.ui.grid1.selectRows(['101', '103', '105']);

在已有选中行的基础上追加选中（options.keep: true）：

FineUI.ui.grid1.selectRows(['107', '108'], { keep: true });

Parameters:

setDisplayType(displayType)

Description:

• 设置显示模式

Parameters:

setHiddenColumns(columns)

Description:

• 设置隐藏的列

Parameters:

setIFrameUrl(url)

Description:

• 设置内联框架地址

Inherited From:

• FineUI.PanelBase#setIFrameUrl

Parameters:

setPageIndex(newPageIndex)

Description:

• 设置新的分页索引

Parameters:

setPageOptions(options)

Description:

• 设置分页选项（服务端分页databasePaging: true场景常用：拉到新一页数据后同步分页状态）

Example

服务端分页后同步分页状态（典型用法：用户点击翻页时用 jQuery 的 $.ajax 拉服务端数据后回写）：

$.ajax({
    url: '/api/students', dataType: 'json',
    data: { pageIndex: 2, pageSize: 10 },
    success: function (resp) {
        FineUI.ui.grid1.setPageOptions({
            pageIndex: 2,
            recordCount: resp.total
        });
        FineUI.ui.grid1.loadData(resp.data);
    }
});

Parameters:

setPageSize(newPageSize)

Description:

• 设置每页记录数

Parameters:

setRecordCount(newRecordCount)

Description:

• 设置总记录数

Parameters:

setSortField(field, directionopt)

Description:

• 设置表格的排序状态（程序化触发排序；启用sorting: true时有效）

  • 单列模式（默认）：传字符串 field + 字符串 direction。
  • 多列模式（要求 sortingMulti: true）：传字段名和方向交叉的扁平数组给field，direction 参数被忽略。

Examples

单列排序：

FineUI.ui.grid1.setSortField('Name', 'ASC');

多列排序（先按 Gender 升序，再按 EntranceYear 降序）—— 字段和方向**交叉**写在同一个数组里：

// 前置条件：grid1 创建时 sortingMulti: true
FineUI.ui.grid1.setSortField(['Gender', 'ASC', 'EntranceYear', 'DESC']);

Parameters:

setSplitDraggable() → {boolean}

Description:

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

Inherited From:

• FineUI.PanelBase#setSplitDraggable

Returns:

Type

boolean

setSummaryData(summaryRowIndexopt, summaryData)

Description:

• 设置合计行数据（启用summary: true时；可一次性整行替换合计行内容）

Examples

给合计行设置自定义文本：

FineUI.ui.grid1.setSummaryData({
    Name: '合计',
    Amount: 123456
});

多合计行场景：设置第二行合计：

FineUI.ui.grid1.setSummaryData(1, {
    Name: '平均值',
    Amount: 30864
});

Parameters:

setTitleTooltip(tooltip)

Description:

• 设置面板标题提示信息

Inherited From:

• FineUI.PanelBase#setTitleTooltip

Parameters:

showColumn(columnId)

Description:

• 显示列

Parameters:

showColumnsMenu(target)

Description:

• 显式列管理菜单

Parameters:

startEdit(row, columnId)

Description:

• 开始编辑单元格

Parameters:

toggleCollapse()

Description:

• 切换面板的折叠状态

Inherited From:

• FineUI.PanelBase#toggleCollapse

toggleRowExpanders(rows)

Description:

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

Parameters:

uncheckRow(row, options)

Description:

• 取消选中行复选框（仅适用于树表格）

Parameters:

uncheckRows(rows, optionsopt)

Description:

• 取消选中行复选框（与checkRows对应；仅适用于树表格）

Parameters:

unlockColumn(columnId)

Description:

• 解锁列（与lockColumn对应；当分组表头中的某一列被解锁，该分组中其他列也会自动一同解锁）

Example

解锁指定列：

FineUI.ui.grid1.unlockColumn('Name');

Parameters:

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:

updateSummaryCellValue(rowIndexopt, columnId, value, forceUpdateopt)

Description:

• 更新合计行单元格的值（细粒度更新单个合计单元格；常配合afteredit事件，编辑某列后重算该列合计）

Example

编辑后重算列的合计值：

FineUI.create({
    type: 'Grid', summary: true, cellEditing: true,
    listeners: {
        afteredit: function (event, value, params) {
            if (params.columnId === 'Amount') {
                var total = this.calcSummaryValue('Amount', 'sum');
                this.updateSummaryCellValue('Amount', total);
            }
        }
    }
});

Parameters:

Events

afteredit

Description:

• 单元格编辑完成时触发

Example

编辑后立即提交服务端（用getModifiedData取增量，成功后commitChanges清除红色脏标记）：

FineUI.create({
    type: 'Grid', renderTo: document.body, cellEditing: true,
    columns: [
        { text: '姓名', field: 'Name', editable: true, editor: { type: 'TextBox', required: true } },
        { text: '专业', field: 'Major', flex: 1, editable: true, editor: { type: 'TextBox' } }
    ],
    idField: 'Id', fields: ['Id', 'Name', 'Major'],
    data: [['101', '张萍萍', '化学'], ['102', '陈飞', '物理']],
    listeners: {
        afteredit: function (event, value, params) {
            // 本次单元格编辑后的新值就是 value；params.rowId 是行标识；params.columnId 是列标识
            // 调用 getModifiedData() 返回所有改动行（含本次）
            var modified = this.getModifiedData();

            // 假设 ajax 提交成功后：
            this.commitChanges();
        }
    }
});

Parameters:

beforeedit

Description:

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

Parameters:

beforefilterchange

Description:

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

Parameters:

beforehide

Description:

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

Inherited From:

• FineUI.Component#event:beforehide

beforepaging

Description:

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

Parameters:

beforerowclick

Description:

• 点击行之前触发（返回false则取消选中操作并阻止rowclick事件；常用于"未保存修改时阻止切换行"）

Example

当表格有未保存修改时阻止切换行：

FineUI.create({
    type: 'Grid', cellEditing: true,
    listeners: {
        beforerowclick: function (event, rowId) {
            if (this.isDirty()) {
                FineUI.alert('请先保存或撤销当前修改');
                return false;  // 阻止选中
            }
        }
    }
});

Parameters:

beforerowcontextmenu

Description:

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

Parameters:

beforeshow

Description:

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

Inherited From:

• FineUI.Component#event:beforeshow

beforesorting

Description:

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

Parameters:

beforetabedit

Description:

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

Parameters:

bigdatarowtip

Description:

• 大数据行数提示

Parameters:

collapse

Description:

• 折叠面板时触发（启用collapsible: true时；用户点击折叠图标或调用collapse()都会触发）

Inherited From:

• FineUI.PanelBase#event:collapse

Example

侧栏折叠后让中央面板"伸开"覆盖空间：

FineUI.ui.panelSide.on('collapse', function () {
    FineUI.ui.panelMain.setWidth(window.innerWidth);
});

Parameters:

columnhide

Description:

• 隐藏列时触发

Parameters:

columnlock

Description:

• 锁定列时触发

Parameters:

columnmove

Description:

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

Parameters:

columnresize

Description:

• 改变列宽度时触发（用户拖动列分隔条；启用columnResizing: true时有效；常用于持久化用户的列宽配置）

Example

保存用户调整后的列宽到 localStorage：

FineUI.create({
    type: 'Grid', columnResizing: true,
    listeners: {
        columnresize: function (event, columnId, newColumnWidth) {
            var key = 'grid1.colWidth.' + columnId;
            localStorage.setItem(key, newColumnWidth);
        }
    }
});

Parameters:

columnshow

Description:

• 显示列时触发

Parameters:

columnunlock

Description:

• 解锁列时触发

Parameters:

datachange

Description:

• 数据改变时触发

Parameters:

dataload

Description:

• 表格数据加载完毕时触发（首次渲染或调用loadData/loadDataUrl后；适合做"默认选中某些行"等数据相关初始化）

Example

数据加载完成后默认选中某些行：

FineUI.create({
    type: 'Grid', idField: 'Id', dataUrl: '/api/students',
    listeners: {
        dataload: function () {
            this.selectRows(['R5', 'R10']);
        }
    }
});

Parameters:

dirtychange

Description:

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

Inherited From:

• FineUI.PanelBase#event:dirtychange

expand

Description:

• 展开面板时触发（与collapse事件对应）

Inherited From:

• FineUI.PanelBase#event:expand

Parameters:

filterchange

Description:

• 表头过滤时触发

Parameters:

hide

Description:

• 隐藏控件时触发

Inherited From:

• FineUI.Component#event:hide

iframeload

Description:

• 内联框架加载完毕时触发（启用iframe: true时；常用于和 iframe 内部脚本通讯）

Inherited From:

• FineUI.PanelBase#event:iframeload

Example

iframe 加载完成后给子页面注入参数：

FineUI.create({
    type: 'Window', iframe: true, iframeUrl: '/detail.aspx',
    listeners: {
        iframeload: function () {
            var iframeWin = this.getIFrameWindow();
            iframeWin.someInitFunction({ userId: 101 });
        }
    }
});

layout

Description:

• 布局控件时触发

Inherited From:

• FineUI.Component#event:layout

paging

Description:

• 分页跳转时触发

Parameters:

remove

Description:

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

Inherited From:

• FineUI.Component#event:remove

render

Description:

• 渲染控件时触发

Inherited From:

• FineUI.Component#event:render

resize

Description:

• 面板尺寸改变时触发

Inherited From:

• FineUI.PanelBase#event:resize

rowcheck

Description:

• 选中/取消选中节点复选框时触发（仅当 Grid 启用树模式 tree.checkbox: true 时；语义对应 FineUI.Tree#event:nodecheck）

Parameters:

rowclick

Description:

• 点击行时触发

Parameters:

rowcollapse

Description:

• 折叠行时触发

Parameters:

rowcommand

Description:

• 点击单元格中的命令按钮时触发（命令按钮通过列的commands属性配置：框架会自动用F.format.commandsRenderer渲染为可点击图标）

Example

列中放一组命令按钮，通过commandName区分不同操作：

FineUI.create({
    type: 'Grid', renderTo: document.body, idField: 'Id', width: 600, height: 250,
    columns: [
        { text: '姓名', field: 'Name', flex: 1 },
        {
            text: '操作', width: 140, columnId: 'opCol',
            commands: [
                { commandName: 'edit',   text: '编辑' },
                { commandName: 'delete', text: '删除', cls: 'f-grid-cell-warning' }
            ]
        }
    ],
    fields: ['Id', 'Name'],
    data: [['101', '张三'], ['102', '李四']],
    listeners: {
        rowcommand: function (event, rowId, rowIndex, columnId, commandName) {
            if (commandName === 'edit') {
                FineUI.alert('编辑 rowId=' + rowId);
            } else if (commandName === 'delete') {
                this.deleteRow(rowId);
            }
        }
    }
});

Parameters:

rowdblclick

Description:

• 双击行时触发

Parameters:

rowdeselect

Description:

• 取消选中行时触发

Parameters:

rowexpand

Description:

• 展开行时触发

Parameters:

rowexpandercollapse

Description:

• 折叠行扩展列时触发

Parameters:

rowexpanderexpand

Description:

• 展开行扩展列时触发

Parameters:

rowlazyload

Description:

• 延迟加载行数据时触发

Parameters:

rowselect

Description:

• 选中行时触发

Parameters:

selectionchange

Description:

• 选中的行改变时触发

Parameters:

show

Description:

• 显示控件时触发

Inherited From:

• FineUI.Component#event:show

sorting

Description:

• 排序时触发

Parameters:

splitdrag

Description:

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

Inherited From:

• FineUI.PanelBase#event:splitdrag

Parameters: