tabulator.js 中的复选框列选择问题

Question

我正在使用 Tabulator.js v4.2.7，我有一个 select 行的复选框列。此列 header 有一个 select/deselect 所有行的复选框。

这工作正常。但是在单击 header 复选框后，所有行都将被 selected，如果我取消选中任何行复选框，则 header 复选框不会被取消选中。

例如，如果我有 5 行，如果我单击 header 复选框，则所有 5 行都将被 select 编辑，现在如果我取消选中第二行复选框，剩下的 4 行仍将 [=需要取消选中 34=]ed 和 header 复选框。但是 header 复选框没有被取消选中。

这是我的复选框列代码：

{
    title: 'Select <br/> All <br/> <input type="checkbox" class="select-all-row" aria-label="select all rows" />',
    field: 'IsSelected',
    formatter: function(cell, formatterParams, onRendered) {
        return '<input type="checkbox" class="select-row" aria-label="select this row" />';
    },
    width: 50,
    headerSort: false,
    headerFilter: false,
    cssClass: 'text-center',
    frozen: true,
    tooltips: false,
    resizable: false,
    cellClick: function(e, cell) {
        var $element = $(cell.getElement());
        var $chkbox = $element.find('.select-row');
        if (cell.getData().IsSelected) {
            cell.getRow().deselect();
        } else {
            cell.getRow().select();
        }
        $chkbox.prop('checked', !cell.getData().IsSelected);
        cell.getData().IsSelected = !cell.getData().IsSelected;
    },
    headerClick: function(e, column) {
        if (column.getTable().getSelectedRows().length !== column.getTable().getDataCount()) {
            $('.select-row,.select-all-row').prop('checked', true);
            column.getTable().selectRow();
        } else {
            $('.select-row,.select-all-row').prop('checked', false);
            column.getTable().deselectRow();
        }
    }
}

请指出我做错的地方。

谢谢，

阿卜杜勒

Answer 1

经过几个小时的分析，我发现我哪里错了。我通过在 header 单击时为列中的所有单元格设置 cell.getData().IsSelected 来解决，并且还添加了逻辑以根据计数取消选中单元格单击中的 header 复选框。我也用香草 javascript 替换了 Jquery 代码这是答案：

这是工作片段

