如何解决如何刷新新行的单元格?
如果我在制表器上有一些数据,我的代码就可以正常工作,但是当我得到一个新行并编辑单元格时,“总计”列不会刷新..我有一个“NaN”,但是如果我点击它,数据刷新。如果有人可以帮我刷新新行,谢谢。 (对不起,我的英语不好) 这是我的代码:
$("#add-row-ventilation").click(function () {
$tabulator_ventilation_table.addRow({'date':<?= $this->year ?>}).then(function(row) {
/*$(row.getCell("etp_accompagnement").setValue(0));
$(row.getCell("etp_administratif").setValue(0));*/
// Todo:si setValue(0) sur le total,il ne se refresh pas à la modification des deux autres champs
//$(row.getCell("total").setValue(0));
window.scrollTo(0,document.body.scrollHeight);
});
});
let idVpInput = function (cell,formatterParams) {
if (cell.getValue() !== undefined){
return "<input type='hidden' name='ventilation_personnel[id][]' value='"+cell.getValue()+"'>";
} else {
return "<input type='hidden' name='ventilation_personnel[id][]' value=''>";
}
};
let anneeVpInput = function (cell,formatterParams) {
if (cell.getValue() !== undefined) {
return "<input type='hidden' name='ventilation_personnel[date][]' value='"+cell.getValue()+"'>";
} else {
return "<input type='hidden' name='ventilation_personnel[date][]' value='<?= $this->year ?>'>";
}
}
let totalMutator = function (value,rowData) {
return parseInt(rowData.etp_accompagnement) + parseInt(rowData.etp_administratif);
}
let totalFormatter = function (cell){
var value = cell.getValue();
console.log(value);
if(value !== 100){
cell.getRow().getElement().style.color = "red";
return value;
} else {
cell.getRow().getElement().style.color = "black";
return value;
}
}
/*
* Todo:le total ne s'affiche pas correctement à l'ajout d'une nouvelle ligne
*/
let tabulator_vp_config = {
layout:"fitColumns",maxHeight: "60vh",reactiveData: true,columns:[
{title: "id",field: "id",headerSort: false,visible:false,formatter: idVpInput},{title: "Date",field: "date",headerSort: true,formatter: anneeVpInput},{title: "Nom",field: "nom",editor:"input",validator:"required"},{title: "Fonction",field: "fonction",{title: "Catégorie",field: "categorie",editor:"select",{title: "ETP Accompagnement",field: "etp_accompagnement",validator:["required","max:100"],cellEdited:function (cell){
$.each(tableVpData,function (i) {
tableVpData[i].total = cell.getValue() + tableVpData[i].etp_administratif;
});
}},{title: "ETP Administratif",field: "etp_administratif",function (i) {
tableVpData[i].total = cell.getValue() + tableVpData[i].etp_accompagnement;
});
}},{title: "Total ETP",field: "total",visible:true,validator:["required"],mutator:totalMutator,formatter:totalFormatter},],}
let $tabulator_ventilation_table = new Tabulator("#ventilation_table",tabulator_vp_config);
var tableVpData = <?= $this->ventilation_personnel ?>;
$tabulator_ventilation_table.setData(tableVpData);
解决方法
问题是因为您试图直接更新行数据对象上的数据。相反,您应该在 Row Component 上调用 update
函数,这将设置新值,然后触发单元格内容的重绘:
cellEdited:function (cell){
var row = cell.getRow();
row.update({total: cell.getValue() + row.getData().etp_administratif});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。