计算总价的制表机

Question

我一直在研究 Tabulator，到目前为止我认为它在功能和实现方面都很棒。然而，我已经被困了半天试图让一些看似基本的功能正常工作。它是让用户在数量字段中输入数值，然后它会根据数量*价格在新的列中计算总计。

我已经查看并尝试了所有可以在网上找到的内容，但仍然无法正常工作。我觉得这主要取决于我对突变器工作原理的理解。我确实让一个在不同的页面上工作，该页面根据股票价值 * 价格静态计算值。
这是我目前所拥有的：

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

通过数量单元格上的单元格编辑功能更新单元格值，设法让它工作。我还认为，由于总单元格不是数据的一部分（为 table 创建的新单元格），我需要通过 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: "$"}},       
],  
});

计算总价的制表机

Tabulator calculating a total price

mutators

tabulator