커스텀 렌더러는 그리드에서 제공되는 기본 렌더러가 아닌 사용자(개발자)가 직접 출력하고자 하는 내용을 작성할 수 있는 칼럼 렌더러입니다.
커스텀 렌더러는 칼럼의 renderer 에 "CustomRenderer" 를 type으로 지정하고, 실제 사용자가 작성한 js 파일을 jsClass 값으로 설정합니다.
커스텀 렌더러는 칼럼 레이아웃을 정의할 때 개별 칼럼의 renderer 속성 값인 Object 형태로 선언되어야 합니다.
칼럼의 renderer 속성의 type 으로만 설정 가능합니다.
아래는 설정 예제 입니다.
var columnLayout = [ {
...
}, {
dataField : "close",
headerText : "현재가",
width : 160,
renderer : {
type : "CustomRenderer", // 사용자 정의 렌더러 사용
jsClass : AUIGrid.MyStockRenderer // 작성한 사용자 정의 렌더러 JS
}
}];
커스텀 렌더러 사용에 대한 사전 스킬 요구 사항
커스텀 렌더러 사용의 장점
커스텀 렌더러 사용의 단점
| Name | Description |
|---|---|
|
aliasFunction
| Type : Function Version: 3.0.11 CustomRenderer 로 정의된 칼럼에서 엑셀, PDF 내보내기 할 때 재가공하여 값을 출력하고자 하는 경우 이 속성을 설정하십시오. aliasFunction 을 정의 하지 않은 경우, 기본값은 dataField 값 기준입니다. aliasFunction 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.
aliasFunction : function(rowIndex, columnIndex, value, headerText, item, dataField) {
var myString = "";
// 로직 처리
// 여기서 value 를 원하는 형태로 재가공 또는 포매팅하여 반환하십시오.
return myString;
}
함수의 반환값이 곧 엑셀, PDF 등 내보내기 값입니다. 기본값(default) :null;. |
|
extraProps
| Type : Object Version: 3.0.11 CustomRenderer 에 전달할 여분의 속성을 설정합니다. 여기서 작성한 extraProps 는 사용자가 작성한 클래스에서 this.columnData.renderer.extraProps 로 접근 가능합니다. 기본값(default) :null. |
|
jsClass
| Type : Class 사용자가 그리드의 렌더러로 작성한 클래스를 설정합니다. 작성한 클래스는 AUIGrid.Class 를 이용하여 AUIGrid.RendererBase 클래스를 확장(extend)하여 작성하여야 합니다. 기본값(default) :null. |