选择

Select 为 DataTable 添加了项目选择功能。项目可以是行、列或单元格,它们可以独立选择或一起选择。在交互式表格(用户可以在表格中执行一些操作,例如编辑行或标记要执行操作的行)中,项目选择尤其有用。

最终用户可以用四种不同的模式执行项目选择

  • 操作系统(os)样式 - 其中单击将只会选择一个项目,取消选择之前选择的任何其他项目;shift 单击将选择一系列项目;ctrl/cmd 单击将添加或移除选择中的项目。
  • 单项目选择(single) - 任何时候只能选择一个项目。任何之前选择的项目都将被取消选择。
  • 多项目选择(multi) - 通过单击切换项目选择。
  • 多项目范围选择(multi+shift) - os样式和multi之间的混合,允许轻松进行多行选择,而不必在单击某行时立即取消选择。

还可以通过 DataTables API 选择项目(rows().select()columns().select()cells().select())。API 集成还允许轻松获取选择项目 - 有关详细信息,请参阅API 集成文档

Select 还会触发一些事件,让您知道何时选择和取消选择项目,并为Buttons 扩展内置了按钮类型,允许非常容易地执行全选/不选和其他操作。有关详细信息,请参阅参考文档,有关 Select 操作示例,请参阅示例

下载

获取并使用 Select 最简单的方法是使用DataTables 下载构建器,您可以在其中选择您希望在页面上使用的软件,并生成并为您托管一个 JavaScript 和 CSS 文件。

或者,单独的文件可包含在您的页面中,下载的发布包在 GitHub 上克隆的源代码控制库

初始化

如果你在页面中包含 Select 扩展,它会通过 API 自动变为该页面上的每个 DataTable 都可用,无需再进行初始化。如果你希望为你的终端用户通过点击等操作来进行项目选择,select 选项可以设置为布尔型的 true

$('#myTable').DataTable( {
    select: true
} );

这会自动启用操作系统样式的行选择。使用 select 选项作为对象,可以启用其他样式和项目选择选项,包括选择表格中的哪些列会触发项目选择。有关可选项的详细信息,请参阅 参考文档

功能

Select 添加了以下功能

  • 在 DataTable 中选择行、列和单元格
  • 与 DataTables 的 API 紧密集成
  • Buttons 扩展 完全集成
  • 多种选择样式
  • 复选框列选择选项
  • 可完全翻译成国际语言
  • 与 Bootstrap、Foundation 和 DataTables 支持的其他样式库完全集成