Angular环境下DevExpress DataGrid单元格按钮点击如何弹出自定义弹窗？

1. 模块依赖导入 #

首先确保项目已安装适配Angular 9+的devextreme、devextreme-angular依赖，在所属功能模块的module.ts中导入所需组件：

import { NgModule } from '@angular/core';
import { DxDataGridModule, DxPopupModule, DxButtonModule } from 'devextreme-angular';

@NgModule({
  imports: [
    // 其他已有导入
    DxDataGridModule,
    DxPopupModule,
    DxButtonModule
  ]
})
export class YourFeatureModule { }

2. 组件模板代码（*.component.html） #

DataGrid新增操作列，同时复用同一个弹窗实现两种操作的确认逻辑：

<!-- DataGrid 组件 -->
<dx-data-grid [dataSource]="yourDataSource">
  <!-- 其他已有列配置 -->
  <dxi-column type="buttons" caption="操作" [width]="180">
    <dxi-button 
      text="Approve" 
      icon="check" 
      (onClick)="openConfirmPopup('approve', $event.row.data)"
    ></dxi-button>
    <dxi-button 
      text="Reject" 
      icon="close" 
      (onClick)="openConfirmPopup('reject', $event.row.data)"
    ></dxi-button>
  </dxi-column>
</dx-data-grid>

<!-- 通用确认弹窗 -->
<dx-popup
  [(visible)]="popupVisible"
  [showTitle]="true"
  title="操作确认"
  [width]="400"
  [height]="200"
  [dragEnabled]="false"
  [closeOnOutsideClick]="true"
>
  <div *dxTemplate="let data of 'content'">
    <p>{{confirmText}}</p>
  </div>
  <div *dxTemplate="let data of 'toolbarItems'">
    <dxi-toolbar-item toolbar="bottom" location="after">
      <dx-button text="No" (onClick)="onCancel()"></dx-button>
    </dxi-toolbar-item>
    <dxi-toolbar-item toolbar="bottom" location="after">
      <dx-button text="Yes" type="default" (onClick)="onConfirm()"></dx-button>
    </dxi-toolbar-item>
  </div>
</dx-popup>

3. 组件业务逻辑（*.component.ts） #

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 表格数据源，替换为你自己的业务数据源
  yourDataSource: any[] = [];
  // 弹窗控制变量
  popupVisible = false;
  // 弹窗提示文本
  confirmText = '';
  // 当前操作类型
  currentAction: 'approve' | 'reject' | null = null;
  // 当前操作的行数据
  currentRowData: any = null;

  // 打开确认弹窗
  openConfirmPopup(action: 'approve' | 'reject', rowData: any) {
    this.currentAction = action;
    this.currentRowData = rowData;
    // 根据操作类型设置对应提示语
    this.confirmText = action === 'approve' 
      ? 'Are you sure you want to approve' 
      : 'Are you sure you want to reject';
    this.popupVisible = true;
  }

  // 点击弹窗Yes按钮触发
  onConfirm() {
    // 关闭弹窗
    this.popupVisible = false;
    // 根据操作类型执行对应自定义逻辑
    if (this.currentAction === 'approve') {
      this.handleApprove(this.currentRowData);
    } else if (this.currentAction === 'reject') {
      this.handleReject(this.currentRowData);
    }
    // 重置状态
    this.resetPopupState();
  }

  // 点击弹窗No按钮/关闭弹窗触发
  onCancel() {
    this.popupVisible = false;
    this.resetPopupState();
  }

  // 自定义Approve逻辑，替换为你自己的业务逻辑
  private handleApprove(rowData: any) {
    console.log('执行批准逻辑', rowData);
    // 示例：调用审批接口、刷新表格等
  }

  // 自定义Reject逻辑，替换为你自己的业务逻辑
  private handleReject(rowData: any) {
    console.log('执行驳回逻辑', rowData);
    // 示例：调用驳回接口、刷新表格等
  }

  // 重置弹窗状态
  private resetPopupState() {
    this.currentAction = null;
    this.currentRowData = null;
    this.confirmText = '';
  }
}

4. 实现说明 #

• 操作列采用DevExpress DataGrid原生的按钮列类型实现，无需自定义cellTemplate，性能更优
• 两个操作复用同一个弹窗，通过操作类型变量区分执行逻辑，减少冗余代码
• 按钮点击事件可通过$event.row.data直接获取当前行的完整数据，无需额外查询
• 如果需要自定义按钮样式，可给dxi-button添加cssClass属性自定义样式即可

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