如何在点击SyncFusion Grid上下文菜单后获取整行数据？

核心思路 #

给Grid的上下文菜单绑定点击事件，在事件回调里通过SyncFusion提供的rowData参数直接获取当前右键点击行的完整数据。

各主流框架实现代码 #

Angular

1. 在Grid标签中配置上下文菜单，并绑定contextMenuItemClick事件

<ejs-grid #grid [dataSource]="gridData" [contextMenuItems]="menuItems" (contextMenuItemClick)="onContextMenuClick($event)">
  <!-- 你的6列配置 -->
</ejs-grid>

2. 组件内实现事件处理函数

import { Component, ViewChild } from '@angular/core';
import { GridComponent, ContextMenuItemClickEventArgs } from '@syncfusion/ej2-angular-grids';

@Component({
  selector: 'app-grid-demo',
  templateUrl: './grid-demo.component.html'
})
export class GridDemoComponent {
  @ViewChild('grid') grid: GridComponent;
  gridData: any[] = [/* 你的数据源 */];
  menuItems: string[] = ['ViewDetails', 'Edit', 'Delete']; // 自定义菜单项

  onContextMenuClick(args: ContextMenuItemClickEventArgs): void {
    // 根据菜单项ID判断操作
    switch(args.item.id) {
      case 'ViewDetails':
        // 获取整行数据
        const rowData = args.rowData;
        console.log('当前行完整数据:', rowData);
        // 这里写你的业务逻辑，比如弹窗展示详情
        break;
      // 其他菜单项逻辑
    }
  }
}

React

1. 给Grid组件绑定contextMenuClick事件

import { Grid, ContextMenu } from '@syncfusion/ej2-react-grids';
import { useState } from 'react';

Grid.Inject(ContextMenu);

function GridDemo() {
  const [gridData] = useState([/* 你的数据源 */]);
  const menuItems = ['ViewDetails', 'Edit', 'Delete'];

  const handleContextMenuClick = (args) => {
    if (args.item.id === 'ViewDetails') {
      const rowData = args.rowData;
      console.log('当前行完整数据:', rowData);
      // 执行你的业务操作
    }
  };

  return (
    <Grid
      dataSource={gridData}
      contextMenuItems={menuItems}
      contextMenuClick={handleContextMenuClick}
      {/* 6列配置 */}
    />
  );
}

export default GridDemo;

Vue

1. 监听Grid的context-menu-click事件

<template>
  <ejs-grid 
    ref="grid" 
    :dataSource="gridData" 
    :contextMenuItems="menuItems" 
    @context-menu-click="handleContextMenuClick"
  >
    <!-- 6列配置 -->
  </ejs-grid>
</template>

<script>
import { GridComponent } from '@syncfusion/ej2-vue-grids';

export default {
  components: {
    'ejs-grid': GridComponent
  },
  data() {
    return {
      gridData: [/* 你的数据源 */],
      menuItems: ['ViewDetails', 'Edit', 'Delete']
    };
  },
  methods: {
    handleContextMenuClick(args) {
      if (args.item.id === 'ViewDetails') {
        const rowData = args.rowData;
        console.log('当前行完整数据:', rowData);
        // 处理业务逻辑
      }
    }
  }
};
</script>

注意事项 #

• 自定义菜单项时，确保contextMenuItems里的名称和事件判断中的args.item.id一致
• rowData会包含该行所有列的字段和对应值，直接解构或调用字段即可使用

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