GS인증 AUIGrid v3.0.15

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

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

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

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

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