如何在Grid.js中为单元格添加动态属性以设置整格背景色

需求：给Grid.js表格的「Type」列根据不同类型（INFO蓝色、WARNING黄色、ERROR红色）设置整个单元格的背景色。
遇到的问题：使用formatter属性只能给嵌套的HTML元素上色，无法覆盖整个<td>单元格区域，尝试通过给单元格添加动态属性解决。

Grid.js的列配置中，attributes支持传入函数，该函数接收cell、row等参数，可以动态为<td>元素设置属性（包括样式或CSS类），从而实现整个单元格的背景色控制。

方案一：直接通过attributes设置行内样式 #

这种方式无需嵌套额外HTML元素，直接给<td>设置背景色：

修改列配置及相关函数 #

// 定义动态设置单元格属性的函数
function getCellAttributes(cell) {
  let bgColor = '';
  switch(cell) {
    case 'INFO':
      bgColor = '#3393FF';
      break;
    case 'WARNING':
      bgColor = '#FFCE33';
      break;
    case 'ERROR':
      bgColor = '#FC1235';
      break;
  }
  return {
    style: `background-color: ${bgColor}; color: white;`, // 直接给td设置样式
    'data-field': cell // 动态设置data属性
  };
}

// Grid.js初始化代码
var eventGrid = new gridjs.Grid({
  columns: [
    { name: "ID", width: '2%' },
    { name: "DateTimeString", width: '11%' },
    { name: "Username", width: '8%' },
    { name: "Professional ID", width: '2%' },
    { name: "Bio ID", width: '2%' },
    { 
      name: "Type", 
      width: '8%', 
      attributes: getCellAttributes, // 绑定动态属性函数
      formatter: (cell) => cell // 直接返回文本，无需嵌套div
    },
    { name: "Navigation Type", width: '8%' },
    { name: "Message", width: '8%' },
    { name: "Exception Message" }
  ],
  server: {
    url: '/EventsLogs/Details',
    then: data => data.map(event => [
      event.eventLogId,
      event.eventLogDateTimeString,
      event.username,
      event.professionalId,
      event.bioId,
      event.eventLogTypeName,
      event.navigationTypeName,
      event.message,
      event.exceptionMessage
    ])
  }
}).render(document.getElementById("eventsLogs-table"));

方案二：动态添加CSS类（推荐，样式与逻辑分离） #

先定义CSS样式，再通过attributes给<td>添加对应的类：

1. 添加CSS样式 #

.cell-info {
  background-color: #3393FF;
  color: white;
}
.cell-warning {
  background-color: #FFCE33;
  color: white;
}
.cell-error {
  background-color: #FC1235;
  color: white;
}

2. 修改Grid.js列配置 #

function getCellClass(cell) {
  let cellClass = '';
  switch(cell) {
    case 'INFO':
      cellClass = 'cell-info';
      break;
    case 'WARNING':
      cellClass = 'cell-warning';
      break;
    case 'ERROR':
      cellClass = 'cell-error';
      break;
  }
  return {
    class: cellClass,
    'data-field': cell
  };
}

var eventGrid = new gridjs.Grid({
  columns: [
    // ... 其他列配置不变
    { 
      name: "Type", 
      width: '8%', 
      attributes: getCellClass // 绑定类名函数
    },
    // ... 其他列配置不变
  ],
  // ... 其他配置不变
}).render(document.getElementById("eventsLogs-table"));

原理说明 #

Grid.js的attributes属性如果传入函数，会在渲染每个单元格时调用，返回的对象会作为<td>元素的属性。通过这种方式可以直接控制单元格本身的样式，而不是仅控制内部嵌套元素，从而实现整个单元格的背景色覆盖。

内容的提问来源于stack exchange，提问作者David Lerma Developer