셀 값을 기준으로 SlickGrid 셀 스타일 설정

Question

SlickGrid를 사용하여 셀 값에 따라 셀 스타일을 변경할 수 있습니까? IE 값이 50 이하이면 녹색, 그렇지 않으면 빨간색으로 만듭니다.

나는 getItemMetadata을 조사했지만 셀 특정 스타일을 설정하는 방법이없는 것 같으며 셀 값을 기반으로 클래스를 동적으로 결정하는 방법이 없습니다.

Answer 1

이것은 일반적으로 과거에 셀 수준의 스타일링을 처리 한 방법입니다. 분명히, 당신은 이것을 작동시키기 위해서 데이터 뷰를 사용해야 만합니다. 그리드를 렌더링하는 바로 위의 그리드 설정의 맨 아래에이 위치를 유지합니다. 희망이 도움이!

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