FlexGrid에서의 조건부서식

FlexGrid는 CSS를 사용하여 데이터에 셀을 바인딩하고 셀 서식을 지정하기 위한 강력한 인프라를 제공합니다.

하지만 어떤 경우에는 충분하지 않을 수도 있습니다. 이러한 경우 formatItem 이벤트를 사용하여 각 셀에 표시되는 스타일 또는 내용을 사용자 정의합니다.

아래 그리드는 formatItem을 통해 현재 항목과 이전 항목의 값 차이를 나타내는 셀을 계산하고 format 합니다.

예시:

import * as wjCore from '@grapecity/wijmo';
import * as wjGrid from '@grapecity/wijmo.grid';

// custom rendering for headers and "Diff" columns
theGrid.formatItem.addHandler(function(s, e) {

// custom rendering for "Diff" columns
if (e.panel == s.cells) {
        var col = s.columns[e.col];
        if (e.row > 0 && (col.binding == 'salesDiff' || col.binding == 'expensesDiff')) {
            var vnow = s.getCellData(e.row, e.col - 1),
                vprev = s.getCellData(e.row - 1, e.col - 1),
                diff = (vnow / vprev) - 1;
                
            // format the cell
            var html =  '<div class="diff-{cls}">' +
                        '<span style="font-size:75%">{val}</span> ' +
                        '<span style="font-size:120%" class="wj-glyph-{glyph}"></span>';
            html = html.replace('{val}', wjCore.Globalize.format(diff, col.format));
            if (diff < 0.01) {
                html = html.replace('{cls}', 'down').replace('{glyph}', 'down');
            } 
            else if (diff > 0.01) {
                html = html.replace('{cls}', 'up').replace('{glyph}', 'up');
            } 
            else {
                html = html.replace('{cls}', 'none').replace('{glyph}', 'circle');
            }
            e.cell.innerHTML = html;
        }
    }
});