在 ag-grid 中显示上下文菜单 - Javascript

在 ag-grid 里使用上下文菜单可以方便地实现对网格数据的操作，比如右键菜单的删除、编辑等。

下面介绍如何在 ag-grid 中显示上下文菜单。

安装 ag-grid

首先，你需要在你的项目中安装 ag-grid。你可以使用 npm 自动安装：

npm install ag-grid-community

或者手动下载并引用 ag-grid 的脚本文件和样式表。

创建网格

创建一个基本的网格非常简单，我们可以在 HTML 中添加一个 div 元素，然后在 JavaScript 中创建一个 AgGridVue 实例：

<div id="myGrid" style="height: 200px; width: 100%;" class="ag-theme-alpine"></div>

import { AgGridVue } from 'ag-grid-vue';

new Vue({
  el: '#app',
  components: {
    AgGridVue,
  },
  data: {
    columnDefs: [
      { field: 'make' },
      { field: 'model' },
      { field: 'price' },
    ],
    rowData: [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 },
    ],
  },
  template: `
    <AgGridVue
      :columnDefs="columnDefs"
      :rowData="rowData"
      :context="context"
      :frameworkComponents="frameworkComponents"
    />
  `,
});

上面的代码创建了一个包含三个列的简单的网格。

添加上下文菜单

要添加上下文菜单，我们需要定义一个菜单并将其传递给网格组件。

定义菜单

我们可以使用 ag-grid 提供的 ContextMenuFactory 类来创建菜单：

import { AgGridVue } from 'ag-grid-vue';
import { ContextMenuFactory } from 'ag-grid-community';

new Vue({
  el: '#app',
  components: {
    AgGridVue,
  },
  data: {
    columnDefs: [
      { field: 'make' },
      { field: 'model' },
      { field: 'price' },
    ],
    rowData: [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 },
    ],
    contextMenuItems: [
      'copy',
      'paste',
      'separator',
      'toolPanel',
      'separator',
      'chartRange',
    ],
  },
  computed: {
    contextMenu() {
      return ContextMenuFactory.createMenu({
        items: this.contextMenuItems,
        eventCallbacks: {
          processCopyToClipboard: (params) => {
            const event = params.event;
            const value = params.value;
            const clipboardData = event.clipboardData || window.clipboardData;
            clipboardData.setData('text/plain', value);
            event.preventDefault();
          },
        },
      });
    },
  },
  template: `
    <AgGridVue
      :columnDefs="columnDefs"
      :rowData="rowData"
      :getContextMenuItems="getContextMenuItems"
    />
  `,
});

上面的代码创建了一个包含多个菜单项的菜单，并定义了一个 processCopyToClipboard 回调函数，用于处理复制到剪贴板的操作。

将菜单传递给网格

我们可以使用 getContextMenuItems 方法将菜单传递给网格：

import { AgGridVue } from 'ag-grid-vue';
import { ContextMenuFactory } from 'ag-grid-community';

new Vue({
  el: '#app',
  components: {
    AgGridVue,
  },
  data: {
    columnDefs: [
      { field: 'make' },
      { field: 'model' },
      { field: 'price' },
    ],
    rowData: [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 },
    ],
    contextMenuItems: [
      'copy',
      'paste',
      'separator',
      'toolPanel',
      'separator',
      'chartRange',
    ],
  },
  computed: {
    contextMenu() {
      return ContextMenuFactory.createMenu({
        items: this.contextMenuItems,
        eventCallbacks: {
          processCopyToClipboard: (params) => {
            const event = params.event;
            const value = params.value;
            const clipboardData = event.clipboardData || window.clipboardData;
            clipboardData.setData('text/plain', value);
            event.preventDefault();
          },
        },
      });
    },
  },
  methods: {
    getContextMenuItems(params) {
      return this.contextMenu.items;
    },
  },
  template: `
    <AgGridVue
      :columnDefs="columnDefs"
      :rowData="rowData"
      :getContextMenuItems="getContextMenuItems"
    />
  `,
});

现在我们已经成功地将上下文菜单添加到了 ag-grid 中。

总结

在 ag-grid 中添加上下文菜单很方便。我们只需要定义菜单和回调函数，并将它们传递给网格即可。