API 制表器 - 汇总列值 - 单元格值编辑的动态总计答案

【问题标题】：API Tabulator - Summing Columns Values - dynamic total on cell value editAPI 制表器 - 汇总列值 - 单元格值编辑的动态总计
【发布时间】：2020-06-24 06:55:39
【问题描述】：

我正在使用 C#、asp.net、JQuery 和 Tabulator 开发一个通过 REST API 提供的 Web 应用程序

我正在尝试实现两件事，我在下面的制表符定义应该在以下位置提供一个行总和：

 AvailTotal field

对任何列中的每个列值进行编辑后：

 availableBedsM, availableBedsF, availableBedsC

有人可以帮忙吗，我需要在 AvailTotal 列中设置一个默认总和，以便在值更改时动态反映对上述字段的任何编辑。

我的制表符：

 // tabulator start
 var tabledata = new Tabulator("#example-table", {
     persistence:true, //enable table persistence
     reactiveData: true,
     height: (window.innerHeight - 10),
     ajaxURL: "api/bed_data_",
     groupBy:"siteCOSitrep",
     columns:[

     {title:"Ward Code", 
         field:"wardCode", 
         frozen:true,
         width:200
     },
         {//create column group
             title:"Available Beds",
                      columns:[
                      {title:"Male", 
                     field:"availableBedsM", 
                     align:"center", 
                     headerVertical:true,  
                     width:50, 
                     editor:"number",
                     validator:["integer", "min:0", "required", "max:99"],
                     topCalc:"sum", topCalcParams:{precision:0,},
                     cellEdited: function(cell) {
                     cell.AvailTotal = cell.getValue() + tabledata.availableBedsF + tabledata.availableBedsC;}
            },

                 {title:"Female", 
                     field:"availableBedsF", 
                     align:"center", 
                     headerVertical:true, 
                     width:50, 
                     editor:"number",
                     validator:["integer", "min:0", "required", "max:99"],
                     topCalc:"sum", topCalcParams:{precision:0,},
                     cellEdited: function(cell) {
                     cell.AvailTotal = cell.getValue() + tabledata.availableBedsM + tabledata.availableBedsC;}
            },
                 {title:"Cubicle", 
                     field:"availableBedsC", 
                     align:"center", 
                     headerVertical:true, 
                     width:50, 
                     editor:"number",
                     validator:["integer", "min:0", "required", "max:99"],
                     topCalc:"sum", topCalcParams:{precision:0,},
                     cellEdited: function(cell) {
                     cell.AvailTotal = cell.getValue() + tabledata.availableBedsM + tabledata.availableBedsC;}
                 },
                 {title:"Avail Total",  
                     field:"AvailTotal",
                     align:"center", 
                     headerVertical:true, 
                     width:50,
                     topCalc:"sum", topCalcParams:{precision:0,},
                    },
                 ],
         },

【问题讨论】：

标签： c# asp.net-mvc asp.net-core asp.net-ajax tabulator

【解决方案1】：

如果您想根据其他列的值计算得到一个列，那么您需要查看使用Mutator

如果我们假设您有第三列想要保存 val1 和 val2 之和的值列，那么定义将是这样的：

var sumMutator= function(value, data, type, params, component){
    //value - original value of the cell
    //data - the data for the row
    //type - the type of mutation occurring  (data|edit)
    //params - the mutatorParams object from the column definition
    //component - when the "type" argument is "edit", this contains the cell component for the edited cell, otherwise it is the column component for the column

    return data.val1 + data.val2;
}

{title:"Sum Column", field:"sumcol", mutator:sumMutator}

如果您正在操作数据，则应始终使用 mutator，因为它会更改数据本身，这意味着该列将正确排序。如果您使用的 formatter 纯粹是一种视觉效果，则意味着您将无法对列进行排序或过滤。

如果您想在其他列发生更改时更新计算列，那么我建议使用 cellEdited 回调来触发该列的更新：

function updateCalc(cel){
    cell.getRow().update({sumcol:false});
}
{title:"Val 1", field:"val1", cellEdited:updateCalc}

你给什么值并不重要sumcol，改变它会触发mutator，它会重新计算值

【讨论】：