FlexGrid 컨트롤은 테이블 형식의 데이터를 표시하고 편집하는 데 아주 유용합니다. FlexGrid를 사용하여, format, dataMap, cssClass와 같은 속성들을 사용하여 셀의 외관을 커스터마이징할 수 있습니다.

그러나 충분하지 않은 경우가 있습니다. 예를 들어, 데이터 셀 텍스트 옆에 이미지나 스파크 라인을 렌더링 해야 할 수 있으며, 또는 셀 스타일이 값을 반영하는 조건부 서식을 사용하고자 할 수 있습니다.

그리드 셀에 사용자 정의 셀 컨텐츠를 추가하는 전통적인 방법은 formatItem 이벤트를 사용하여 셀의 HTML 컨텐츠를 사용자 정의하는 것입니다. 이것은 모든 셀(데이터, 헤더, 편집기 등)에 무엇이든 추가할 수 있는 강력한 접근 방식입니다. 예를 들어, 아래 코드는 formatItem 이벤트를 사용하여 셀에 조건부 서식을 추가합니다.

주어진 임계 값은 "change-up"또는 "change-down"클래스 선택기로 렌더링됩니다.

columns: [  
    { binding: 'id', header: 'ID', isReadOnly: true, width: '.5*' },  
    { binding: 'date', header: 'Date', width: '*' },  
    { binding: 'product', header: 'Product', width: '*' },  
    { binding: 'value', header: 'Value', format: 'c0', width: '*' },  
    {  
        binding: 'change',  
        header: 'formatItem',  
        align: 'center',  
        format: 'p0',  
        width: '*'  
    }  
],  
formatItem: (s, e) => {  
    if (e.panel == s.cells && s.columns[e.col].header == 'formatItem') {  
        let value = s.getCellData(e.row, e.col, false);  
        let text =  s.getCellData(e.row, e.col, true);  
        e.cell.innerHTML = '<span class="change-' +  
            (value > 0 ? 'up' : 'down') + '">' +  
            text + '</span>'  
    }  
}, …  

formatItem 함수는 모든 셀이 렌더링될 때 호출됩니다. 셀이 헤더 셀이 아닌 데이터 셀인지의 여부와 헤더에 "formatItem"이 있는 열에 속하는지의 여부를 확인하여 시작합니다. 만약 셀이 헤더 셀이 아닌 데이터 셀이고, formatItem이 있는 열에 속해있다면, 그리드의 getCellData 메소드를 사용하여 셀의 로우 값과 형식이 지정된 텍스트를 가져와서 HTML을 빌드합니다.

이것은 잘 작동하지만 간단한 작업을 수행하기 위해서는 약 10 줄의 코드가 필요합니다.

이를 보다 간단하게 하기 위해, 최신 버전의 FlexGrid는 cellTemplate 속성을 Column 클래스에 추가합니다.

cellTemplate는 ICellTemplateContext의 매개 변수를 취하고 문자열을 반환하는 함수로 설정될 수 있습니다.

ICellTemplateContext의 매개 변수는 다음과 같은 속성을 포함합니다 :

예를 들어, 다음과 같이 "change" 셀을 렌더링할 수 있습니다.

{  
    binding: 'change',  
    header: 'cellTemplate fn',  
    align: 'center',  
    format: 'p0',  
    width: '*',  
    cellTemplate: (ctx: ICellTemplateContext) => {  
        return '<span class="change-' +  
            (ctx.value > 0 ? 'up' : 'down') + '">' + ctx.text + '</span>';  
        }  
    }  
} 

이것은 formatItem 이벤트를 사용하는 것보다 더 간결하고 체계적입니다. 변경 열에서 셀을 렌더링하는 데 사용되는 코드와 로직은 코드의 다른 곳에서 이벤트 처리기 내의 "if"문이 아니라 열 정의에 포함됩니다.

하지만 더 단순화 할 수 있습니다. cellTemplate 속성은 템플릿 문자 기능을 사용하여 템플릿 문자열로 설정 될 수 있습니다. 이 경우 사용자 정의 렌더링은 다음과 같습니다.

{  
    binding: 'change',  
    header: 'cellTemplate str',  
    align: 'center',  
    format: 'p0',  
    width: '*',  
    cellTemplate:  
        '<span class="change-${value > 0 ? "up" : "down"}">${text}</span>'  
}  

이렇게 해서, 처음엔 10줄의 코드로 시작해서 3줄로, 최종적으로는 1줄이 되었습니다!

템플릿 문자열이 어떻게 작은 따옴표가 있는 실제 템플릿 리터럴이 아닌 일반 문자열인지 확인해야 합니다. FlexGrid는 적절한 셀 내용 삽입 템플릿을 작성하고, 필요한 경우 이를 평가 합니다. 템플릿 문자열은 일반 문자열이므로 이 기능은 Internet Explorer에서도 작동합니다 (실제 템플릿 리터럴은 지원하지 않음).

구문은 JavaScript 템플릿 리터럴과 함께 사용되는 구문입니다. 평가 컨텍스트는 ICellTemplateContext에 의해 제공되므로 예제에 표시된대로 셀의 "값", "텍스트" 등을 사용할 수 있습니다.

이제 "change-up"및 "change-down" 셀의 모양을 정의하기 위해 CSS를 추가하기만 하면 됩니다.

change-up {  
    color: darkgreen;  
}  
    .change-up:before {  
        content: '\25b2 '; /* up triangle */  
    }  

.change-down {  
    color: darkred;  
}  
    .change-down:before {  
        content: '\25bc '; /* down triangle */  
    }  

결과는 다음과 같습니다.

cellTemplate 속성은 Angular, React 및 Vue용 Wijmo interop 모듈에 포함된 formatItem 이벤트 또는 프레임워크별 셀 템플릿만큼 강력하지 않습니다.

그러나 위의 예와 같이 이미지를 추가하거나 조건부 서식을 지정하는 것과 같이 간단한 작업이 필요한 경우에는 간단하고 좋은 선택이 될 수 있을 것입니다.