bottomCalcFormatterParams does not work in Tabulator.js?

问题

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

回答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

回答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 = {
      '&': '&',
      '<': '&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"));
    })
  }
});

来源：https://stackoverflow.com/questions/65779531/bottomcalcformatterparams-does-not-work-in-tabulator-js