FlexGrid의 CellMaker을 사용한 하이퍼링크 열

JavaScript 데이터그리드에 하이퍼링크 열을 추가하는 쉬운 방법이 있습니다. 마지막 출시에서는 FlexGrid의 Column 클래스에 cellTemplate 속성을 추가했습니다. 이 속성을 통해 개발자는 템플릿 리터럴을 사용하여 셀에 대한 사용자정의 컨텐츠를 정의할 수 있으며, 이는 많은 유연성을 제공합니다.

대부분 cellTemplate은 formatItem 이벤트보다 더 간단하고 사용하기 쉽습니다. 그러나 일부 고객은 훨씬 더 관리하기 쉬운 것을 원했기 때문에, 버튼 및 하이퍼링크와 같은 일반적인 간단한 셀만 만들기를 원했다면 HTML을 작성할 필요가 없었을 것입니다.

이러한 고객의 소리를 반영하여 cellTemplate 속성을 활용한 CellMaker라는 새 모듈을 구축하기로 결정했습니다. CellMaker 모듈은 하이퍼링크를 포함하여 여러 유형의 단순하고 유용한 셀 생성 메서드를 제공합니다.

CellMaker를 사용하여 FlexGrid에 하이퍼링크 열을 추가하는 방법을 살펴보겠습니다. 하이퍼링크 열을 생성하려면 다음과 같이 CellMaker 클래스를 사용하십시오:

 import { FlexGrid, ICellTemplateContext } from '@grapecity/wijmo.grid';  
 import { CellMaker } from '@grapecity/wijmo.grid.cellmaker';  

 let theGrid = new FlexGrid('#theGrid', {  
     showMarquee: true,  
     autoGenerateColumns: false,  
     columns: [  

         // link with custom text and bound href  
         {  
             header: 'Real Link',  
             binding: 'country',  
             cellTemplate: CellMaker.makeLink({  
                 text: 'Visit <b>${item.country}</b>',  
                 href: '${item.url}',  
                 attributes: {  
                     target: '_blank',  
                     rel: 'noopener noreferrer',  
                     tabIndex: -1  
                 }  
                 // no need for click handler, the link navigates automatically  
             })  
         }  
     ]  
 });

코드는 열의 cellTemplate 속성을 CellMaker의 makeLink 메서드에서 제공하는 ICellTemplateFunction으로 설정합니다.

makeLink 메서드에는 링크에 대한 사용자 정의 텍스트, 링크 타겟을 지정하는 hfef, 링크 속성을 제공할 수 있는 옵션 매개 변수가 사용됩니다. 또는 클릭 이벤트에 대한 핸들러를 지정할 수도 있습니다.

결과는 다음과 같이 나타납니다: