问题描述
我希望单击顶部标题复选框后的逻辑有所不同.目前(我正在使用自定义格式化程序)它选择所有第一级行.
I want the logic after the top header checkbox is clicked to be different. 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.
在当前设置的父行tree toggle点击，然后取消选择.
In current set up parent row tree toggle on click and then is deselected.
自定义格式化程序看起来像那样.老实说，我不明白代码.我试图将 console.log 放在下面定义中的每个 addEventListener 中，但它没有被触发.
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.
我想答案可能在 registerHeaderSelectCheckbox 中，但我不知道如何使用它.
I guess the answer might be in registerHeaderSelectCheckbox but I have no idea how to use it.
正在使用 jsFiddle 进行尝试.
Working jsFiddle for trying out.
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 选项用于标题行复选框，formatter 选项用于行复选框
titleFormatter option is for header row checkbox and formatter option is for rows checkbox
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
});
}
}
在这里工作 example
tabulator 文档链接 - rowSelection 和 dataTree
tabulator documentation links - rowSelection and dataTree
注意:有关 tabulator 行选择如何在内部工作的信息，请查看 这里
Note: For info about how tabulator row selection works internally check here
这篇关于如何更改 Tabulator.js 中标题复选框的行为?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！