npm包 datatables.net-select使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

datatables.net-select 是一个 Datatable 中的插件，它为Datatable提供了一种简单的方式来增强表单选择器的交互性。选择器可以是单选按钮，多选复选框等。

在本篇文章中，我们将学习如何使用 datatables.net-select 引入和使用。

安装

npm 安装

可以使用 npm 来安装 datatables.net-select：

npm install datatables.net-select --save

引入样式与 JS

使用 datatables.net-select 之前，你需要引入 Datatable 的样式和 JavaScript 文件，以及 datatables.net-select 的样式和 JavaScript 文件。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.6/css/select.dataTables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.6/js/dataTables.select.min.js"></script>

基本的使用

初始化 Datatable

首先，我们需要初始化 Datatable，以便在表格中使用 datatables.net-select 插件。

$(document).ready(function() {
    $('#example').DataTable();
} );

在 HTML 中，你需要一个包含数据和表头的 <table> 元素：

-- -------------------- ---- -------
------ ------------ --------------- -------------------
    -------
        ----
            -------------
            -----------------
            ---------------
        -----
    --------
    -------
        ----
            --------- ----------
            ---------- --------------
            -----------------
        -----
        ----
            -------- --------
            ------------------
            -----------------
        -----
        ---- --- ---
    --------
--------

现在，Datatable 已经初始化好了。

启用 datables.net-select 插件

要使 datatables.net-select 插件生效，你需要将 select 选项设置为 true：

$(document).ready(function() {
    $('#example').DataTable({
        select: true
    });
});

现在，你可以看到 Datatable 表格中的每行都有一个圆形的单选按钮。

默认情况下，datatables.net-select 表格行上使用的是单选按钮。你可以使用 multiple 选项启用多选并将行选择更改为复选框：

$(document).ready(function() {
    $('#example').DataTable({
        select: {
            style: 'multi'
        }
    });
});

现在，Datatable 表格中的每行都有一个复选框。

事件

你可以使用 datatables.net-select 来捕获事件。以下是一些事件示例：

select

每当一个或多个行被选中时触发的事件：

-- -------------------- ---- -------
---------------------------- -
    -------------------------
        ------- -
            ------ -------
        -
    ---

    -------------------------- -----------
        ---------- ------------
    ---
---

deselect

每当一个或多个行被取消选择时触发的事件：

-- -------------------- ---- -------
---------------------------- -
    -------------------------
        ------- -
            ------ -------
        -
    ---

    ---------------------------- -----------
        ---------- --------------
    ---
---

select.dt.deselect

每当在行之间进行选择时触发的事件：

-- -------------------- ---- -------
---------------------------- -
    -------------------------
        ------- -
            ------ -------
        -
    ---

    -------------------------------------- -----------
        ---------- -------- -- --------------
    ---
---

API

以下是 datatables.net-select 插件的一些可以使用的函数：

row().select()

选中单行。

$(document).ready(function() {
   var table = $('#example').DataTable();

   table.row(0).select();
});

row().deselect()

取消选中单行。

$(document).ready(function() {
   var table = $('#example').DataTable();

   table.row(0).deselect();
});

rows().select()

选中多行。

$(document).ready(function() {
   var table = $('#example').DataTable();

   table.rows([0,1,2]).select();
});

rows().deselect()

取消选中多行。

$(document).ready(function() {
   var table = $('#example').DataTable();

   table.rows([0,1,2]).deselect();
});

结论

在这篇文章中，我们学习了如何使用 npm 包 datatables.net-select来增强表单选择器的交互性。我们学习了如何将 Datatable 初始化，并启用 datatables.net-select插件。我们还了解了可以捕获的一些事件以及可用的 API 函数。

如果你需要使用 Datatable，并且希望增强表单选择器的交互性，则 datatables.net-select 是一个不错的选择。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/datatables.net-select