Angular & ng2-smart-table：多选模式下禁用指定行复选框

我之前也碰到过一模一样的需求，完全没必要因为自定义组件丢了全选功能，咱们可以通过继承原复选框组件+重写部分逻辑的方式来实现，同时处理全选时的过滤逻辑，完美保留原有功能：

步骤1：创建自定义复选框组件 #

这个组件直接继承ng2-smart-table自带的复选框组件，只在原有基础上添加禁用判断，不破坏原有选择逻辑：

import { Component } from '@angular/core';
import { Ng2SmartTableCheckboxComponent } from 'ng2-smart-table';

@Component({
  selector: 'app-disabled-checkbox',
  template: `
    <input 
      type="checkbox" 
      [checked]="isSelected" 
      (change)="handleChange($event)"
      [disabled]="rowData.set"
      class="ng2-smart-checkbox-input"
    />
  `,
})
export class DisabledCheckboxComponent extends Ng2SmartTableCheckboxComponent {

  handleChange(event: Event) {
    // 如果当前行的set为true，直接阻止选择行为
    if (this.rowData.set) {
      event.preventDefault();
      return;
    }
    // 非禁用行，调用父组件的原生选择逻辑
    super.onChange(event);
  }
}

记得在你的Angular模块里声明并导出这个组件，确保ng2-smart-table能识别到它。

步骤2：配置表格的settings参数 #

在表格配置中指定自定义的复选框组件，同时保留multi选择模式：

import { DisabledCheckboxComponent } from './disabled-checkbox.component';

// ...

settings = {
  selectMode: 'multi',
  select: {
    checkboxComponent: DisabledCheckboxComponent, // 指定自定义组件
    columnTitle: '选择',
  },
  columns: {
    // 你的业务列配置示例
    id: {
      title: 'ID',
    },
    name: {
      title: '名称',
    },
    set: {
      title: '已设置',
      type: 'boolean',
    },
  },
  actions: {
    add: false,
    edit: false,
    delete: false,
  },
  // 可选：给禁用行添加样式，提升视觉区分度
  rowClassFunction: (row) => {
    return row.data.set ? 'disabled-row' : '';
  },
};

步骤3：修复全选逻辑 #

默认全选按钮会选中所有行，我们需要过滤掉set: true的行。通过ViewChild获取表格组件，重写全选的触发逻辑：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { Ng2SmartTableComponent } from 'ng2-smart-table';

// ...

@Component({
  // 组件元数据
})
export class YourTableComponent implements AfterViewInit {
  @ViewChild(Ng2SmartTableComponent) table!: Ng2SmartTableComponent;

  ngAfterViewInit() {
    const selectAllCheckbox = this.table.el.nativeElement.querySelector('.ng2-smart-thead-checkbox input');
    if (selectAllCheckbox) {
      selectAllCheckbox.addEventListener('change', (event: Event) => {
        event.preventDefault();
        // 筛选出所有非禁用的行
        const validRows = this.table.source.data.filter(row => !row.set);
        // 切换这些行的选中状态
        const shouldSelect = !this.table.isAllSelected();
        validRows.forEach(row => {
          this.table.selectRow(row, shouldSelect);
        });
        // 更新全选按钮的选中状态
        selectAllCheckbox.checked = this.table.selectedRows.length === validRows.length;
      });
    }
  }
}

步骤4：添加禁用行样式（可选） #

在全局样式或组件样式中添加：

.disabled-row {
  background-color: #f5f5f5;
  opacity: 0.7;
}

.disabled-row input[type="checkbox"] {
  cursor: not-allowed;
}

这样做的好处很明显：

• 完全保留了ng2-smart-table原有的选择逻辑和全选功能
• set: true的行复选框会被禁用，既点不动也不会被全选选中
• 视觉上能清晰区分禁用行和正常行

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