SlickGrid : 각 행을 반복하고 조건에 따라 색을 설정하는 방법은 무엇입니까?

Question

저는 SlickGrid에 초보자입니다. 나는 그리드의 각 행을 반복하고 조건에 따라 행을 다시 색으로 설정하는 방법을 알고 싶습니다 (예 : 20-40 세 사이이면 행에 파란색이 표시되고 그렇지 않으면 빨간색으로 표시됨).).

Answer 1

당신의 열 정의, 당신은 Slick.Data.DataView를 사용하는 가정이

(function ($) { 
// register namespace 
$.extend(true, window, { 
    "Slick": { 
     "Formatters": {     
      "Delete": DeleteLink 
     } 
    } 
}); 


function DeleteLink(row, cell, value, columnDef, dataContext) { 
    //Logic to present whatever you want based on the cell data 
    return "<a href=\"javascript:removeId('contact', '" + dataContext.folderId + "', '" + dataContext.id + "')\"><img width=\"16\" height=\"16\" border=\"0\" src=\"/images/delete.png\"/></a>"; 
} 

})(jQuery); 

Answer 2

처럼 slickgrid 당신을 당신의 포맷터 추가하기이

{id: "delete", name: "Del", field: "del", formatter: Slick.Formatters.Delete, width: 15}, 

같이 보일 것이다, 그래서 당신은 포맷을 사용하는 것이 좋습니다 getItemMetadata method을 수정하여 포함하는 행 요소에 클래스를 동적으로 추가 할 수 있습니다. 당신의 Slick.Data.DataView 인스턴스가 dataView라고 것처럼 내가 여기 당신이 가고,이 쓰기 위하여려고하고있다 :

dataView.getItemMetadata = metadata(dataView.getItemMetadata); 

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 || ''); 
     if (item.age >= 20 && item.age <= 40) { 
     ret.cssClasses += ' blue'; 
     } else { 
     ret.cssClasses += ' red'; 
     } 
    } 

    return ret; 
    } 
} 

이것은 행의 요소에 'blue' 또는 'red'의 클래스를 추가합니다.