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

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

1 个答案: