Vue Data Grid: Master / Detail
Master / Detail 细节网格
Master Detail指的是一个叫做Master Grid的顶层网格,它的行可以展开。当行被展开时,另一个网格会显示与被展开行有关的更多细节。出现的网格被称为细节网格。
启用 Master / Detail
可以使用 masterDetail
网格选项启用细节表格,使用 detailCellRendererParams
配置细节行,如下所示:
<ag-grid-vue
:masterDetail="masterDetail"
:isRowMaster="isRowMaster"
:columnDefs="columnDefs"
:detailCellRendererParams="detailCellRendererParams"
/* 其它的 grid options ... */>
</ag-grid-vue>
// 启用 细节网格
this.masterDetail = true;
// 指定该详细行是否展开
this.isRowMaster = dataItem => {
return dataItem ? dataItem.callRecords.length > 0 : false;
};
// 第一列的配置要使用 cellRenderer: 'agGroupCellRenderer'
this.columnDefs = [
{ field: 'name', cellRenderer: 'agGroupCellRenderer' },
{ field: 'account' }
];
// 详细单元格参数配置
this.detailCellRendererParams = {
// provide the Grid Options to use on the Detail Grid
// 提供要在细节网格上使用的网格选项
detailGridOptions: {
columnDefs: [
{ field: 'callId' },
{ field: 'direction' },
{ field: 'number'}
]
},
// get the rows for each Detail Grid
// 获得每个细节网格的行数
getDetailRowData: params => {
params.successCallback(params.data.callRecords);
}
};
下面的示例显示了一个简单的细节网格,其中配置了上述所有内容。
- 设置网格属性
masterDetail=true
。这告诉网格允许展开行来显示细节网格。
- 将一个主网格列上的
cellRenderer
设置为 "agGroupCellRenderer"
。这告诉网格,我们使用了分组的渲染器,那这一列就拥有了展开/折叠功能。
- 设置详细单元格渲染器参数
detailGridOptions
。这包含了对细节网格的配置,比如要显示哪些列,以及你想在细节网格内启用哪些网格功能。
- 详细单元格渲染器参数
getDetailRowData
提供一个回调。该回调被每个细节网格调用,并设置每个细节网格中要显示的行。
要了解更多关于 detailCellRendererParams
的配置,请参见 Detail
Grids 部分。
Master Detail 网格示例
行模型 Row Models
当使用 Master/Detail时,Master Grid必须使用Client-Side或Server-Side模型。它不支持使用 Viewport或 Infinite行模型。
另一方面,详细网格可以使用任何行模型。
API
Master Detail Properties(主细节属性)
Top level Master Detail properties available on the Grid Options:
网格选项中可用的顶层主细节属性:
-
masterDetail
: boolean
- 设置为
true
以启用 Master Detail
- 默认值
false
-
isRowMaster
: IsRowMaster
isRowMaster: IsRowMaster<TData>;
interface IsRowMaster<TData = any> {
(dataItem: TData) : boolean
}
-
detailCellRenderer
: any
-
detailCellRendererParams
: any
-
detailRowHeight
: number
-
detailRowAutoHeight
: boolean
-
embedFullWidthRows
: boolean
-
keepDetailRows
: boolean
- 设置为
true
是为了在再次显示时保留细节行。
- 默认值
false
-
keepDetailRowsCount
: number
Detail Cell Renderer Params(详细单元格渲染器参数)
详细单元格渲染器的参数在 detailCellRendererParams
对象上可用的有:
IDetailCellRendererParams<TData = any, TDetail = any>
接口上的可用属性:
-
detailGridOptions
: GridOptions<TDetail>
-
getDetailRowData
: GetDetailRowData<TData, TDetail>
getDetailRowData: GetDetailRowData<TData, TDetail>;
interface GetDetailRowData<TData = any, TDetail = any> {
(params: GetDetailRowDataParams<TData, TDetail>) : void
}
interface GetDetailRowDataParams<TData = any, TDetail = any> {
// Row node for the details request.
node: RowNode<TData>;
// Data for the current row.
data: TData;
// Success callback: pass the rows back for the grid request.
successCallback(rowData: TDetail[]): void;
}
-
refreshStrategy
: 'rows' | 'everything' | 'nothing'
-
template
: string | TemplateFunc
template: string | TemplateFunc<TData>;
interface TemplateFunc<TData = any> {
(params: ICellRendererParams<TData>) : string
}