我正在使用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,},
},
],
},
如果要基于其他列的值的计算来创建一列,则需要使用Mutator查看>
如果我们假设您有第三列要保留val1
和val2列之和的值,则定义将如下所示:,因为它会更改数据本身,这意味着该列将正确排序。如果您使用的是纯视觉效果的formatter,这意味着您将无法对列进行排序或过滤。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
如果要在其他列更改时更新计算列,那么我建议使用cellEdited
回调来触发该列的更新:,对其进行更改将触发更改器,它将重新计算该值function updateCalc(cel){ cell.getRow().update({sumcol:false}); } {title:"Val 1", field:"val1", cellEdited:updateCalc}
您提供什么值都不重要sumcol