制表者计算总价

Question

我一直在浏览Tabulator，到目前为止认为它在功能上以及可以实现的功能方面都很棒。但是，我被困了半天，试图使某些看似基本的功能正常工作。允许用户在数量字段中输入数值，然后它将基于数量*价格在新列中计算总数。

我已经查看并尝试了所有可以在网上找到的所有内容，但仍然无法正常使用。我觉得这主要是我对mutator的工作方式的理解。我确实在另一个页面上工作，该页面根据股票价值*价格静态计算了价值。这是我到目前为止的内容：

var totalEditor = function(cell, onRendered, success, cancel){
//cell - the cell component for the editable cell
//onRendered - function to call when the editor has been rendered
//success - function to call to pass the successfuly updated value to Tabulator
//cancel - function to call to abort the edit and return to a normal cell

var price = cell.getData().price;
var cellValue = cell.getValue(),
input = document.createElement("input");

input.setAttribute("type", "number");

input.value = cellValue;

onRendered(function()
{
    input.focus();
    input.style.height = "100%";
});

function onChange()
{

    if(input.value >= 0)
    {
        success(cell.getRow().getData().quantity = input.value);
        success(cell.getRow().getData().total = input.value * price);//Thought this would work
    }
    else
    {
        cancel();
    }
}

//submit new value on blur or change
input.addEventListener("blur", onChange);

//submit new value on enter
input.addEventListener("keydown", function(e){
    if(e.keyCode == 13){
        onChange();
    }

    if(e.keyCode == 27){
        cancel();
    }
});

return input;
};


//custom mutator for static total calculation
var totalMutator = function(value, data, type, params, mutatorParams){
var qty = data.quantity;
var price = data.price;
return (Math.abs(qty) * Math.abs(price));
}

var table = new Tabulator("#example-table", {
//data:array2,
layout:"fitColumns",
placeholder:"No Data Set",
reactiveData: true,
columnCalcs:"both",
initialSort:[
    {column:"name", dir:"asc"}, //sort by this first
],
columns:[
    {title:"SKU", field:"sku", sorter:"string", width:100},
    {title:"Name", field:"name", sorter:"string",headerFilter:"input"},
    {title:"Price", field:"price", formatter: "money", formatterParams: { decimal: ".", thousand: ",", symbol: "$", precision: false,}, sorter:"number", width:100, align:"center"},
    {title:"Quantity", width:100, field:"quantity", align:"center", editor:totalEditor, editorParams:{min:0,max:1000,step:1,}},
    {title: "Total", width:100, field:"total", sorter:"number", align: "center", formatter: "money",formatterParams: { decimal: ".", thousand: ",", symbol: "$"}},       
],  
});

我还注意到，输入不允许您通过数字类型输入框的向上和向下箭头进行递增。

Answer 1

通过通过数量单元格上的单元格编辑功能更新单元格值来使其正常工作。我还认为，由于总单元格不是数据的一部分（为表创建的新单元格），我需要通过getCell（“ total）而不是getData（）。total

访问它

var table = new Tabulator("#example-table", {
layout:"fitColumns",
placeholder:"No Data Set",
reactiveData: true,
columnCalcs:"both",
dataEdited:function(data){
},
initialSort:[{column:"name", dir:"asc"},],
columns:[
    {title:"SKU", field:"sku", sorter:"string", width:100},
    {title:"Name", field:"name", sorter:"string",headerFilter:"input"},
    {title:"Price", field:"price", formatter: "money", formatterParams: { decimal: ".", thousand: ",", symbol: "$", precision: false,}, sorter:"number", width:100, align:"center"},
    {title:"Quantity", width:100, field:"quantity", align:"center", editor: true,
  cellEdited: function(cell) {
    cell.getRow().getCell("total").setValue(cell.getRow().getData().price * cell.getValue());
  }},
    {title: "Total", width:100, field:"total", sorter:"number", align: "center", formatter: "money",formatterParams: { decimal: ".", thousand: ",", symbol: "$"}},       
],  
});