var tabledata = [{
    id: 1,
    name: "Oli Bob",
    progress: 12,
    location: "United Kingdom",
    gender: "male",
    rating: 1,
    col: "red",
    dob: "14/04/1984",
    car: 1,
    lucky_no: 5,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 2,
    name: "Mary May",
    progress: 1,
    location: "Germany",
    gender: "female",
    rating: 2,
    col: "blue",
    dob: "14/05/1982",
    car: true,
    lucky_no: 10,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 3,
    name: "Christine Lobowski",
    progress: 42,
    location: "France",
    gender: "female",
    rating: 0,
    col: "green",
    dob: "22/05/1982",
    car: "true",
    lucky_no: 12,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 4,
    name: "Brendon Philips",
    progress: 100,
    location: "USA",
    gender: "male",
    rating: 1,
    col: "orange",
    dob: "01/08/1980",
    car: false,
    lucky_no: 18,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 5,
    name: "Margret Marmajuke",
    progress: 16,
    location: "Canada",
    gender: "female",
    rating: 5,
    col: "yellow",
    dob: "31/01/1999",
    car: false,
    lucky_no: 33,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 6,
    name: "Frank Harbours",
    progress: 38,
    location: "Russia",
    gender: "male",
    rating: 4,
    col: "red",
    dob: "12/05/1966",
    car: 1,
    lucky_no: 2,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 7,
    name: "Jamie Newhart",
    progress: 23,
    location: "India",
    gender: "male",
    rating: 3,
    col: "green",
    dob: "14/05/1985",
    car: true,
    lucky_no: 63,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 8,
    name: "Gemma Jane",
    progress: 60,
    location: "China",
    gender: "female",
    rating: 0,
    col: "red",
    dob: "22/05/1982",
    car: "true",
    lucky_no: 72,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 9,
    name: "Emily Sykes",
    progress: 42,
    location: "South Korea",
    gender: "female",
    rating: 1,
    col: "maroon",
    dob: "11/11/1970",
    car: false,
    lucky_no: 44,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 10,
    name: "James Newman",
    progress: 73,
    location: "Japan",
    gender: "male",
    rating: 5,
    col: "red",
    dob: "22/03/1998",
    car: false,
    lucky_no: 9,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 11,
    name: "Oli Bob",
    progress: 12,
    location: "United Kingdom",
    gender: "male",
    rating: 1,
    col: "red",
    dob: "14/04/1984",
    car: 1,
    lucky_no: 5,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 12,
    name: "Mary May",
    progress: 1,
    location: "Germany",
    gender: "female",
    rating: 2,
    col: "blue",
    dob: "14/05/1982",
    car: true,
    lucky_no: 10,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 13,
    name: "Christine Lobowski",
    progress: 42,
    location: "France",
    gender: "female",
    rating: 0,
    col: "green",
    dob: "22/05/1982",
    car: "true",
    lucky_no: 12,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 14,
    name: "Brendon Philips",
    progress: 100,
    location: "USA",
    gender: "male",
    rating: 1,
    col: "orange",
    dob: "01/08/1980",
    car: false,
    lucky_no: 18,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 15,
    name: "Margret Marmajuke",
    progress: 16,
    location: "Canada",
    gender: "female",
    rating: 5,
    col: "yellow",
    dob: "31/01/1999",
    car: false,
    lucky_no: 33,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 16,
    name: "Frank Harbours",
    progress: 38,
    location: "Russia",
    gender: "male",
    rating: 4,
    col: "red",
    dob: "12/05/1966",
    car: 1,
    lucky_no: 2,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 17,
    name: "Jamie Newhart",
    progress: 23,
    location: "India",
    gender: "male",
    rating: 3,
    col: "green",
    dob: "14/05/1985",
    car: true,
    lucky_no: 63,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 18,
    name: "Gemma Jane",
    progress: 60,
    location: "China",
    gender: "female",
    rating: 0,
    col: "red",
    dob: "22/05/1982",
    car: "true",
    lucky_no: 72,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 19,
    name: "Emily Sykes",
    progress: 42,
    location: "South Korea",
    gender: "female",
    rating: 1,
    col: "maroon",
    dob: "11/11/1970",
    car: false,
    lucky_no: 44,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 20,
    name: "James Newman",
    progress: 73,
    location: "Japan",
    gender: "male",
    rating: 5,
    col: "red",
    dob: "22/03/1998",
    car: false,
    lucky_no: 9,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 21,
    name: "Oli Bob",
    progress: 12,
    location: "United Kingdom",
    gender: "male",
    rating: 1,
    col: "red",
    dob: "14/04/1984",
    car: 1,
    lucky_no: 5,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 22,
    name: "Mary May",
    progress: 1,
    location: "Germany",
    gender: "female",
    rating: 2,
    col: "blue",
    dob: "14/05/1982",
    car: true,
    lucky_no: 10,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 23,
    name: "Christine Lobowski",
    progress: 42,
    location: "France",
    gender: "female",
    rating: 0,
    col: "green",
    dob: "22/05/1982",
    car: "true",
    lucky_no: 12,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 24,
    name: "Brendon Philips",
    progress: 100,
    location: "USA",
    gender: "male",
    rating: 1,
    col: "orange",
    dob: "01/08/1980",
    car: false,
    lucky_no: 18,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 25,
    name: "Margret Marmajuke",
    progress: 16,
    location: "Canada",
    gender: "female",
    rating: 5,
    col: "yellow",
    dob: "31/01/1999",
    car: false,
    lucky_no: 33,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 26,
    name: "Frank Harbours",
    progress: 38,
    location: "Russia",
    gender: "male",
    rating: 4,
    col: "red",
    dob: "12/05/1966",
    car: 1,
    lucky_no: 2,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 27,
    name: "Jamie Newhart",
    progress: 23,
    location: "India",
    gender: "male",
    rating: 3,
    col: "green",
    dob: "14/05/1985",
    car: true,
    lucky_no: 63,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 28,
    name: "Gemma Jane",
    progress: 60,
    location: "China",
    gender: "female",
    rating: 0,
    col: "red",
    dob: "22/05/1982",
    car: "true",
    lucky_no: 72,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 29,
    name: "Emily Sykes",
    progress: 42,
    location: "South Korea",
    gender: "female",
    rating: 1,
    col: "maroon",
    dob: "11/11/1970",
    car: false,
    lucky_no: 44,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 30,
    name: "James Newman",
    progress: 73,
    location: "Japan",
    gender: "male",
    rating: 5,
    col: "red",
    dob: "22/03/1998",
    car: false,
    lucky_no: 9,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 31,
    name: "Oli Bob",
    progress: 12,
    location: "United Kingdom",
    gender: "male",
    rating: 1,
    col: "red",
    dob: "14/04/1984",
    car: 1,
    lucky_no: 5,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 32,
    name: "Mary May",
    progress: 1,
    location: "Germany",
    gender: "female",
    rating: 2,
    col: "blue",
    dob: "14/05/1982",
    car: true,
    lucky_no: 10,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 33,
    name: "Christine Lobowski",
    progress: 42,
    location: "France",
    gender: "female",
    rating: 0,
    col: "green",
    dob: "22/05/1982",
    car: "true",
    lucky_no: 12,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 34,
    name: "Brendon Philips",
    progress: 100,
    location: "USA",
    gender: "male",
    rating: 1,
    col: "orange",
    dob: "01/08/1980",
    car: false,
    lucky_no: 18,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 35,
    name: "Margret Marmajuke",
    progress: 16,
    location: "Canada",
    gender: "female",
    rating: 5,
    col: "yellow",
    dob: "31/01/1999",
    car: false,
    lucky_no: 33,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 36,
    name: "Frank Harbours",
    progress: 38,
    location: "Russia",
    gender: "male",
    rating: 4,
    col: "red",
    dob: "12/05/1966",
    car: 1,
    lucky_no: 2,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 37,
    name: "Jamie Newhart",
    progress: 23,
    location: "India",
    gender: "male",
    rating: 3,
    col: "green",
    dob: "14/05/1985",
    car: true,
    lucky_no: 63,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 38,
    name: "Gemma Jane",
    progress: 60,
    location: "China",
    gender: "female",
    rating: 0,
    col: "red",
    dob: "22/05/1982",
    car: "true",
    lucky_no: 72,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 39,
    name: "Emily Sykes",
    progress: 42,
    location: "South Korea",
    gender: "female",
    rating: 1,
    col: "maroon",
    dob: "11/11/1970",
    car: false,
    lucky_no: 44,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 40,
    name: "James Newman",
    progress: 73,
    location: "Japan",
    gender: "male",
    rating: 5,
    col: "red",
    dob: "22/03/1998",
    car: false,
    lucky_no: 9,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 41,
    name: "Oli Bob",
    progress: 12,
    location: "United Kingdom",
    gender: "male",
    rating: 1,
    col: "red",
    dob: "14/04/1984",
    car: 1,
    lucky_no: 5,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 42,
    name: "Mary May",
    progress: 1,
    location: "Germany",
    gender: "female",
    rating: 2,
    col: "blue",
    dob: "14/05/1982",
    car: true,
    lucky_no: 10,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 43,
    name: "Christine Lobowski",
    progress: 42,
    location: "France",
    gender: "female",
    rating: 0,
    col: "green",
    dob: "22/05/1982",
    car: "true",
    lucky_no: 12,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 44,
    name: "Brendon Philips",
    progress: 100,
    location: "USA",
    gender: "male",
    rating: 1,
    col: "orange",
    dob: "01/08/1980",
    car: false,
    lucky_no: 18,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 45,
    name: "Margret Marmajuke",
    progress: 16,
    location: "Canada",
    gender: "female",
    rating: 5,
    col: "yellow",
    dob: "31/01/1999",
    car: false,
    lucky_no: 33,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 46,
    name: "Frank Harbours",
    progress: 38,
    location: "Russia",
    gender: "male",
    rating: 4,
    col: "red",
    dob: "12/05/1966",
    car: 1,
    lucky_no: 2,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 47,
    name: "Jamie Newhart",
    progress: 23,
    location: "India",
    gender: "male",
    rating: 3,
    col: "green",
    dob: "14/05/1985",
    car: true,
    lucky_no: 63,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 48,
    name: "Gemma Jane",
    progress: 60,
    location: "China",
    gender: "female",
    rating: 0,
    col: "red",
    dob: "22/05/1982",
    car: "true",
    lucky_no: 72,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 49,
    name: "Emily Sykes",
    progress: 42,
    location: "South Korea",
    gender: "female",
    rating: 1,
    col: "maroon",
    dob: "11/11/1970",
    car: false,
    lucky_no: 44,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
  {
    id: 50,
    name: "James Newman",
    progress: 73,
    location: "Japan",
    gender: "male",
    rating: 5,
    col: "red",
    dob: "22/03/1998",
    car: false,
    lucky_no: 9,
    lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing "
  },
];

var table = new Tabulator("#example-table", {
  data: tabledata,
  columns: [{
      title: 'Select <br/> All <br/> <input type="checkbox" class="select-all-row" aria-label="select all rows" />',
      field: 'IsSelected',
      formatter: function(cell, formatterParams, onRendered) {
        return '<input type="checkbox" class="select-row" aria-label="select this row" />';
      },
      width: 50,
      headerSort: false,
      headerFilter: false,
      cssClass: 'text-center',
      frozen: true,
      tooltips: false,
      resizable: false,
      cellClick: function(e, cell) {
        var element = cell.getElement();
        var chkbox = element.querySelector('.select-row');
        if (cell.getData().IsSelected) {
          cell.getRow().deselect();
          document.querySelector('.select-all-row').checked = false;
        } else {
          cell.getRow().select();
          if (cell.getColumn().getTable().getSelectedRows().length === cell.getColumn().getTable().getDataCount()) {
            document.querySelector('.select-all-row').checked = true;
          }
        }
        chkbox.checked = !cell.getData().IsSelected;
        cell.getData().IsSelected = !cell.getData().IsSelected;
      },
      headerClick: function(e, column) {
        if (column.getTable().getSelectedRows().length !== column.getTable().getDataCount()) {
          document.querySelectorAll('.select-row,.select-all-row').forEach(cb => cb.checked = true);
          column.getTable().selectRow();
        } else {
          document.querySelectorAll('.select-row,.select-all-row').forEach(cb => cb.checked = false);
          column.getTable().deselectRow();
        }
        column.getCells().forEach(cell => cell.getData().IsSelected = !cell.getData().IsSelected);
      }
    },
    {
      title: "Name",
      field: "name",
      width: 200
    },
    {
      title: "Progress",
      field: "progress",
      width: 100,
      align: "right",
      sorter: "number"
    },
    {
      title: "Gender",
      field: "gender",
      width: 100
    },
    {
      title: "Rating",
      field: "rating",
      align: "center",
      width: 80
    },
  ],
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/js/tabulator.min.js"></script>
<div id="example-table"></div>

tabulator.js 中的复选框列选择问题

checkbox column selection issue in tabulator.js

javascript

checkbox

tabulator