Javascript 基于单元值设置网格单元样式

如何使用SlickGrid根据单元格的值更改单元格的样式（比如文本颜色）？即如果单元格值低于50，则将其设置为绿色，否则将其设置为红色

---

我研究了

getItemMetadata

，但它似乎没有办法设置特定于单元格的样式，也没有办法根据单元格值动态确定类。

这是我过去通常处理单元格级样式的方式。显然，您必须使用dataview才能工作。我只是将其保留在网格设置的底部，即渲染网格的正上方。希望这有帮助

//Put this in your style sheet. 
.greenCSSclass {color:green;}
.redCSSclass {color:red;}

dataView.getItemMetadata = metadata(dataView.getItemMetadata);
var redCells= {}; 
var greenCells= {};          
function metadata(old_metadata_provider) {
      return function (row) {
          var item = this.getItem(row);
          var ret = (old_metadata_provider(row) || {});            
          if (item) {
              ret.cssClasses = (ret.cssClasses || '');
              //Include any row level CSS rules here by editing ret.cssClasses

              //Clear previous CSS rule for this cell.
              if (redCells.hasOwnProperty(row)) {
                  delete redCells[row];
              }
              if (greenCells.hasOwnProperty(row)) {
                  delete greenCells[row];
              }

              //Evaluate the value here and add to either map
              if (item.columnName < 50 ) {
                  if (!greenCells[row]) {
                      greenCells[row] = {};
                  }
                  greenCells[row]["columnName"] = "greenCSSclass";
              } else {
                  if (!redCells[row]) {
                      redCells[row] = {};
                  }
                  redCells[row]["columnName"] = "redCSSclass";
              }

              //Set Cell CSS. 
              grid.setCellCssStyles("greenCells", greenCells);
              grid.setCellCssStyles("redCells", redCells);
          }
          return ret;
      }
  }

//将其放入样式表中。
.greencsclass{color:green；}
.redcsclass{color:red；}
dataView.getItemMetadata=元数据（dataView.getItemMetadata）；
var redCells={}；
var greenCells={}；
函数元数据（旧的元数据提供程序）{
返回函数（行）{
var item=此.getItem（行）；
var ret=（旧的元数据提供者（行）|{}）；
如果（项目）{
ret.cssClasses=（ret.cssClasses | |“）；
//通过编辑ret.cssClasses在此处包含任何行级CSS规则
//清除此单元格以前的CSS规则。
if（redCells.hasOwnProperty（行））{
删除红色单元格[行]；
}
if（greenCells.hasOwnProperty（行））{
删除绿色单元格[行]；
}
//在此处计算值并添加到任一映射
如果（item.columnName<50）{
如果（！绿色单元格[行]）{
绿色单元格[行]={}；
}
绿色单元格[行][“列名称”]=“绿色CSSClass”；
}否则{
如果（！红色单元格[行]）{
红细胞[行]={}；
}
redCells[行][“列名称”]=“redCSSclass”；
}
//设置单元格CSS。
grid.setcellcssstyle（“绿色细胞”，绿色细胞）；
grid.setcellcssstyle（“redCells”，redCells）；
}
返回ret；
}
}

提供可能的解决方案。而且，可能适合您的需要。