Question

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

Answer 1

您必须使用自定义格式化程序，在此代码中模仿money格式化程序。我想不出什么了

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>

Answer 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/

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

2 个答案: