CellMaker가 포함된 FlexGrid 별점 평가 열
페이지 정보
작성자 GrapeCity 작성일 2020-03-31 00:00 조회 3,949회 댓글 0건본문
관련링크
JavaScript 데이터 그리드에 별점 평가 열을 추가하는 쉬운 방법을 추가했습니다. 마지막 릴리스에서는 cellTemplate 속성을 FlexGrid의 Column 클래스에 추가했습니다. 이 속성을 통해 개발자는 템플릿 리터럴을 사용하여 셀에 대한 사용자 정의 컨텐츠를 정의할 수 있으며, 이는 많은 유연성을 제공합니다.
대부분의 경우 cellTemplate은 formatItem 이벤트 보다 간단하고 사용하기 쉽습니다 . 그러나 고객들 중 일부는 훨씬 더 관리하기 쉬운 것을 원했습니다.
그래서 GrapeCity 개발팀은 CellMaker라고 불리는 새로운 모듈을 구축하기 위해 cellTemplate 속성을 활용하기로 결정하였습니다. 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: [
// 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 메서드에서 제공하는 ICellTemplateFunction으로 설정합니다.
makeIRating 메서드는 열바인딩을 통해 현재 점수를 가져옵니다. 셀에 표시할 시작 횟수와 셀의 "arial-label "속성에 적용되는 label 표현식을 정의하는 range를 설정할 수 있습니다.
결과는 다음과 같습니다.
CSS를 사용하여 등급 셀의 모양을 사용자 정의 할 수 있습니다.
FlexGrid 별점 평가 열 데모 :
- FlexGrid 별점 평가 열 JavaScript 데모
- FlexGrid 별점 평가 열 Angualr 데모
- FlexGrid 별점 평가 열 React 데모
- FlexGrid 별점 평가 열 Vue 데모
댓글목록
등록된 댓글이 없습니다.