如果为负，将货币格式单元格的颜色更改为红色答案

【问题标题】：Change colour of money formatted cell to red if negative如果为负，将货币格式单元格的颜色更改为红色
【发布时间】：2019-05-21 21:45:50
【问题描述】：

我有一个使用内置货币格式化程序格式化的列。如果单元格的数值为负，我想将单元格的文本更改为红色。我无法创建自定义格式化程序，因为 formatter 列选项已设置为 money。

【问题讨论】：

标签： tabulator

【解决方案1】：

您必须使用自定义格式化程序，在此代码中模仿货币格式化程序。想不到别的了

let tabledata = [{
    id: 1,
    name: "Oli ",
    money: 1,
    col: "red",
    dob: ""
  },
  {
    id: 2,
    name: "Mary ",
    money: -1,
    col: "blue",
    dob: "14/05/1982"
  },
  {
    id: 3,
    name: "Christine ",
    money: 0,
    col: "green",
    dob: "22/05/1982"
  },
  {
    id: 4,
    name: "Brendon ",
    money: 10,
    col: "orange",
    dob: "01/08/1980"
  },
  {
    id: 5,
    name: "Margret ",
    money: -10,
    col: "yellow",
    dob: "31/01/1999"
  },
];

for (let i = 0; i < tabledata.length; i++) {

  if (tabledata[i].money < 0) {
    tabledata[i].money = "<span class='red'>$" +
      tabledata[i].money +
      "</span>"
  } else {
    tabledata[i].money = '$' + tabledata[i].money;
  }
}

const table = new Tabulator("#example-table", {
  data: tabledata,
  layout: "fitColumns",
  columns: [{
      title: "id",
      field: "id"
    },
    {
      title: "name",
      field: "name"
    },
    {
      title: "money",
      field: "money",
      formatter: "html"
    },
    {
      title: "col",
      field: "col"
    },
    {
      title: "dob",
      field: "dob"
    },
  ]
});

.red {
  color: red;
}

<!DOCTYPE html>
<html lang="en">

<script src="https://unpkg.com/tabulator-tables@4.2.4/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.2.4/dist/css/tabulator.min.css" rel="stylesheet" />


<body>
  <div id="example-table"></div>




</body>

</html>

【讨论】：

我最后使用自定义格式化函数创建了一个额外的列，如果该行的运行总计为负数，则将“DR”输出到单元格（与银行对账单显示透支余额的方式相同）。我将在 GitHub 问题页面上添加功能请求。
以迂回的方式是的，如果货币格式化程序可以选择以红色显示负余额或用括号括起来（会计惯例），或者在金额后加上字母“DR”（银行对账单）那就更好了。

【解决方案2】：

我想我找到了解决这个问题的方法：

formatter:function(cell,params,callback) {
    let money = cell.getTable().modules.format.getFormatter("money");
    cell.getElement().style...
    return money(cell,params,callback);
}

https://jsfiddle.net/baumrock/vxpbhLsg/14/

【讨论】：