Ag 网格 - 主/细节 - 多细节

Question

对于 Ag grid Master/Detail，有没有办法添加多个细节？在例如。它只有一个细节。

Answer 1

听起来您在问如何拥有一个具有多个细节网格的主控。

您需要创建自己的detailCellRender class/object。 在您的类的模板定义中，您可以根据需要创建尽可能多的详细信息网格。 在 init 方法中，您初始化网格并设置它们的数据。

记住life-cycle of a cell renderer 非常重要！ 网格仅在可见时才存在。

class MultipleDetailCellRenderer {
    constructor() {
        this.eGui = document.createElement("div");
    }

    init(params) {
    this.rowId = params.node.id;
    this.masterGridApi = params.api;
    // Note: assume data has an id field,
    // whatever you have defined in your column def should be available
    this.id=params.data.id;

    /* Build the div for the grid 1 */
    var grid_01 = document.createElement("div");
    grid_01.id = `grid01_${this.id}`;
    grid_01.classList = "ag-details-row-grid01";
    this.eGui.appendChild(grid_01);
    this.grid_01 = grid_01;
    
    /* Build the div for grid 2 */
    var grid_02 = document.createElement("div");
    grid_02.id = `grid02_${this.id}`;
    grid_02.classList = "ag-details-row-grid02";
    this.eGui.appendChild(grid_02);
    this.grid_02 = grid_02;

    // Theoretically, you can have more detail grids here too,
    // just go through the exercise of wiring them in
    
    if (this.grid_01 !== undefined && this.grid_02 !== undefined) {
        this.createDetailsGrids(params);
        this.registerDetailsWithMaster(params.node);
        this.loadRowData(params);
        window.setTimeout(() => {
            if (this.grid_01Options.api) {
                this.grid_01Options.api.doLayout();
            }
            if (this.grid_02Options.api) {
                this.grid_02Options.api.doLayout();
            }
        }, 0);
    }
}

getGui() {
    return this.eGui;
}

refresh(params) {
    return false;
}

destroy(params) {}

buildGridOptions() {
    var grid_01Options = {};
    grid_01Options.columnDefs = {}; // your column defs, required
    grid_01Options.getContextMenuItems = {}; // your context menu items, not required
    grid_01Options.popupParent = document.querySelector("#DivWhereMasterGridLives");
    // any event handlers for the detail grids go here
    grid_01Options.onCellDoubleClicked = params => {console.log("onCellDoubleClicked", params);};
    grid_01Options.onCellValueChanged = params => {console.log("onCellValueChanged", params);};
    // grid_01Options.rowClassRules = classRules; // css conditional row styling

    /* Config the 2nd detail grid */
    var grid_02Options = {};
    grid_02Options.columnDefs = {}; // your column defs, required
    grid_02Options.getContextMenuItems = {}; // your context menu items, not required
    grid_02Options.popupParent = document.querySelector("#DivWhereMasterGridLives");
    // any event handlers for the detail grids go here
    grid_02Options.onCellDoubleClicked = params => {console.log("onCellDoubleClicked", params);};
    grid_02Options.onCellValueChanged = params => {console.log("onCellValueChanged", params);};
    // grid_02Options.rowClassRules = classRules; // css conditional row styling

    this.grid_01Options = grid_01Options;
    this.grid_02Options = grid_02Options;
}

setRowData(grid01_data, grid02_data) {
    if (this.grid_01Options.api) {
        this.grid_01Options.api.setRowData(grid01_data);
    }
    if (this.grid_02Options.api) {
        this.grid_02Options.api.setRowData(grid02_data);
    }
}

loadRowData(params) {
    var grid01_data = []; // work your magic to get the data for grid 1
    var grid02_data = []; // work your magic to get the data for grid 2
    this.setRowData(grid01_data,grid02_data);
}

registerDetailsWithMaster(node) {
    var grid_01Info = {
        id: this.rowId,
        api: this.grid_01Options.api,
        columnApi: this.grid_01Options.columnApi
    };
    var grid_02Info = {
        id: this.rowId,
        api: this.grid_02Options.api,
        columnApi: this.grid_02Options.columnApi
    };
    this.masterGridApi.addDetailGridInfo(`grid01_${this.id}`, grid_01Info);
    this.masterGridApi.addDetailGridInfo(`grid02_${this.id}`, grid_02Info);
    this.addDestroyFunc = () => {
        this.masterGridApi.removeDetailGridInfo(`grid01_${this.id}`);
        this.masterGridApi.removeDetailGridInfo(`grid02_${this.id}`);
        node.addDetailGridInfo = null;
    };
}

createDetailsGrids(params) {
    this.buildGridOptions();
    new agGrid.Grid(this.grid_01, this.grid_01Options, {
        $scope: params.$scope,
        $compile: params.$compile
    });
    new agGrid.Grid(this.grid_02, this.grid_02Options, {
        $scope: params.$scope,
        $compile: params.$compile
    });
    this.grid_01Options.api.setDomLayout("autoHeight");
    this.grid_02Options.api.setDomLayout("autoHeight");

    this.addDestroyFunc = () => {
        if(this.grid_01Options.api) {
            this.grid_01Options.api.destroy();
        }
        if(this.grid_02Options.api) {
            this.grid_02Options.api.destroy();
        }
    };
}

}

然后在您的主网格定义中

    $scope.masterGridOpts.masterDetail = true;
    $scope.masterGridOpts.detailCellRenderer = MultipleDetailCellRenderer;
    $scope.masterGridOpts.detailCellRendererParams = {};

Answer 2

根据 agGrid 自己的网站，现在支持这个：

https://blog.ag-grid.com/introducing-version-20-of-ag-grid/

我学会了不要相信 agGrid 的文档，直到我看到一个工作示例。

有没有人见过这样的例子，或者设法让它工作？