如何解决在 Tabulator.js 中使用 formatter:"rowSelection" 时,如何删除、隐藏一个复选框?
我正在使用
{formatter:"rowSelection",titleFormatter:"rowSelection",hozAlign:"center",headerSort:false,cellClick:function(e,cell){
table.recalc();
}},
但我不希望显示标记的复选框(见图片)。您可以使用 jsFiddle 试用。
可以使用制表符功能吗?如果没有,那么我想我可以在 renderComplete
函数中将它从 DOM 中删除。
更新1 实际上,我不想要“父”级别的所有复选框。
解决方法
您可以为其创建自定义 formatter
这里我创建了自定义 DOM
元素,并且只有在满足某些条件时才从格式化程序函数返回,否则返回 null
导致它呈现空单元格。
Tabulator
使用 selectRow
模块进行选择
在自定义格式化程序中,我检查了用户是否启用了 selectable
选项,如果是,则它将启用 selectRow
模块,然后测试其行或表格是否为行,然后复选框将选择/取消选择行我在 tabulator
中注册以让它知道使用此复选框组件,如果它不是一行,那么它将是我将复选框注册到选择/取消选择整个表格的标题选择的表格。
var do_not_show_checkbox_ids = [1];
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,]
},{
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
},{
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: "rowSelection",hozAlign: "center",cellClick: function(e,cell) {
this.recalc();
}
},{
title: "mn",field: "mn",editor: "number",cellEdited: function(cell) {
updateSum(cell);
}
},{
title: "Sum",field: "sum",headerSort: false
}
],rowClick: function(e,row) {
// console.log(table.getRows().length);
},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"));
});
},selectableCheck: function(row) {
//row - row component
return row.getData().cena > 0; //allow selection of rows where the age is greater than 18
},});
function updateSum(cell) {
var cena = cell.getData().cena; //price
var mnozstvi = cell.getValue(); //amount
if (mnozstvi) {
cell.getRow().update({
sum: cena * mnozstvi
});
}
}
在这里工作example
制表器文档链接 - custom formatter
注意:有关 tabulator
格式化程序如何在内部工作的信息,请查看 here
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。