2

我正在关注Ag-Grid 主细节文档，并尝试让主网格列和细节网格列对齐并保持同步，如对齐网格文档中所述。但它似乎不适用于主细节布局。

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

// 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 对象不是配置的一部分，而不是主配置的一部分，根据文档，可以使用详细 API ref 访问，

// 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，它演示了这两个问题，有人可能会说主/细节布局可能不适合这里的用例，而简单的树形布局可能会很好，但前提是细节网格可以有自己的标题和提供树视图无法提供的东西，我倾向于使用主/详细视图。

非常感谢任何可以帮助我解决这两个问题的帮助。

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

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 name 和 l name 列
  • 同样由于这两个子列（f name 和 l name）对应于 master 'name' 列，重新排序似乎被破坏了，
4

0 回答 0