在制表器中的行格式化程序上添加自定义单元格
在制表器中的行格式化程序上添加自定义单元格
提问于 2022-04-20 16:46:38
我目前正在玩制表器(特别是反应制表器)，以证明我的项目的概念。
我的要求之一是在数据树的各个部分之间设置按钮。
因此，在我的项目中，我有部门，每个部门都有员工(这就是为什么我使用数据树)，然后我希望有两个按钮(添加雇员，添加位置)，这些按钮将显示在每个部门的最后一行。
因此，我的当前计划是在最后一列上有一个键，并使用行格式化程序将其更改为我想要的按钮样式，然后它将被Click事件捕获
...{name: Mike Smith, position: dev},
{ name: "Add Position" }使用示例作为参考：http://tabulator.info/examples/5.1#row-formatter
rowFormatter = (row) => {
var element = row.getElement();
var data = row.getData();
if (data.name == "Add Position") {
var width = element.offsetWidth,
rowTable, cellContents, rowTableTransfer;
while (element.firstChild) element.removeChild(element.firstChild);
rowTable = document.createElement("div")
rowTable.id = "add_position"
rowTable.style.width = (width - 18) + "px";
rowTable.style.padding = "2vh";
rowTable.className = "tabulator-cell";
cellContents = "Add Position"
rowTable.innerHTML = cellContents;
rowTableTransfer = document.createElement("div")
rowTableTransfer.style.width = (width - 18) + "px";
rowTableTransfer.style.padding = "2vh";
var rowTabletrTransfer = document.createElement("div");
cellContents = "<a>Add Position</a>"
rowTabletrTransfer.innerHTML = cellContents;
rowTableTransfer.appendChild(rowTabletrTransfer);
element.append(rowTable);
element.append(rowTableTransfer);
}
};这几乎是最基本的，因为我最大的问题是，在我这样做之后，我得到了这个错误：
Uncaught TypeError: component.getComponent is not a function我试着准确地从一个单元格复制格式，但是仍然得到了那个错误。
我遗漏了什么？
回答 2
Stack Overflow用户
发布于 2022-04-21 07:10:27
您不应该使用行格式化程序添加自定义单元格，如果尝试这样做，很可能会破坏列的格式设置。
您应该添加一个带有自定义格式化程序的空列来实现这一点。
有关更多细节，请查看按钮列格式化程序文档和Formatters示例
Stack Overflow用户
发布于 2022-04-21 17:08:51
因此，我的主要问题是，CellClick事件不再在我新创建的元素上注册。因此，我发现最好的工作不是删除所有的单元格，而是使用前两个单元格(行的子单元格)并将修改后的元素添加到其中，然后删除其余的子单元格(这样就可以在不拉伸整个表的情况下扩展单元格的宽度)。
以下是我对概念代码的证明：
rowFormatter = (row) => {
var element = row.getElement();
var data = row.getData();
if (data.actions == "true") {
var rowTable, cellContents, rowTabletrTransfer;
for (let i = element.children.length - 1; i > 1; i--) {
element.removeChild(element.children[i]);
}
var cellAddPosition = element.children[0];
var cellTransferIn = element.children[1];
rowTable = document.createElement("div")
rowTable.id = "add_position"
rowTable.className = "headcount-action headcount-actions-table"
cellContents = "Add Position"
rowTable.innerHTML = cellContents;
rowTabletrTransfer = document.createElement("div");
rowTabletrTransfer.id = "transfer_in"
rowTabletrTransfer.className = "headcount-action headcount-actions-table"
cellContents = "Transfer In"
rowTabletrTransfer.innerHTML = cellContents;
cellAddPosition.style.minWidth = "25vh";
cellAddPosition.style.maxWidth = "25vh";
cellTransferIn.style.minWidth = "25vh";
cellTransferIn.style.maxWidth = "25vh";
cellAddPosition.append(rowTable);
cellTransferIn.append(rowTabletrTransfer);
}
};我创建了actions列，该列被隐藏以指示该行将用于Action按钮。
唯一糟糕的部分是，我依赖于单元格名称作为键，在哪个按钮上单击。有点费解，但这是我所得到的最好的工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71943399
复制相关文章
相似问题
腾讯云开发者
