Tabulator 6.2开启selectableRange后如何实现多行删除？

当切换到selectableRange: true后，右键菜单的删除逻辑需要调整为获取所有选中行，而不是仅操作右键点击的单一行。核心是利用Tabulator内置的getSelectedRows()方法获取当前所有选中的行对象，再批量删除。

具体修改步骤 #

1. 调整右键菜单的删除动作逻辑，放弃仅操作右键触发的row对象，改为获取全局选中行：

// 假设table是你的Tabulator实例
const table = new Tabulator("#example-table", {
  selectableRange: true,
  rowContext: function(e, row) {
    return {
      items: {
        deleteSelected: {
          label: "删除选中行",
          action: function() {
            // 获取所有选中行
            const selectedRows = table.getSelectedRows();
            if (selectedRows.length === 0) {
              alert("请先选中要删除的行");
              return;
            }
            // 批量删除选中行，支持直接传入行对象数组
            table.deleteRow(selectedRows);
          }
        }
      }
    };
  },
  // 其他CRUD及表格配置项...
});

2. 关键说明：
   • getSelectedRows()方法在selectableRange和selectableRows模式下通用，都会返回当前所有选中的行对象数组。
   • deleteRow()方法支持直接传入行对象数组，无需额外转换为ID，简化操作。
   • 添加空选中判断，避免无意义的操作触发。

额外优化（可选） #

如果希望右键菜单仅在有选中行时显示删除选项，可以在rowContext里动态判断：

rowContext: function(e, row) {
  const selectedRows = table.getSelectedRows();
  const menuItems = {};
  // 只有选中行时才显示删除选项
  if (selectedRows.length > 0) {
    menuItems.deleteSelected = {
      label: "删除选中行",
      action: function() {
        table.deleteRow(selectedRows);
      }
    };
  }
  // 其他右键菜单选项...
  return { items: menuItems };
}

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