jquery - 根据单元格值将 CSS 添加到 Slick 网格中一列的每个单元格

Question

基于单元格值，我想将 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>';
             }
}

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

Answer 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>';
             }
}