CellMaker가 포함된 FlexGrid 이미지 열
페이지 정보
작성자 MESCIUS 작성일 2020-03-31 00:00 조회 3,421회 댓글 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: [
// images
{
binding: 'img',
header: 'Images',
cssClass: 'cell-img',
cellTemplate: CellMaker.makeImage({
label: 'image for ${item.country}',
click: (e, ctx) => alert('Clicked ' + ctx.item.country)
})
}
]
});
이 코드는 열의 cellTemplate 속성을 CellMaker의 makeImage 메서드에서 제공하는 ICellTemplateFunction으로 설정합니다.
makeImage 메서드는 열 바인딩을 통해 이미지의 URL을 가져옵니다. 이미지 요소의 "alt" 속성에 적용되는 레이블 표현식을 설정하고 click 이벤트에 대한 핸들러를 지정할 수 있습니다.
결과는 다음과 같습니다.
FlexGrid 이미지 열 데모 :
댓글목록
등록된 댓글이 없습니다.