bottomCalcFormatterParams 在 Tabulator.js 中不起作用？

Question

I am using bottom custom calculation so bottomCalcFormatterParams could be used regarding documentation

Here is the code I am using

  title: "Sum",
  field: "cena_m",
  width: 100,
  topCalc: "sum",
  bottomCalc: mysum,
  bottomCalcParams: {
    precision: 0
  },
  bottomCalcFormatterParams: {
    decimal: ",",
    thousand: ".",
    symbol: "€",
    symbolAfter: "p",
    precision: false,
  },      
  formatter: "money",
  formatterParams: {
    decimal: ",",
    thousand: ".",
    symbol: "€",
    symbolAfter: "p",
    precision: 0,
  },
  topCalcFormatter: "money",
  topCalcFormatterParams: {
    decimal: ",",
    thousand: ".",
    symbol: "$",
    symbolAfter: "p",
    precision: false,
  },
}

Please note, you have click to row to get it included in the custom calculation. jsFiddle

Answer 1

I found a Tabulator solution. I was missing bottomCalcFormatter:"money", in settings

So this works nicely

  bottomCalcFormatter:"money",
  bottomCalcFormatterParams: {
    decimal: ",",
    thousand: ".",
    symbol: "€",
    symbolAfter: "p",
    precision: false,
  },  

Check jsFiddle

Answer 2

var tabledata = [{ id: 1, name: "BO", cena: 31, mn: 1 }, { id: 2, name: "Xtend", cena: 23, }, { id: 3, name: "Zinobiotic", cena: 24 } ]; // copied from tabular source code and modified as required // https://github.com/olifolkerd/tabulator/blob/master/src/js/modules/format.js function sanitizeHTML(value) { if (value) { var entityMap = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;', '/': '&#x2F;', '`': '&#x60;', '=': '&#x3D;' }; return String(value).replace(/[&<>"'`=\/]/g, function(s) { return entityMap[s]; }); } else { return value; } } function emptyToSpace(value) { return value === null || typeof value === "undefined" || value === "" ? "" : value; } function moneyFormatter(value, formatterParams) { var floatVal = parseFloat(value), number, integer, decimal, rgx; var decimalSym = formatterParams.decimal || "."; var thousandSym = formatterParams.thousand || ","; var symbol = formatterParams.symbol || ""; var after = !!formatterParams.symbolAfter; var precision = typeof formatterParams.precision !== "undefined" ? formatterParams.precision : 2; if (isNaN(floatVal)) { return emptyToSpace(sanitizeHTML(value)); } number = precision !== false ? floatVal.toFixed(precision) : floatVal; number = String(number).split("."); integer = number[0]; decimal = number.length > 1 ? decimalSym + number[1] : ""; rgx = /(\d+)(\d{3})/; while (rgx.test(integer)) { integer = integer.replace(rgx, "$1" + thousandSym + "$2"); } return after ? integer + decimal + symbol : symbol + integer + decimal; } var mysum = function(values, data, calcParams) { console.log(values, data, calcParams); var calc = 0; table && values.forEach(function(value, index) { var row = table.getRow(index + 1); var cell = row.getCell("name").getValue(); if (row.isSelected() && value) { calc = calc + value; } }); if (calc == 0) { calc = "" } return moneyFormatter(calc, { decimal: ",", thousand: ".", symbol: "€", symbolAfter: "p", precision: false, }); } function aktualizuj_m(cell) { var cena = cell.getRow().getCell("cena").getValue(); var mnozstvi = cell.getValue(); var rowIndex = cell.getRow().getIndex(); if (typeof mnozstvi == "number") { cell.getRow().update({ cena_m: cena * mnozstvi }); } } var table = new Tabulator("#example-table", { movableColumns: true, data: tabledata, selectable: true, columns: [{ title: "Name", field: "name", width: 200 }, { formatter: "rowSelection", titleFormatter: "rowSelection", hozAlign: "center", headerSort: false, }, { title: "Cena", field: "cena", }, { title: "mn", field: "mn", editor: "number", cellEdited: function(cell) { aktualizuj_m(cell); }, cellClick: function(e, cell) { e.preventDefault(); e.stopPropagation(); }, }, { title: "Sum", field: "cena_m", width: 100, topCalc: "sum", bottomCalc: mysum, bottomCalcParams: { precision: 0 }, formatter: "money", formatterParams: { decimal: ",", thousand: ".", symbol: "€", symbolAfter: "p", precision: 0, }, topCalcFormatter: "money", topCalcFormatterParams: { decimal: ",", thousand: ".", symbol: "$", symbolAfter: "p", precision: false, }, } ], rowSelectionChanged: function(e, row) { this.recalc(); }, renderComplete: function() { this.getRows().forEach(function(value, index) { //console.log(index); aktualizuj_m(value.getCell("mn")); }) } });