首页 文章

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

提问于
浏览 次
1

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

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

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

2 回答

  • 1

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

    回复于
  • 1

    我现在已经解决了这个问题 - 我根据包含颜色名称的单独列将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"},
];
    回复于

相关问题