javascript - 在 Tabulator.js 中使用 formatter:"rowSelection" 时如何删除、隐藏一个复选框?
问题描述
我在用
{formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", headerSort:false, cellClick:function(e, cell){
table.recalc();
}},
但我不希望显示标记的复选框(见图)。您可以使用jsFiddle进行尝试。
这可能使用制表功能吗?如果不是,那么我想我可以在renderComplete
函数中将它从 DOM 中删除。
UPDATE1 实际上我不想要“父”级别的所有复选框。
解决方案
您可以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,
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
},
{
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",
headerSort: false,
cellClick: function(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);
},
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
});
}
}
这里的工作示例
制表符文档链接 -自定义格式化程序
注意:有关tabulator
格式化程序如何在内部工作的信息,请查看此处
推荐阅读
- loops - Go 模板中的嵌套循环
- testing - 下载文件在 Cypress 中挂起
- java - 节俭的通信错误不会被 promise reject 或 cath 捕获
- regex - 正则表达式字符串不以正斜杠开始或结束(或两者)
- python - 通过 Looping Python 提取子页面链接
- python - 无法在 Windows 10 上通过“pip”安装任何包,Python 中的 ssl 模块不可用
- c++ - 事件系统:回调或事件队列
- javascript - styles.xml 破坏受密码保护的 XSSFWorkbook (Apache POI v3.16) 保存过程
- apache-kafka - 无法写入卡夫卡,经纪人倒闭
- flutter - Flutter 应用程序的推荐设计模式是什么?