选择
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 支持的其他样式库完全集成