[英]Tabulator.js: cellClick callback is not fired when clicking a checkbox
I need to recalculate the table by calling recal
after a row was selected by check box.在复选框选中一行后,我需要通过调用
recal
来重新计算表格。 If it is selected by clicking the row calling recal
works.如果通过单击调用
recal
的行来选择它。 I copied the below code from plugin site我从插件站点复制了以下代码
{formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", headerSort:false, cellClick:function(e, cell){
console.log("table ",table);
// cell.getRow().toggleSelect();
console.log("table ",table);
table.recalc();
}},
but nothing gets executed.但没有任何东西被执行。 The checkbox gets checked and the row highlighted.
该复选框被选中并突出显示该行。 You can try my jsFiddle.
你可以试试我的jsFiddle。
UPDATE 1 so it works if I click off the checkbox but I want the function to be triggered when the checkbox is clicked.更新 1 ,因此如果我单击复选框,它会起作用,但我希望在单击复选框时触发 function。
As the name suggest cellClick
which should be called on cell element click there is another element which is considered cell and checkbox is contained inside cell that's why cellClick
is not trigger when you click checkbox and triggered when click outside of checkbox顾名思义,应该在单元格元素单击时调用
cellClick
,还有另一个元素被认为是单元格,并且复选框包含在单元格内,这就是为什么当您单击复选框时不会触发cellClick
并在单击复选框外部时触发的原因
Issue问题
As Suggested by @EugeneOlisevich instead of listening to cellClick
, Listening to rowSelectionChanged
would be better option.正如@EugeneOlisevich 所建议的,而不是听
cellClick
,听rowSelectionChanged
会是更好的选择。
Instead of using table
to call recalc
as table
reference is not created until first load completes.在第一次加载完成之前,不会创建
table
引用,而不是使用table
调用recalc
。
Another way you can access recalc
function is through this
您可以访问
recalc
function 的另一种方法是通过this
...
rowSelectionChanged: function(e, row) {
this.recalc();
},
...
event
bubbling to parent through cellClick
function.cellClick
function 将event
冒泡到父级来解决。...
{
title: "mn",
field: "mn",
editor: "number",
cellEdited: function(cell) {
aktualizuj_m(cell);
},
cellClick: function(e, cell) {
e.preventDefault();
e.stopPropagation();
},
},
...
table
reference is not created on first load here i added condition to not run loop until table
reference is undefined
/ null
table
引用,因此我添加了条件以在undefined
table
引用之前不运行循环 / null
table && values.forEach(function(value, index) {
var row = table.getRow(index + 1);
if (row.isSelected() && value) {
calc = calc + value;
}
});
mn
column input to 0 then sum is not updated which can be solved by updating condition.mn
列输入更改为 0,则 sum 不会更新,这可以通过更新条件来解决。...
if (typeof mnozstvi == "number") {
cell.getRow().update({
cena_m: cena * mnozstvi
});
}
...
Note: Negative range can be input in mn
column注:
mn
列可输入负数范围
You can try to use another event handler instead of listening to direct cell click or row selection (or it depends on behaviour you want)您可以尝试使用另一个事件处理程序,而不是直接听单元格单击或行选择(或者这取决于您想要的行为)
Here is the link to fiddle to check the solution: https://jsfiddle.net/02phqxz8/这是检查解决方案的小提琴链接: https://jsfiddle.net/02phqxz8/
...,
rowSelectionChanged:function(data, rows) {
if(table) {
table.recalc();
}
},
...
What was changed: Instead you can handle rowSelectionChanged event.改变了什么:相反,您可以处理 rowSelectionChanged 事件。 Every time it is called, by clicking row, or clicking checkbox you can call recalculate for table.
每次调用它时,通过单击行或单击复选框,您可以为表调用重新计算。 Just be sure to check teh table object by default, because the event is fired prior the constuctor return tha table itself.
只需确保默认检查表 object,因为该事件在构造函数返回表本身之前被触发。 Or as an option to avoid this additoinal check every time, you can subscribe to this event right after table is created.
或者作为避免每次都进行此附加检查的选项,您可以在创建表后立即订阅此事件。
You can use rowSelectionChanged
您可以使用
rowSelectionChanged
rowSelectionChanged:function(data, rows) {
if (updatedDataLength != data.length) {
updatedDataLength = data.length;
table.recalc();
}
},
var updatedDataLength = 0;
You need to add a local variable that could check data changed because the first time the table rendered, it will also call table.recalc()
that will cause a problem of rendering the initial table.您需要添加一个可以检查数据更改的局部变量,因为第一次渲染表时,它还会调用
table.recalc()
,这将导致渲染初始表的问题。 So I suggest using to check updated data length to keep it simple rather than comparing whole data.所以我建议使用检查更新的数据长度以保持简单,而不是比较整个数据。
Or you can just add a flag var tableRendered = false;
或者你可以添加一个标志
var tableRendered = false;
. .
rowSelectionChanged: function(data, rows) {
if (!tableRendered) {
tableRendered = true;
} else {
table.recalc();
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.