如何在可展开UI Grid中根据父行数据自动选中子网格行？

问题描述 #

我正在实现可展开UI Grid，希望在父行展开时，根据父行数据自动选中子网格中的对应行。
请问如何获取子网格的行列表？是否可以通过gridApi.selection方法查找并选中子网格行？我知道若能获取子网格行，可设置isSelected = true来选中，但$scope.gridApi.grid.rows获取的行列表不包含子网格行，不知如何获取子网格行。

用户提供的代码示例：

$scope.fruits = [...];
$scope.colors = [...];
$scope.gridOptions = {
  data: $scope.fruits,
  enableRowSelection: true,
  expandableRowTemplate: '<div ui-grid="row.entity.subGridOptions"></div>',
  ...
  onRegisterApi: function (gridApi) {
    $scope.gridApi = gridApi;
    gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
      if (row.isExpanded) {
        row.entity.subGridOptions = {
          data: $scope.colors,
          ...
        };
        if (row.entity.color_id) {
          // 此处需要帮助
          _.forEach(/*子网格中的行*/, function(colorRow) {  
            if (colorRow.entity.id === row.entity.color_id) {
              colorRow.isSelected = true;
            }
          });
        }
      }
    });
  }
};

解决方案 #

1. 为子网格单独注册GridApi #

子网格的GridApi独立于父网格，必须在创建子网格配置时注册并保存引用，才能后续操作子网格：

row.entity.subGridOptions = {
  data: $scope.colors,
  enableRowSelection: true, // 必须开启行选择功能
  onRegisterApi: function(subGridApi) {
    // 将子网格Api存入父行实体，方便后续调用
    row.entity.subGridApi = subGridApi;
  }
  // 其他子网格配置项...
};

2. 通过子网格Api实现自动选中 #

有了子网格的Api引用后，有两种可靠的方式实现选中：

方式一：使用selectionApi的selectRow方法（推荐）

直接通过数据项选中，无需遍历行列表：

if (row.entity.color_id) {
  // 匹配子网格中对应ID的数据
  const targetColor = $scope.colors.find(color => color.id === row.entity.color_id);
  if (targetColor) {
    // 调用子网格的选中方法
    row.entity.subGridApi.selection.selectRow(targetColor);
  }
}

方式二：遍历子网格行设置选中状态

如果需要遍历行操作，需等待子网格渲染完成后再执行：

if (row.entity.color_id) {
  // 用$timeout确保子网格DOM渲染完成，能获取到行数据
  $timeout(() => {
    _.forEach(row.entity.subGridApi.grid.rows, function(colorRow) {  
      if (colorRow.entity.id === row.entity.color_id) {
        colorRow.isSelected = true;
        // 触发选择事件更新视图
        row.entity.subGridApi.selection.notifyRowSelectionChanged(colorRow);
      }
    });
  });
}

关键注意点 #

• 子网格必须开启enableRowSelection: true，否则选中逻辑不会生效。
• 子网格行数据需要等待DOM渲染完成后才能获取，$timeout是简单可靠的等待方式。
• 父网格的GridApi只能操作父行，子网格的操作必须用自身的GridApi引用。

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