如何在 ag-grid 的源数据中设置单元格背景颜色答案

【问题标题】：How to set a cell background color in source data in ag-grid如何在 ag-grid 的源数据中设置单元格背景颜色
【发布时间】：2018-11-28 01:49:40
【问题描述】：

我正在尝试在纯 Javascript 版本的 ag-grid 中设置来自数据源的单元格背景颜色，这是确定颜色的位置。单元格背景颜色不会根据用户输入而改变，它将始终在服务器上确定并以数据集的形式返回以供网格更新。但是，我在行数据对象（或其他任何地方）中找不到任何允许我在网格的源数据中定义单元格级别背景颜色的参数。

我希望能够做这样的事情：

var columnDefs = [
  {headerName: "Surname", field: "surname"},
  {headerName: "First name", field: "firstname"},
  {headerName: "Date of Birth", field: "birthdate"},
  {headerName: "House", field: "house"}
];

var rowData = [
  {surname: "Smith" cellbackground=blue, firstname: "John", birthdate: "01/02/2008", house: "Yellow"},
  {surname: "Jones" cellbackground=green, firstname: "Paul", birthdate: "03/05/2008", house: "Green"},
  {surname: "Green" cellbackground=yellow, firstname: "George", birthdate: "28/04/2007", house: "Yellow"},
  {surname: "MacDonald" cellbackground=amber, firstname: "Ringo", birthdate: "14/09/2007", house: "Blue"},
  {surname: "Payne" cellbackground=red , firstname: "David", "02/09/2007", house: "Red"}
];

当然，这些数据将来自我的 Web 服务的 JSON 文件，但我不确定包含特定单元格背景颜色的语法。我想将背景颜色应用于姓氏单元格（现在）。我也知道“cellbackground=amber”语法不正确。背景颜色不会在客户端计算，仅在服务器端计算，因为它们基于服务器数据库中定义的规则。

任何帮助将不胜感激。

【问题讨论】：

标签： ag-grid

【解决方案1】：

我们也有类似的要求。我们通过使用 Adaptable Blotter 解决了这个问题，它是 ag-Grid 之上的一层。我们在那里定义了规则，然后相应地绘制了 ag-Grid。效果很好。但我不知道如何除了它有效之外他们是如何做到的。如果有帮助，他们将其称为条件样式。

【讨论】：

条件样式设计用于在匹配特定条件或规则时设置单元格、列或行的样式；否则它将使用默认样式。如果您希望 always 为列设置样式，请使用 Format Column 函数，如果您希望 always 为行设置样式，请使用 RowStyles。无论显示的数据如何，这些都将被应用。

【解决方案2】：

我们还使用了 Adaptable Blotter 来做到这一点。他们能够执行条件样式，其中行将根据数据和简单的行样式进行更新。

【讨论】：

【解决方案3】：

我现在已经解决了这个问题 - 我根据包含颜色名称的单独列将 cellStyle 应用于要着色的列。我创建了一个名为 getCellColor 的函数来执行此操作。希望这对其他人有用...

var columnDefs = [
{headerName: "HouseColour", field: "housecolour", hide: true},
{headerName: "House", field: "house", width: 100, cellStyle: function getCellColor(params) { return {backgroundColor: params.data.housecolour}}}];

var rowData = [
{house: "Yellow", housecolour: "yellow"},
{house: "Green", housecolour: "green"},
{house: "Purple", housecolour: "purple"},
];

【讨论】：