这是用户在 2025-8-1 16:23 为 https://handsontable.com/docs/javascript-data-grid/context-menu/ 保存的双语快照页面，由 沉浸式翻译 提供双语支持。了解如何保存？
16.0.1JavaScript Data Grid Context menu

JavaScript Data Grid上下文菜单

通过打开上下文菜单，可以快速访问删除行、插入列或复制数据等上下文操作。

本页内容

带有默认选项的上下文菜单

使用默认配置启用上下文菜单：

contextMenu: true,

要查看上下文菜单，在单元格上右键单击：

import Handsontable from 'handsontable';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

const container = document.querySelector('#example1');

new Handsontable(container, {
  themeName: 'ht-theme-main',
  data: [
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
    ['2017', 10, 11, 12, 13, 15, 16],
    ['2018', 10, 11, 12, 13, 15, 16],
    ['2019', 10, 11, 12, 13, 15, 16],
    ['2020', 10, 11, 12, 13, 15, 16],
    ['2021', 10, 11, 12, 13, 15, 16],
  ],
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

带有选定选项的上下文菜单

您可以通过将 contextMenu 选项作为键的数组传递来定义菜单中的项目：

键 操作和所需插件
row_above 在上方插入行
row_below 在下方插入行
col_left 在左侧插入列
col_right 在右侧插入列
--------- 在菜单项中添加分隔符
remove_row 删除选中的行
remove_col 删除选中的列
clear_column 删除选中列的数据
undo 撤销上一步操作。需要：UndoRedo
redo 重做上一步操作。需要： UndoRedo
make_read_only 将选定的单元格设置为只读
alignment 对单元格中的文本进行对齐
cut 将选定单元格的内容剪切到系统剪贴板。需要： CopyPaste
copy 将选中单元格的内容复制到系统剪贴板。需要： CopyPaste
copy_with_column_headers 将选中单元格及其最近列标题的内容复制。需要： CopyPaste 并将 copyColumnHeaders 设置为 true
copy_with_column_group_headers 将选中单元格及其所有相关列标题的内容复制。需要： NestedHeaders 和 CopyPaste 并将 copyColumnGroupHeaders 设置为 true
copy_column_headers_only 将选中单元格最近的列标题内容复制。需要： CopyPaste 并将 copyColumnHeadersOnly 设置为 true
freeze_column 冻结选定的列。需要： ManualColumnFreeze
unfreeze_column 解冻选定的列。需要： ManualColumnFreeze
borders 为选定的单元格添加边框。需要： CustomBorders
commentsAddEdit 添加或编辑评论。需要： Comments
commentsRemove 移除注释。需要： 注释
commentsReadOnly 将注释设为只读。需要： 注释
mergeCells 合并或取消合并所选单元格。需要：MergeCells
add_child 插入子行。需要： NestedRows
detach_from_parent 将选中的行与其父行分离。需要： NestedRows
hidden_columns_hide 隐藏选定的列。需要： HiddenColumns
hidden_columns_show 显示隐藏的列。需要： HiddenColumns
hidden_rows_hide 隐藏选中的行。需要： HiddenRows
hidden_rows_show 显示隐藏的行。需要： HiddenRows
filter_by_condition 添加第一个过滤条件。需要： Filters
filter_by_condition2 添加第二个筛选条件。需要： Filters
filter_operators 选择一个过滤参数。需要：Filters
filter_by_value 添加一个过滤值。需要：Filters
filter_action_bar 应用配置的过滤器。需要：Filters

要查看上下文菜单，右键单击单元格：

import Handsontable from 'handsontable';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

const container = document.querySelector('#example2');

new Handsontable(container, {
  themeName: 'ht-theme-main',
  data: [
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
    ['2017', 10, 11, 12, 13, 15, 16],
    ['2018', 10, 11, 12, 13, 15, 16],
    ['2019', 10, 11, 12, 13, 15, 16],
    ['2020', 10, 11, 12, 13, 15, 16],
    ['2021', 10, 11, 12, 13, 15, 16],
  ],
  rowHeaders: true,
  colHeaders: true,
  contextMenu: ['row_above', 'row_below', 'remove_row', 'clear_column'],
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

带完全自定义配置的上下文菜单

本示例展示了如何：

  • 为所有选项添加通用回调
  • 动态禁用选项
  • 为预定义选项设置自定义文本
  • 添加自己的自定义选项
  • 为特定选项添加回调函数

要查看上下文菜单，右键单击单元格：

import Handsontable from 'handsontable';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

const contextMenuSettings = {
  callback(key, selection, clickEvent) {
    // Common callback for all options
    console.log(key, selection, clickEvent);
  },
  items: {
    row_above: {
      disabled() {
        // `disabled` can be a boolean or a function
        // Disable option when first row was clicked
        return this.getSelectedLast()?.[0] === 0; // `this` === hot
      },
    },
    // A separator line can also be added like this:
    // 'sp1': { name: '---------' }
    // and the key has to be unique
    sp1: '---------',
    row_below: {
      name: 'Click to add row below',
    },
    about: {
      // Own custom option
      name() {
        // `name` can be a string or a function
        return '<b>Custom option</b>'; // Name can contain HTML
      },
      hidden() {
        // `hidden` can be a boolean or a function
        // Hide the option when the first column was clicked
        return this.getSelectedLast()?.[1] == 0; // `this` === hot
      },
      callback() {
        // Callback for specific option
        setTimeout(() => {
          alert('Hello world!'); // Fire alert after menu close (with timeout)
        }, 0);
      },
    },
    colors: {
      // Own custom option
      name: 'Colors...',
      submenu: {
        // Custom option with submenu of items
        items: [
          {
            // Key must be in the form 'parent_key:child_key'
            key: 'colors:red',
            name: 'Red',
            callback() {
              setTimeout(() => {
                alert('You clicked red!');
              }, 0);
            },
          },
          { key: 'colors:green', name: 'Green' },
          { key: 'colors:blue', name: 'Blue' },
        ],
      },
    },
    credits: {
      // Own custom property
      // Custom rendered element in the context menu
      renderer() {
        const elem = document.createElement('marquee');

        elem.style.cssText = 'background: lightgray; color: #222222;';
        elem.textContent = 'Brought to you by...';

        return elem;
      },
      disableSelection: true,
      isCommand: false,
    },
  },
};

const container = document.querySelector('#example3');

new Handsontable(container, {
  themeName: 'ht-theme-main',
  data: [
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
    ['2017', 10, 11, 12, 13, 15, 16],
    ['2018', 10, 11, 12, 13, 15, 16],
    ['2019', 10, 11, 12, 13, 15, 16],
    ['2020', 10, 11, 12, 13, 15, 16],
    ['2021', 10, 11, 12, 13, 15, 16],
  ],
  rowHeaders: true,
  colHeaders: true,
  licenseKey: 'non-commercial-and-evaluation',
  height: 'auto',
  contextMenu: contextMenuSettings,
  autoWrapRow: true,
  autoWrapCol: true,
});

Windows macOS 操作 Excel 工作表
Ctrl+Shift+\ or Shift+F10 Cmd+Shift+\ or Shift+F10 打开上下文菜单 ✗ ✓
箭头键 箭头键 将一个可用的菜单项向上、向下、向左或向右移动 ✓ ✓
Page Up Page Up Move to the first visible item of the context menu or submenu ✓ ✗
Page Down Page Down Move to the last visible item of the context menu or submenu ✓ ✗
Escape Escape Close the context menu or submenu ✓ ✓
Enter Enter Run the action of the selected menu item ✓ ✗