Табулятор расчета общей стоимости - PullRequest
Новая
       27

Табулятор расчета общей стоимости

0 голосов
/ 01 октября 2019

Я изучал 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: "$"}},       
],  
});

Я также отмечаю, что входные данныене позволяет увеличивать с помощью стрелок вверх и вниз поля ввода, являющегося типом числа.

1 Ответ

0 голосов
/ 09 октября 2019

удалось заставить его работать через обновление значения ячейки с помощью функции редактирования ячейки в ячейке количества. Я также думаю, что из-за того, что общая ячейка не является частью данных (новая ячейка создана для таблицы), мне нужно было получить к ней доступ через 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: "$"}},       
],  
});
...