AngularJS ui.grid编辑单元格后自动勾选复选框问题求助

你的代码核心问题有两个：一是复选框绑定了全局的$scope.checkboxData，导致所有行的复选框共用同一个状态；二是没有在单元格编辑完成的事件中添加自动勾选的逻辑。以下是修复方案：

步骤1：为每行数据添加独立的勾选状态属性 #

在你的数据源初始化时，给每个数据实体添加一个isSelected属性，用于单独控制该行复选框的状态：

// 假设你的数据源是$scope.myData，根据实际情况替换
$scope.myData.forEach(item => {
  item.isSelected = false; // 默认未勾选
});

步骤2：修改复选框列的模板绑定 #

把复选框的ng-model从全局的checkboxData改成当前行实体的isSelected，确保每行的复选框状态独立：

$scope.gridOptions.columnDefs = [
  // 其他列保持不变
  { 
    displayName: 'Select', 
    name: 'checkbox', 
    enableFiltering: false, 
    enableCellEdit: false, 
    cellTemplate: '<span style="margin-left: 0px;"><input class="Checkbox" type="checkbox" ng-model="row.entity.isSelected" ng-click="grid.appScope.checkboxCheck(row.entity, row.entity.isSelected)" id="{{row.entity.seq_no}}"></input><label for="{{row.entity.seq_no}}"><span></span></label></span>',
    width: 60 
  }
];

步骤3：在编辑完成事件中自动勾选当前行 #

利用afterCellEdit事件，在单元格编辑完成后直接设置当前行的isSelected为true：

$scope.gridOptions.onRegisterApi = function(gridApi) {
  $scope.gridApi = gridApi;
  gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {
    $scope.msg.lastCellEdited = 'ID: ' + rowEntity.id + ', Column: ' + colDef.name + ', New Value: ' + newValue + ', Old Value: ' + oldValue;
    // 编辑完成后自动勾选当前行
    rowEntity.isSelected = true;
    $scope.$apply(); // 触发视图更新
  });
};

这样修改后，每次编辑任意可编辑单元格，对应行的复选框就会自动被勾选，且每行的复选框状态互不干扰。

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