介绍
datatables.net-select 是一个 Datatable 中的插件,它为Datatable提供了一种简单的方式来增强表单选择器的交互性。选择器可以是单选按钮,多选复选框等。
在本篇文章中,我们将学习如何使用 datatables.net-select 引入和使用。
安装
npm 安装
可以使用 npm 来安装 datatables.net-select:
--- ------- --------------------- ------
引入样式与 JS
使用 datatables.net-select 之前,你需要引入 Datatable 的样式和 JavaScript 文件,以及 datatables.net-select 的样式和 JavaScript 文件。
----- ---------------- --------------- ------------------------------------------------------------------------------- ----- ---------------- --------------- ------------------------------------------------------------------------------ ------- ---------------------- ------------------------------------------------------------------------------------- ------- ---------------------- -----------------------------------------------------------------------------------
基本的使用
初始化 Datatable
首先,我们需要初始化 Datatable,以便在表格中使用 datatables.net-select 插件。
---------------------------- - -------------------------- - --
在 HTML 中,你需要一个包含数据和表头的 <table>
元素:
------ ------------ --------------- ------------------- ------- ---- ------------- ----------------- --------------- ----- -------- ------- ---- --------- ---------- ---------- -------------- ----------------- ----- ---- -------- -------- ------------------ ----------------- ----- ---- --- --- -------- --------
现在,Datatable 已经初始化好了。
启用 datables.net-select 插件
要使 datatables.net-select 插件生效,你需要将 select
选项设置为 true
:
---------------------------- - ------------------------- ------- ---- --- ---
现在,你可以看到 Datatable 表格中的每行都有一个圆形的单选按钮。
默认情况下,datatables.net-select 表格行上使用的是单选按钮。你可以使用 multiple
选项启用多选并将行选择更改为复选框:
---------------------------- - ------------------------- ------- - ------ ------- - --- ---
现在,Datatable 表格中的每行都有一个复选框。
事件
你可以使用 datatables.net-select 来捕获事件。以下是一些事件示例:
select
每当一个或多个行被选中时触发的事件:
---------------------------- - ------------------------- ------- - ------ ------- - --- -------------------------- ----------- ---------- ------------ --- ---
deselect
每当一个或多个行被取消选择时触发的事件:
---------------------------- - ------------------------- ------- - ------ ------- - --- ---------------------------- ----------- ---------- -------------- --- ---
select.dt.deselect
每当在行之间进行选择时触发的事件:
---------------------------- - ------------------------- ------- - ------ ------- - --- -------------------------------------- ----------- ---------- -------- -- -------------- --- ---
API
以下是 datatables.net-select 插件的一些可以使用的函数:
row().select()
选中单行。
---------------------------- - --- ----- - -------------------------- ---------------------- ---
row().deselect()
取消选中单行。
---------------------------- - --- ----- - -------------------------- ------------------------ ---
rows().select()
选中多行。
---------------------------- - --- ----- - -------------------------- ----------------------------- ---
rows().deselect()
取消选中多行。
---------------------------- - --- ----- - -------------------------- ------------------------------- ---
结论
在这篇文章中,我们学习了如何使用 npm 包 datatables.net-select来增强表单选择器的交互性。我们学习了如何将 Datatable 初始化,并启用 datatables.net-select插件。我们还了解了可以捕获的一些事件以及可用的 API 函数。
如果你需要使用 Datatable,并且希望增强表单选择器的交互性,则 datatables.net-select 是一个不错的选择。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/datatables.net-select