c# - API 制表器 - 汇总列值 - 单元格值编辑的动态总计
问题描述
我正在用 C#、asp.net、JQuery 和 Tabulator 开发一个 Web 应用程序,它通过 REST API 提供
我正在尝试实现两件事,我的制表符定义如下,应在以下内容中提供行总和:
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列之和的值,那么定义将如下所示:
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什么值,改变它都会触发 mutator 重新计算值
推荐阅读
- java - 顶部半径不显示角半径的cardview中的图像
- angular - 单击输入字段时防止角度材料列表行为
- python - 在 bash 脚本中运行时 pip install “解析错误”
- javascript - 为什么鼠标坐标没有出现
- linux - Sublime Text 3 中的 Package Control 出现多个错误
- php - move_uploaded_file 在 sql server 上不起作用
- javascript - 脚本问题 - 隐藏/显示元素
- wordpress - 如何使用javascript仅计算下拉列表中的选定选项
- angular - Angular 2 forEach 用于数组数组
- python-3.x - 如何推送实时熊猫数据框并将其编入索引以适合我的 Tkinter 表?