javascript - 如何刷新新行上的单元格？

Question

如果我在制表器上有一些数据，我的代码可以正常工作，但是当我有一个新行并编辑单元格时，“总计”列不会刷新。我有一个“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);

标签： javascriptjquerytabulator

Answer 1

问题是因为您试图直接在行数据对象上更新数据。相反，您应该调用行组件update上的函数，这将设置新值，然后触发单元格内容的重绘：

cellEdited:function (cell){
    var row = cell.getRow();

    row.update({total: cell.getValue() + row.getData().etp_administratif});
}