javascript - 根据单元格值设置 SlickGrid 单元格样式

Question

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

我查看了 getItemMetadata，但它似乎没有办法设置单元格特定样式，也没有办法根据单元格值动态确定类。

Answer 1

这就是我过去通常处理单元格级别样式的方式。显然，您必须使用数据 View 才能工作。我只是把它放在我的网格设置的底部，就在我渲染网格的上面。希望对您有所帮助!

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