CustomRenderer

개발자가 직접 작성한 내용으로 셀을 표시하는 렌더러입니다.

커스텀 렌더러는 칼럼의 renderer 에 "CustomRenderer" 를 type으로 지정하고, 실제 사용자가 작성한 js 파일을 jsClass 값으로 설정합니다.

커스텀 렌더러는 칼럼 레이아웃을 정의할 때 개별 칼럼의 renderer 속성 값인 Object 형태로 선언되어야 합니다.

칼럼의 renderer 속성의 type 으로만 설정 가능합니다.

아래는 설정 예제 입니다.


const columnLayout = [{
...
}, {
     dataField : "close",
     headerText : "현재가",
     width : 160,
     renderer : {
          type : "CustomRenderer", // 사용자 정의 렌더러 사용
          jsClass : AUIGrid.MyStockRenderer // 작성한 사용자 정의 렌더러 JS
     }
}];

커스텀 렌더러 사용에 대한 사전 스킬 요구 사항

자바스크립트로 HTML 요소(Element)를 생성하고, 제어할 수 있는 스킬이 요구 됩니다.
자바스크립트로 DOM 에 접근하여 CSS 클래스 및 style 을 추가, 삭제 등 제어할 수 있는 스킬이 요구 됩니다.

커스텀 렌더러 사용의 장점

AUIGrid 에서 제공하는 렌더러의 한계를 넘어 원하는 형태로 그리드 출력이 가능합니다.
셀 또는 칼럼에 원하는 이벤트, 스타일 등 모든 행위를 사용자가 직접 컨트롤 할 수 있습니다.
자바스크립트로 원하는 렌더링을 작성하여 풍부한 정보 출력이 가능합니다.

커스텀 렌더러 사용의 단점

그리드에 출력된 형태 그대로 "엑셀로 저장" 을 할 수 없습니다.
그룹핑, 정렬, 필터링 기능 사용에 제한이 있습니다.

⚠️ 주의: CustomRenderer 에 대한 기술지원은 제공하지 않습니다. 해당 기능 개발/이용은 전적으로 숙련된 개발자의 영역입니다.

Name Description

Name	Description
aliasFunction	Type : Function Version: 3.0.11 사용자 정의 렌더러의 값을 Excel, PDF로 내보낼 때 사용할 표시 값을 가공하는 함수를 지정합니다. aliasFunction 을 정의 하지 않은 경우, 기본값은 dataField 값 기준입니다. aliasFunction 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다. rowIndex : 행 인덱스 columnIndex : 칼럼 인덱스 value : 원래 데이터의 해당 셀 값(value) headerText : 현재 칼럼의 헤더 텍스트 item : 해당 행에 출력되고 있는 행 아이템 객체 (Object) dataField : 행 아이템에서 현재 칼럼이 출력되고 있는 데이터의 KeyField `aliasFunction : function(rowIndex, columnIndex, value, headerText, item, dataField) { const myString = ""; // 로직 처리 // 여기서 value 를 원하는 형태로 재가공 또는 포매팅하여 반환하십시오. return myString; }` 함수의 반환값이 곧 엑셀, PDF 등 내보내기 값입니다. 관련 데모 보기 기본값(default) : `null;`
extraProps	Type : Object Version: 3.0.11 사용자 정의 셀 렌더러에 전달할 추가 속성을 지정합니다. 여기서 작성한 extraProps 는 사용자가 작성한 클래스에서 this.columnData.renderer.extraProps 로 접근 가능합니다. 관련 데모 보기 기본값(default) : `null`
jsClass	Type : Class 셀 표시에 사용할 사용자 정의 렌더러 클래스를 지정합니다. 작성한 클래스는 AUIGrid.Class 를 이용하여 AUIGrid.RendererBase 클래스를 확장(extend)하여 작성하여야 합니다. 관련 내용 보기 기본값(default) : `null`

aliasFunction

Type : Function Version: 3.0.11

사용자 정의 렌더러의 값을 Excel, PDF로 내보낼 때 사용할 표시 값을 가공하는 함수를 지정합니다.

aliasFunction 을 정의 하지 않은 경우, 기본값은 dataField 값 기준입니다.

aliasFunction 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

rowIndex : 행 인덱스
columnIndex : 칼럼 인덱스
value : 원래 데이터의 해당 셀 값(value)
headerText : 현재 칼럼의 헤더 텍스트
item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)
dataField : 행 아이템에서 현재 칼럼이 출력되고 있는 데이터의 KeyField

aliasFunction : function(rowIndex, columnIndex, value, headerText, item, dataField) {
   const myString = "";
   // 로직 처리
   // 여기서 value 를 원하는 형태로 재가공 또는 포매팅하여 반환하십시오.
   return myString;
}

함수의 반환값이 곧 엑셀, PDF 등 내보내기 값입니다.