如何在同一HTML与控制器中重复渲染相同的ag-grid（7.2.2）？

嘿，这个问题我之前碰过类似的，ag-grid 7.2.2这个版本在处理隐藏DOM里的表格初始化，还有配置复用这块确实容易踩坑。我给你梳理几个靠谱的解决思路：

1. 给模态框表格搞个独立的配置对象 #

别直接复用主表格的agGridBusqueda配置！两个实例共用同一个对象的话，ag-grid内部的状态会冲突，导致只有一个能正常渲染。你可以在控制器里深度复制一份主配置，给模态框表格单独用：

// 主表格的原配置
$scope.agGridBusqueda = {
    columnDefs: [...], // 你的列定义
    rowData: [...],    // 你的数据
    // 其他比如enableSorting、enableFilter这类配置
};

// 给模态框表格复制一份独立配置，用angular.copy做深度复制
$scope.agGridDetalle = angular.copy($scope.agGridBusqueda);
// 要是想调整模态框表格的样式，比如高度，直接在这里改就行
$scope.agGridDetalle.height = 400;

然后把模态框里的HTML改成绑定这个新配置：

<div ag-grid="agGridDetalle" class="ag-enel"></div>

2. 等模态框显示后再刷新表格 #

模态框一开始是隐藏的，ag-grid 7.2.2在初始化的时候没法获取到隐藏DOM的正确尺寸，自然渲染不出来。你可以监听Bootstrap模态框的shown.bs.modal事件，等模态框完全显示出来后，强制刷新表格：

$('#exampleModal').on('shown.bs.modal', function () {
    // 拿到模态框里的ag-grid实例
    var gridInstance = $scope.agGridDetalle.api;
    if (gridInstance) {
        // 强制刷新视图和列宽适配
        gridInstance.refreshView();
        gridInstance.sizeColumnsToFit();
    }
});

最好给模态框里的表格加个id，方便后续定位（不过用scope里的api也能拿到）：

<div id="modalGrid" ag-grid="agGridDetalle" class="ag-enel"></div>

3. 别忘记给模态框表格加正确的样式 #

主表格有h113类设置高度，模态框里的表格也得有明确的高度，不然可能因为高度为0导致看起来没渲染。你可以给模态框内的表格容器加个样式：

.ag-enel {
    height: 400px; /* 或者用100%，但要确保父容器（模态框body）有高度 */
    width: 100%;
}
.modal-body {
    overflow: auto; /* 防止表格内容太多溢出模态框 */
}

额外提醒 #

如果两个表格的数据不需要同步，最好把rowData也单独复制一份，不然改主表格的数据，模态框里的也会跟着变：

$scope.agGridDetalle.rowData = angular.copy($scope.agGridBusqueda.rowData);

内容的提问来源于stack exchange，提问作者Jose