根据单元格值将 CSS 添加到 Slick 网格中的列的每个单元格答案

【问题标题】：Adding CSS to each cell for a column in Slick grid based on cell value根据单元格值将 CSS 添加到 Slick 网格中的列的每个单元格
【发布时间】：2014-10-13 12:22:00
【问题描述】：

基于单元格值，我想将 CSS 类应用于光滑网格中的该单元格。

我在列上使用以下代码

{
  id: 'deptType',
  name: 'Department Type',
  field: 'dept_type',
  sortable: true,
  formatter: function ( row, cell, value, columnDef, dataContext ) {
                  if(value === 'red'){
                      return '<div style="width:100%; padding:0; margin:0" class ="red">' + value + '</div>';
                  }
                  return '<div style="width:100%; padding:0; margin:0" class ="green">' + value + '</div>';
             }
}

虽然这段代码有效。我想知道是否有更好的方法来解决这个问题？

【问题讨论】：

标签： jquery css slickgrid

【解决方案1】：

您的代码对我来说似乎很好，您可以使用以下代码更加集中样式并可能提高 CSS 渲染速度，其中您不使用 HTML 属性 style 而是使用 class。

.red, .green {
width:100%;
padding:0;
margin:0;
}
.red {
color: red;
}
.green {
color: green;
}

{
  id: 'deptType',
  name: 'Department Type',
  field: 'dept_type',
  sortable: true,
  formatter: function ( row, cell, value, columnDef, dataContext ) {
                  if(value === 'red'){
                      return '<div class ="red">' + value + '</div>';
                  }
                  return '<div class ="green">' + value + '</div>';
             }
}

【讨论】：