如何刷新新行上的单元格?
how to refresh a cell on a new row?
如果我在制表符上有一些数据,我的代码可以正常工作,但是当我得到一个新行并编辑单元格时,“总计”列不会刷新。我得到的是“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, visible:false, formatter: anneeVpInput},
{title: "Nom", field: "nom", headerSort: true, editor:"input", validator:"required"},
{title: "Fonction", field: "fonction", headerSort: true, editor:"input", validator:"required"},
{title: "Catégorie", field: "categorie", headerSort: true, editor:"select", validator:"required"},
{title: "ETP Accompagnement", field: "etp_accompagnement", headerSort: true, editor:"input", 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", headerSort: true, editor:"input", validator:["required", "max:100"], cellEdited:function (cell){
$.each(tableVpData, function (i) {
tableVpData[i].total = cell.getValue() + tableVpData[i].etp_accompagnement;
});
}},
{title: "Total ETP", field: "total", headerSort: true, visible:true, editor:"input", 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});
}
抱歉新冠肺炎,我没有看到你的回复,但我终于做到了:
var rowCells = row.getCells().filter(function(rowCell) {
return rowCell.getColumn().getField().charAt(0) === "M";
});
var effectifs = rowCells.map(cell => cell.getValue());
var totalCell = row.getCell("moyenne");
totalCell.setValue(getAverage(effectifs));
} ```
and in the tabulator
``` cellEdited: function(editedCell) {
var row = editedCell.getRow();
setRowAverage(row);
} ```
and for the mutator :
``` let moyenneMutator = function (value, rowData) {
return getAverage([rowData.M0, rowData.M01, rowData.M02, rowData.M03, rowData.M04, rowData.M05, rowData.M06, rowData.M07, rowData.M08, rowData.M09, rowData.M10, rowData.M11, rowData.M12]);
} ```
I think i will see your solution because my code is more complicated than it must be (sorry for my bad english).
thanks again.
Riwalenn
如果我在制表符上有一些数据,我的代码可以正常工作,但是当我得到一个新行并编辑单元格时,“总计”列不会刷新。我得到的是“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, visible:false, formatter: anneeVpInput},
{title: "Nom", field: "nom", headerSort: true, editor:"input", validator:"required"},
{title: "Fonction", field: "fonction", headerSort: true, editor:"input", validator:"required"},
{title: "Catégorie", field: "categorie", headerSort: true, editor:"select", validator:"required"},
{title: "ETP Accompagnement", field: "etp_accompagnement", headerSort: true, editor:"input", 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", headerSort: true, editor:"input", validator:["required", "max:100"], cellEdited:function (cell){
$.each(tableVpData, function (i) {
tableVpData[i].total = cell.getValue() + tableVpData[i].etp_accompagnement;
});
}},
{title: "Total ETP", field: "total", headerSort: true, visible:true, editor:"input", 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});
}
抱歉新冠肺炎,我没有看到你的回复,但我终于做到了:
var rowCells = row.getCells().filter(function(rowCell) {
return rowCell.getColumn().getField().charAt(0) === "M";
});
var effectifs = rowCells.map(cell => cell.getValue());
var totalCell = row.getCell("moyenne");
totalCell.setValue(getAverage(effectifs));
} ```
and in the tabulator
``` cellEdited: function(editedCell) {
var row = editedCell.getRow();
setRowAverage(row);
} ```
and for the mutator :
``` let moyenneMutator = function (value, rowData) {
return getAverage([rowData.M0, rowData.M01, rowData.M02, rowData.M03, rowData.M04, rowData.M05, rowData.M06, rowData.M07, rowData.M08, rowData.M09, rowData.M10, rowData.M11, rowData.M12]);
} ```
I think i will see your solution because my code is more complicated than it must be (sorry for my bad english).
thanks again.
Riwalenn