Ag grid Ag网格-主/详图-多详图

对于Ag网格主/详图，是否有方法添加多个详图？在eg中，它只包含一个细节。听起来你好像在问如何拥有一个包含多个细节网格的主控形状

您需要创建自己的。 在类的模板定义中，可以根据需要创建任意数量的详图格线。 在init方法中，初始化网格并设置其数据

记住这一点非常重要！ 栅格仅在可见时存在

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 = {};

---

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

在我看到一个有效的例子之前，我学会了不要相信agGrid的文档

---

有没有人看到过这样的例子，或者成功地让它发挥作用？

扩展您的问题pls@K.桑托斯：你实现了这个功能吗？你有没有看到过野外多细节网格的例子？这将是非常感谢的。我从来没有找到一个多细节行的例子，所以我清理了我的实现并分享了一点。理论上，每个主控形状可以有2个以上的详图栅格。这在AngularJS中很有用，但您可能需要适应其他版本/库。请注意，仅当展开主控形状且详图网格位于屏幕上时，详图网格才存在。那一开始让我很伤心。希望这是有帮助的！