在Slick网格中根据单元格值为每个单元格添加CSS [英] Adding CSS to each cell for a column in Slick grid based on cell value

问题描述

基于单元格的值，我想应用一个CSS类到光滑的网格中的单元格。

Based on cell value, I want to apply a CSS class to that cell in slick grid.

我在列上使用以下代码

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

推荐答案

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

Your code seems fine to me, you can more centralize styling and potentially improve CSS rendering speed using the following code, where you do not use HTML property style but class instead.

.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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！