Angular中ui-grid实现选中行后禁用同列异值行的方案

核心思路 #

通过维护选中行的性别基准值，结合ui-grid的rowClass（动态设置行样式）和isRowSelectable（控制行是否可选中）两个配置，再配合选中事件的逻辑处理，就能实现需求。

具体实现代码 #

首先在控制器中完善gridOptions的配置：

$scope.selectedGender = null; // 存储选中行的基准性别
$scope.arr = [{id:'123', name:'Max', gender:'m'}, 
              {id:'456', name:'Bob', gender:'m'}, 
              {id:'789', name:'Ann', gender:'f'},
              {id:'012', name:'Amy', gender:'f'}];

$scope.gridOptions = {
  multiSelect : true,
  enableFullRowSelection: true,
  columnDefs : [
    {name: 'id', displayName: 'ID'}, 
    {name: 'name', displayName: 'Name'}, 
    {name: 'gender', displayName: 'Gender'}
  ],
  // 动态添加置灰样式
  rowClass: function(row) {
    if ($scope.selectedGender && row.entity.gender !== $scope.selectedGender) {
      return 'disabled-row';
    }
    return '';
  },
  // 控制行是否允许被选中
  isRowSelectable: function(row) {
    if (!$scope.selectedGender) {
      return true;
    }
    return row.entity.gender === $scope.selectedGender;
  },
  onRegisterApi : function(gridApi){
    $scope.gridApi = gridApi;
    gridApi.selection.on.rowSelectionChanged($scope,function(row){
      // 获取当前所有选中行
      const selectedRows = gridApi.selection.getSelectedRows();
      
      if (selectedRows.length > 0) {
        // 取第一个选中行的性别作为基准
        $scope.selectedGender = selectedRows[0].gender;
        // 过滤掉选中行中性别不一致的行（避免多选不同性别的情况）
        selectedRows.forEach(selectedRow => {
          if (selectedRow.gender !== $scope.selectedGender) {
            gridApi.selection.unSelectRow(selectedRow);
          }
        });
      } else {
        // 无选中行时清空基准值
        $scope.selectedGender = null;
      }
      // 通知网格更新行样式和选中状态
      gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW);
    });
  },
  data : $scope.arr
};

然后添加CSS样式实现置灰效果：

.disabled-row {
  background-color: #f0f0f0;
  color: #999;
  cursor: not-allowed;
}

关键逻辑说明 #

1. 基准性别维护：selectedGender变量存储当前选中行的性别，无选中行时置空。
2. 行样式控制：rowClass函数根据行数据的gender是否与基准值匹配，动态添加置灰样式。
3. 选中权限控制：isRowSelectable函数直接限制不同性别的行无法被选中。
4. 选中事件处理：在行选中变化时，确保所有选中行的性别一致，同时触发网格刷新，让样式和选中状态立即生效。

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