Question

我正在关注Ag-Grid master detail文档，并尝试使{master}列和细节网格列对齐并保持同步，如aligned grid文档中所述。但这似乎不适用于主要细节布局。

我去调试Ag-grid alignedGridService，发现传递的网格配置应该有一个grid API reference，用于绑定两个网格之间的网格事件，

// iterate through the aligned grids, and pass each aligned grid service to the callback
const otherGrids = this.gridOptionsWrapper.getAlignedGrids();
if (otherGrids) {
    otherGrids.forEach((otherGridOptions: GridOptions) => {
        if (otherGridOptions.api) {
            const alignedGridService = otherGridOptions.api.__getAlignedGridService();
            callback(alignedGridService);
        }
    });
}

对于细节网格不是这种情况，因为在执行上述代码时它们没有API引用，我想可能是因为细节网格仅在需要时实例化，其次，其配置将为每个细节网格重用，因此它们的API根据文档，对象不是配置的一部分，而是主配置的一部分，

// lookup a specific DetailGridInfo by id, and then call stopEditing() on it
var detailGridInfo = masterGridOptions.api.getDetailGridInfo('someDetailGridId');
detailGridInfo.api.stopEditing();

// iterate over all DetailGridInfo's, and call stopEditing() on each one
masterGridOptions.api.forEachDetailGridInfo(function(detailGridInfo) {
    console.log("detailGridInfo: ", detailGridInfo);
    // then e.g. call stopEditing() on that detail grid
    detailGridInfo.api.stopEditing();
});

另一方面，这是我要按照对齐的网格文档执行的操作，

/** HIDE SCROLL FOR DETAIL GRID **/
// detailConfig.suppressHorizoHntalScroll = true;

/** SET DETAIL GRID AS THE ALIGNED GRID */
this.masterGridOptions.alignedGrids = [this.detailGridOptions];

在这种情况下这显然是错误的，我想我可能需要放置自定义实现以将两个网格事件绑定在一起，但是我不确定从哪里开始，即使可能的话，

第二，似乎设置autoHeight: true似乎对细节网格的高度没有影响，基本上我要做的是松开细节网格的滚动条，因为它不应该具有很大的交易行。根据文档，您可以提供静态高度，也可以在运行时提供高度，但是似乎没有自动确定高度的选项，

// option 1 - fixed detail row height, sets height for all details rows
masterGridOptions.detailRowHeight = 500;

// option 2 - dynamic detail row height, dynamically sets height for all rows
masterGridOptions.getRowHeight = function (params) {
    var isDetailRow = params.node.detail;
    if (isDetailRow) {
        var detailPanelHeight = params.data.children.length * 50;
        // dynamically calculate detail row height
        return detailPanelHeight;
    } else {
        // for all non-detail rows, return 25, the default row height
        return 25;
    }
}

在我的情况下，单元格中的文本长度可能会更长，并且由于我一直使用autoHeight的原因，我希望行自动换行并具有可变的高度，而不是将它们限制为一定的高度。在这里似乎也没有影响。

这里有一个stackBlitz，它说明了两个问题，一个人可能会说Master / Detail布局可能不适合这里的用例，而简单的树形布局可能是不错的选择，但前提是要提供细节网格可以具有自己的标题，并提供树视图无法提供的功能，我倾向于使用主视图/详细视图。

任何能帮助我解决这两个问题的帮助都将受到高度赞赏。

编辑：我使用以下方法使对齐的网格部分工作：

detailGridOptions.alignedGrids = [masterGridOptions];
detailGridOptions.onGridReady = (params) => {
    /** SET DETAIL GRID AS THE ALIGNED GRID */
    masterGridOptions.api.alignedGrids = [];
    masterGridOptions.api.forEachDetailGridInfo((params: DetailGridInfo, index) => {
        masterGridOptions.api.alignedGrids.push(params);
    });
}

注意：：由于网格的虚拟滚动必须在每个详细信息masterGridOption.alignedGrids回调上更新onGridReady，因为甚至扩展的详细信息网格也会被破坏并重新生成。

现在，除了使明细行和主网格行都真正遵循autoHeight之外，我唯一想做的就是在主行和明细之间对齐非公共列，例如

调整母版名称列的大小应调整详细信息的名字或姓氏列的大小，以便它们保持同步，反之亦然
隐藏主人的姓名列应同时隐藏名称和名称列的详细信息
此外，由于与主“名称”列相对应的这两个子列（f名称和l名称），重新排序似乎已中断，

Ag网格对齐“主明细”网格列

0 个答案: