时间戳

首页 > 解决方案 > 通过仅单击复选框而不是其他任何位置并在 jquery DataTable 中创建全选复选框来选择行

jquery - 通过仅单击复选框而不是其他任何位置并在 jquery DataTable 中创建全选复选框来选择行

问题描述

let dataSet = [
{"_id": {"$oid": "6040bfdc1659e2002d990005"},"name": "page2VIM","description":"VIM POLICY"},{"_id": {"$oid": "6040bfdc1659e2002d990005"},"name": "page1VIM","description":"VIM POLICY"},{"_id": {"$oid": "6040bfdc1659e2002d990005"},"name": "page3VIM","description":"VIM POLICY"}
];
$('#policyTable').DataTable({
        rowId: '_id.$oid',
        data:dataSet,
        order: [1, "asc"],
        columnDefs: [{
            targets: 0,
            orderable: false,
            searchable: false,
            className: 'select-checkbox',
            checkboxes: {
                selectRow: true,
            }
        }],
        select: {
            style: 'multi'
        },
        columns:[{
          defaultContent:""
        },
        {
            title: "Name",
            name: "name",
            data: 'name',
        },{
        title:"Description",
        name:"description",
        data:"description"
        }],
});
<!DOCTYPE html>
<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css" rel="stylesheet"/>
</head>

<body>
        <table id="policyTable" class="cell-border hover stripe" width="100%"></table>
        <hr>
</body>

</html>

我想在第一列的标题中插入一个全选复选框。我只想在单击复选框时选择行。现在我可以通过单击任意位置来选择一行。我怎样才能实现这两件事？

标签： jquerydatatables

解决方案

01 按第一个 TD 元素选择行：

您需要能够单击<td>每行的第一行才能选择所有内容。这可以通过使用轻松实现selector: 'td:first-child'（参见代码片段位置 01）

02：在标题元素中添加复选框

现在我们需要在第一个标题标题中添加一个复选框。我们可以为此使用 DatatablesTitle元素。（见片段位置 02）

03：制作一个监听全选复选框的功能

使用on.(click)我们相应地选择或取消选择所有复选框的功能。（见片段位置 03）

工作片段： 

let dataSet = [{
  "_id": {
    "$oid": "6040bfdc1659e2002d990005"
  },
  "name": "page2VIM",
  "description": "VIM POLICY"
}, {
  "_id": {
    "$oid": "6040bfdc1659e2002d990005"
  },
  "name": "page1VIM",
  "description": "VIM POLICY"
}, {
  "_id": {
    "$oid": "6040bfdc1659e2002d990005"
  },
  "name": "page3VIM",
  "description": "VIM POLICY"
}];

let example = $('#policyTable').DataTable({
  rowId: '_id.$oid',
  data: dataSet,
  order: [1, "asc"],
  columnDefs: [{
    orderable: false,
    className: 'select-checkbox',
    targets: 0,
  }],
  select: {
    style: 'multi',
    selector: 'td:first-child' // 01: ONLY CHECK ROW WHEN FIRST TD ROW IS CLICKED
  },

  columns: [{
      defaultContent: "",
      // 02: SETUP CHECKBOX IN THE HEADER
      sTitle: '<input class="select-checkbox" type="checkbox" id="selectAll"></input>'
    },
    {
      title: "Name",
      name: "name",
      data: 'name',
    }, {
      title: "Description",
      name: "description",
      data: "description"
    }
  ],
});

// 03: Add a select all handler
example.on("click", "th.select-checkbox", function() {
  if ($("th.select-checkbox").hasClass("selected")) {
    example.rows().deselect();
    $("th.select-checkbox").removeClass("selected");
  } else {
    example.rows().select();
    $("th.select-checkbox").addClass("selected");
  }
}).on("select deselect", function() {
  ("Some selection or deselection going on")
  if (example.rows({
      selected: true
    }).count() !== example.rows().count()) {
    $("th.select-checkbox").removeClass("selected");
  } else {
    $("th.select-checkbox").addClass("selected");
  }
});
<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>



<table id="policyTable" class="cell-border hover stripe" width="100%"></table>

推荐阅读