[英]How to change behaviour of header checkbox in Tabulator.js?
I want the logic after the top header checkbox is clicked to be different.我希望点击顶部 header 复选框后的逻辑有所不同。 Currently (I am using custom formatter) it selects all first level rows.
目前(我正在使用自定义格式化程序)它选择所有第一级行。
I want the click to select/deselect all rows that are NOT a parent.我希望单击以选择/取消选择所有非父行。 Or at least not to select the parent rows.
或者至少不要 select 父行。
In current set up parent row tree toggle
on click and then is deselected.在当前设置的父行
tree toggle
,然后取消选择。
custom formatter looks like that.自定义格式化程序看起来像这样。 To be honest I do not understand the code.
老实说,我看不懂代码。 I tried to put console.log to every
addEventListener
in below definition but it was not triggered.我试图将 console.log 放到下面定义中的每个
addEventListener
中,但它没有被触发。
I guess the answer might be in registerHeaderSelectCheckbox
but I have no idea how to use it.我猜答案可能在
registerHeaderSelectCheckbox
中,但我不知道如何使用它。
Working jsFiddle for trying out.使用 jsFiddle进行尝试。
formatter: function(cell, formatterParams, onRendered) {
const data = cell.getRow().getData();
if (do_not_show_checkbox_ids.indexOf(data['id']) == -1) {
var checkbox = document.createElement("input");
checkbox.type = 'checkbox';
if (this.table.modExists("selectRow", true)) {
checkbox.addEventListener("click", (e) => {
e.stopPropagation();
});
if (typeof cell.getRow == 'function') {
var row = cell.getRow();
if (row._getSelf().type == "row") {
checkbox.addEventListener("change", (e) => {
row.toggleSelect();
});
checkbox.checked = row.isSelected && row.isSelected();
this.table.modules.selectRow.registerRowSelectCheckbox(row, checkbox);
} else {
checkbox = "";
}
} else {
checkbox.addEventListener("change", (e) => {
if (this.table.modules.selectRow.selectedRows.length) {
this.table.deselectRow();
} else {
this.table.selectRow(formatterParams.rowRange);
}
});
this.table.modules.selectRow.registerHeaderSelectCheckbox(checkbox);
}
}
return checkbox;
}
return null;
},
titleFormatter
option is for header row checkbox and formatter
option is for rows checkbox titleFormatter
选项用于 header 行复选框, formatter
选项用于行复选框
var do_not_show_checkbox_ids = [1];
function customFormatter(isHeader = false) {
return function(cell, formatterParams, onRendered) {
var checkbox = null;
// check if selectable is true in options
if (this.table.modExists("selectRow", true)) {
checkbox = document.createElement("input");
checkbox.type = 'checkbox';
// add click event in checkbox
checkbox.addEventListener("click", (e) => {
console.log('header', isHeader);
e.stopPropagation();
});
// check if cell has getRow function if yes then it may be row
if (typeof cell.getRow == 'function') {
// get cell row
var row = cell.getRow();
// get cell data for condition testing
const data = cell.getData();
// if is row and not skippable id
if (row._getSelf().type == "row" && do_not_show_checkbox_ids.indexOf(data['id']) == -1) {
// add change event to toggle cell row
checkbox.addEventListener("change", (e) => {
row.toggleSelect();
});
// update checkbox after row toggle
checkbox.checked = row.isSelected && row.isSelected();
// registering for if row clicked from anywhere then checkbox check/uncheck
this.table.modules.selectRow.registerRowSelectCheckbox(row, checkbox);
} else {
// if is row and skippable id
checkbox = "";
}
} else {
// header checkbox then add change addEventListener for selecting/deselecting all rows.
checkbox.addEventListener("change", (e) => {
// get all rows
this.table.getRows().forEach(row => {
// get row nodes/children
row.getTreeChildren().forEach(child => {
// check if child selected if yes then deselect else select
child.isSelected() ? child.deselect() : child.select();
})
});
// for selecting/deselecting all rows
// if (this.table.modules.selectRow.selectedRows.length) {
// console.log('header', isHeader);
// this.table.deselectRow();
// } else {
// this.table.selectRow(formatterParams.rowRange);
// }
});
// updating internal header checkbox
this.table.modules.selectRow.registerHeaderSelectCheckbox(checkbox);
}
return checkbox;
}
return null;
};
}
var tableDataNested = [{
id: 1,
name: "BalanceOil",
_children: [{
id: 11,
name: "BalanceOil+",
cena: 31,
mn: 1,
cena_1: 159
},
{
id: 12,
name: "BalanceOil Aqua",
cena: 41,
mn: 1,
cena_1: 159
},
]
},
{
id: 2,
name: "Xtend",
cena: 23,
mn: 1
},
{
id: 2,
name: "Xtend",
cena: 23,
mn: 1
},
{
id: 2,
name: "Xtend",
cena: 23,
mn: 1
},
{
id: 3,
name: "Zinobiotic",
cena: 24,
mn: 1
}
];
var table = new Tabulator("#example-table", {
movableColumns: true,
data: tableDataNested,
dataTree: true,
selectable: true,
columns: [{
title: "Name",
field: "name",
headerSort: false,
width: 200
},
{
title: "Cena",
field: "cena",
headerSort: false
},
{
titleFormatter: customFormatter(true),
formatter: customFormatter(),
hozAlign: "center",
headerSort: false,
cellClick: function(e, cell) {
console.log('header', e, cell)
this.recalc();
}
},
{
title: "mn",
field: "mn",
editor: "number",
headerSort: false,
cellEdited: function(cell) {
updateSum(cell);
}
},
{
title: "Sum",
field: "sum",
headerSort: false
}
],
rowClick: function(e, row) {
// console.log(table.getRows().length);
},
rowSelectionChanged: function(data, rows) {
// console.log(data, rows);
// console.log(this.getData());
},
renderComplete: function(t) {
this.getRows().forEach(function(value, index) {
// console.log(value.isSelected());
var children = value.getTreeChildren();
for (let j = 0; j < children.length; j++) {
const name = children[j].getData().name;
}
children.forEach(function(value, index) {
// console.log("cena");
var cena = value.getData().cena; //price
// console.log(cena);
var mnozstvi = value.getData().mn; //amount
value.update({
sum: cena * mnozstvi
});
});
updateSum(value.getCell("mn"));
});
},
rowClick: function(e, row) {
if (row.getTreeChildren().length > 0) {
table.deselectRow(row.getData().id);
row.treeToggle();
}
},
});
function updateSum(cell) {
var cena = cell.getData().cena; //price
var mnozstvi = cell.getValue(); //amount
if (mnozstvi) {
cell.getRow().update({
sum: cena * mnozstvi
});
}
}
tabulator
documentation links - rowSelection and dataTree tabulator
文档链接 - rowSelection和dataTree
Note: For info about how tabulator
row selection works internally check here注意:有关
tabulator
行选择如何在内部工作的信息,请查看此处
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.