如何更改 Tabulator.js 中 header 复选框的行为?
How to change behaviour of header checkbox in Tabulator.js?
我希望点击顶部 header 复选框后的逻辑有所不同。目前(我正在使用自定义格式化程序)它 select 是所有第一级行。
我希望单击 select/deselect 所有非 parent 的行。或者至少不要 select parent 行。
在当前设置中 parent 行 tree toggle
单击然后删除selected。
自定义格式化程序看起来像那样。老实说,我不明白代码。我试图将 console.log 放入下面定义中的每个 addEventListener
但它没有被触发。
我想答案可能在 registerHeaderSelectCheckbox
中,但我不知道如何使用它。
正在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
选项用于 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
});
}
}
在这里工作example
tabulator
文档链接 - rowSelection and dataTree
注意: 有关 tabulator
行选择如何在内部工作的信息,请查看 here
我希望点击顶部 header 复选框后的逻辑有所不同。目前(我正在使用自定义格式化程序)它 select 是所有第一级行。
我希望单击 select/deselect 所有非 parent 的行。或者至少不要 select parent 行。
在当前设置中 parent 行 tree toggle
单击然后删除selected。
自定义格式化程序看起来像那样。老实说,我不明白代码。我试图将 console.log 放入下面定义中的每个 addEventListener
但它没有被触发。
我想答案可能在 registerHeaderSelectCheckbox
中,但我不知道如何使用它。
正在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
选项用于 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
});
}
}
在这里工作example
tabulator
文档链接 - rowSelection and dataTree
注意: 有关 tabulator
行选择如何在内部工作的信息,请查看 here