FlexGrid의 CellMaker을 사용한 별점(Star-Rating)열

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

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

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

CellMaker를 사용하여 FlexGrid에 별점(Star-Rating) 열을 추가하는 방법을 살펴보겠습니다. 평점 셀은 읽기 전용이거나 편집할 수 있으며, 이 경우 별표를 클릭하거나 키보드.별 크기조정(keyboard.star-resizing)을 사용하여 등급을 변경할 수 있습니다.

평점 열을 작성하려면, 다음과 같이 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: [  

         // rating (read-only)  
         {  
             isReadOnly: true,  
             binding: 'rating',  
             header: 'Rating (read-only)',  
             width: 220,  
             align: 'center',  
             cellTemplate: CellMaker.makeRating({  
                 range: [1,5],  
                 label: 'See Product Rating'  
             })  
         }  
     ]  
 });

코드는 열의 cellTemplate 속성을 CellMaker의 makeRating 메서드에서 제공하는 ICellTemplate 함수로 설정합니다.

makeRating 메서드는 열 바인딩에서 현재 평점을 가져옵니다. 셀에 표시할 별의 수와 셀의 "arial-label" 속성에 적용되는 라벨 식을 정의하는 범위를 설정할 수 있습니다.

결과는 다음과 같습니다: