我正在使用Tabulator.js v4.2.7，并且具有一个复选框列来选择行。该列标题具有一个复选框，用于选择/取消选择所有行。
这很好。但是在单击标题复选框后，所有行都将被选中，如果我取消选中任何行复选框，那么标题复选框也不会被取消选中。
例如，如果我有5行，并且单击“标题”复选框，则将选择所有5行，现在，如果我取消选中“第二行”复选框，则仍将选择其余4行，并且需要取消选中“标题”复选框。但是标题复选框不会被取消选中。
这是我的复选框列代码：
{
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();
}
}
}
请协助我做错事情。
谢谢
阿卜杜勒
答案 0 :(得分：1)
经过几个小时的分析，我发现我错了。我通过为标题点击列中的所有单元格设置cell.getData().IsSelected来解决，还添加了根据计数取消选中单元格点击中标题复选框的逻辑。我也用香草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>