FlexGrid의 CellMaker가 포함된 버튼 열

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

대부분, cellTemplate은 formatItem 이벤트보다 더 간단하고 사용하기 쉽습니다. 하지만 일부 저희 고객은 좀 더 다루기 쉬운 것을 원하셨기 때문에, 버튼이나 하이퍼링크와 같은 일반적인 간단한 셀을 만드는 것만을 원했다면 HTML을 작성할 필요가 없었을 것입니다.

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: [  

         // button with fixed text  
         {  
             binding: 'country',  
             header: 'Custom Button',  
             width: 150,  
             cellTemplate: CellMaker.makeButton({  
                 text: '<b>${item.country}</b> Button',  
                 click: (e, ctx) => {  
                     alert('Clicked Button ' + ctx.item.country)  
                 }  
             })  
         },  
     ]  
 });

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

makeButton 메소드는 버튼에 대한 사용자 정의 텍스트와 클릭 이벤트에 대한 핸들러를 제공할 수 있는 옵션 매개변수를 사용합니다.

결과는 다음과 같습니다: