Ag Grid细节网格（表格行展开）Vue Data Grid: Master / Detail

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);
    }
};

下面的示例显示了一个简单的细节网格，其中配置了上述所有内容。

1. 设置网格属性 masterDetail=true。这告诉网格允许展开行来显示细节网格。
2. 将一个主网格列上的 cellRenderer设置为 "agGroupCellRenderer"。这告诉网格，我们使用了分组的渲染器，那这一列就拥有了展开/折叠功能。
3. 设置详细单元格渲染器参数 detailGridOptions。这包含了对细节网格的配置，比如要显示哪些列，以及你想在细节网格内启用哪些网格功能。
4. 详细单元格渲染器参数 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
  • 回调，与 Master Detail一起使用，以确定某行是否应该是主行。如果返回 false，该行将不存在详细的记录。

isRowMaster: IsRowMaster<TData>;

interface IsRowMaster<TData = any> {
    (dataItem: TData) : boolean
}

• detailCellRenderer: any
  • 提供一个自定义的 detailCellRenderer，当主行被展开时使用。参见 Custom Detail。
• detailCellRendererParams: any
  • 指定详细单元格渲染器要使用的参数。也可以是一个提供参数的函数，以实现参数的动态定义。参见 Detail Grids。
• detailRowHeight: number
  • 为每个细节行设置固定高度（像素）。参见Fixed Height。
• detailRowAutoHeight: boolean
  • 设置为 true可以使细节网格动态地改变它的高度以适应它的行。参见 Auto Height。
• embedFullWidthRows: boolean
  • 设置为 true可以使细节网格嵌入到主网格的容器中，从而链接它们的水平滚动。参见 与主网格同步的细节滚动（Syncing Detail Scrolling with Master）。
• keepDetailRows: boolean
  • 设置为 true是为了在再次显示时保留细节行。
  • 默认值 false
• keepDetailRowsCount: number
  • 设置要保留的细节行数。
  • 默认值 10

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
}