fomatter: function 내부에서 font color 변경

안녕하세요. 좋은 프레임워크 감사히 사용하고 있습니다.
관련 글을 검색해봤는데 제 코드에 적용되지 않는 것 같아서 질문 드립니다.
https://ax5.io/ax5ui-grid/demo/22-columnStyle.html
https://github.com/ax5ui/ax5ui-grid/issues/80

아래에서 “음수일 경우 폰트 색상 변경 필요” 부분에서 return할 값의 폰트 색상을 변경할 수 있는지요?
styleClass를 이용한 방법은 이미 계산이 끝난 상황에서 다시 한번 계산을 해야하는 것 같아서요.

{"key": "7", "label": "증감률", align: "right", formatter: function () {
    val_a = this.item[(7-1)];
    val_b = this.item[(7-3)];
    res_v = (val_a / val_b) -1;
    if (res_v < 1) {
        **// 음수일 경우 폰트 색상 변경 필요**
    }
    res_val = ax5.util.number(res_v * 100, {round: 2}) + " %";
    
    return res_val;
    }
    /*
    ,  styleClass: function () {
        res_style = "grid-cell-red";
        return res_style;
    }*/
}

.setConfig 의 body 부분에 trStyleClass function을 이용한 방법도 링크에서 확인했지만, item의 name이 일정하지 않아서 범용적으로 적용하기는 어려울 것 같습니다.

firstGrid.setConfig({
    target: $('[data-ax5grid="first-grid"]'),
    showRowSelector: false,
    header: {align: 'center'},
    columns: title_array,
    sortable: false, footSum: [footsum_array], frozenColumnIndex: 3, 
    body: {
         mergeCells: ["1"], grouping: grouping_json_str, 
         trStyleClass: function(){
            console.log(this.item);
            return "grid-cell-red";
        },
    columnHeight: 26
    }
 });

자답입니다. 한번 더 계산하는 방식으로 styleClass 사용해서 적용했습니다.

{"key": "7", "label": "증감률", align: "right", formatter: function () {
    val_a = this.item[(7-1)];
    val_b = this.item[(7-3)];
    res_v = (val_a / val_b) -1;
    res_val = ax5.util.number(res_v * 100, {round: 2}) + " %";
    return res_val;
 },
 styleClass: function () {
    val_a = this.item[(7-1)];
    val_b = this.item[(7-3)];
    res_v = (val_a / val_b) -1;
    return (res_v < 0) ? "grid-cell-red" : "grid-cell-normal";
 }
}
1개의 좋아요