GS인증 AUIGrid v3.0.16

데이터 값이 HTML 인 경우 그대로 출력하며, 사용자가 임의로 labelFunction 에서 HTML 템플릿 리터럴을 작성할 수 있습니다.(innerHTML 처리)

// HTML 형식의 템플릿을 작성하여 반환하면 그대로 그리드의 셀로 출력됩니다.
labelFunction: function (rowIndex, columnIndex, value, headerText, item) { // HTML 템플릿 작성
	return (`
		<div class="my_div">
			<span class="my_div_text_box">${value}</span>
			<span class="my_div_btn" onclick="myApplyBtnClick(${rowIndex}, event)">적용</span>
			<span class="my_div_btn2" onclick="myPopupBtnClick(${rowIndex}, event)">팝업</span>
		</div>
	`);
템플릿 렌더러에서 수정가능한 태그를 어떻게 작성하는지를 보여주는 데모입니다.

템플릿 렌더러로 작성된 데이터 수정도 Undo(Ctrl+Z), Redo(Ctrl+Y) 를 지원합니다.

HTML 템플릿은 행 높이를 벗어날 수 없습니다. 예를 들어 br 태그로 개행을 한다해도 지정된 행 높이를 벗어 날 수 없습니다.(그리드의 rowHeight 속성으로 높이를 크게 하십시오.)

■ 단점 : 사용자가 HTML 템플릿을 작성하였기 때문에 엑셀 저장, 그룹핑, 필터링, 정렬 등에 제약을 받습니다. (dataField 값 기준으로 처리됩니다.)