GS인증 AUIGrid v3.0.15

사용자 정의 렌더러(CustomRenderer)는 그리드에서 제공되는 칼럼 렌더러가 아닌 사용자(개발자)가 직접 출력하고자 하는 칼럼 렌더러를 작성하는 렌더러입니다.

사용자 렌더러 작성에는 기본 이상의 자바스크립트, CSS, HTML 스킬이 필요합니다.

심화된 개발자의 심화된 렌더링을 위해 제공하는 기능으로 사용자 정의 렌더러는 사용자(개발자)가 직접 개발하는 영역입니다.

이에 대한 기술지원은 제공하지 않으니 참고하여 해당 기능 개발/이용하시길 바랍니다. 전적으로 개발자 영역입니다.

사용자 렌더러 작성은 AUIGrid.RendererBase 클래스를 확장(extend)하여 작성합니다.

(사용자 렌더러와 에디트렌더러는 각각 AUIGrid.RendererBase 와 AUIGrid.EditRendererBase 클래스를 확장하니 혼동하지 않도록 주의하십시오.)

사용자 정의 렌더러 사용의 장점

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

사용자 정의 렌더러 사용의 단점

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

다음은 실제로 작성한 사용자 렌더러 예제입니다.

/*
 * AUIGrid 사용자 정의 렌더러
 */
window.AUIGrid.MyStockRenderer = window.AUIGrid.Class({
	
	/****************************************************************
	 * 
	 * Overriden Properties
	 * 
	 ****************************************************************/
	
	/* 생성될 HTML Tag 명 */
	tagName : "div",
	
	/* CSS 스타일 클래스 */
	cssClass : "aui-grid-renderer-base aui-grid-renderer-custom",
	
	/* 행 아이템 */
	data : null,
	
	/* 렌더러의 칼럼 레이아웃 데이터 */
	columnData : null,
	
	/* 칼럼 인덱스 */
	columnIndex : -1,
	
	/* 행 인덱스 */
	rowIndex : -1,
	
	/* 헤더 텍스트 */
	headerText : "",
	
	/* 데이터 필드명 */
	dataField : "",
	
	/* 초기화 여부 */
	initialized : false,
	
	/****************************************************************
	 * 
	 * Private Properties
	 * 
	 * Rule : Private Properties 는 반드시 __ 로 시작하십시오
	 * 즉, 사용자가 추가하는 속성, 메소드는 __ 로 시작하십시오.
	 * 
	 ****************************************************************/
	
	/* 사용자가 작성할 엘리먼트*/
	__childEle : null,
	
	/* 사용자가 작성할 엘리먼트*/
	__childEle2 : null,
	
	/* 사용자가 작성할 엘리먼트*/
	__childEle3 : null,
	
	/* 현재 렌더링되는 주체의 그리드 pid. 그리드 생성 후 주입됨 */
	pid: '',
	
	/****************************************************************
	 * 
	 * Overriden Methods
	 * 
	 ****************************************************************/
	
	/*
	 * @overrdie public update
	 * 
	 * 그리드에 의해 호출되는 메소드이며 빈번히 호출됩니다.
	 * 이 메소드에서 DOM 검색이나, jQuery 객체 생성 등은 자제하십시오.
	 * DOM 검색이나 jQuery 객체는 initialize() 메소드에서 하십시오.
	 */
	update : function() {
		
		// 행 아이템
		var data = this.data;
		
		if(!data) return;
		
		// 최초 1회만 실행해야 할 것들.
		if(!this.initialized) {
			this.initialize();
		}
		
		var ele = this.element;
		var varsEle = this.__childEle2;
		
		// 등락 대비값
		var vars = Number(data.vars);
		
		if(vars > 0) {
			this.__setStyle(ele, "color",  "#D90400" );
			this.__setStyle(varsEle, "background", "url('./assets/ico_up.gif') 0% 50% no-repeat");
		} else if(vars < 0) {
			this.__setStyle(ele, "color",  "#005DDE" );
			this.__setStyle(varsEle, "background", "url('./assets/ico_down.gif') 0% 50% no-repeat");
		} else {
			this.__setStyle(ele, "color",  "#000000" );
			this.__setStyle(varsEle, "background", "transparent");
		}
		
		// 실제 element 에 값 출력
		this.__displayMyValues();
	},
	
	/*
	 * @overrdie public destroy
	 * 
	 * 여기서 해제할 것 모두 해제 하십시오.
	 * 메모리 누수를 유발하는 코드들을 모두 해제 하십시오.
	 */
	destroy : function(unload) {
		
		this.__childEle = null;
		this.__childEle2 = null;
		this.__childEle3 = null;
		
		// 필수 : 반드시 아래 코드는 추가 해야 합니다.
		this.$super.destroy(unload);
	},
	
	/*
	 * @overrdie public destroy
	 * 
	 * 최초 1번만 실행되므로 설정할 사항이 있으면 여기서 설정하십시오.
	 */
	initialize : function() {
		
		if(this.initialized)
			return;
		
		this.initialized = true;
		
		this.setHeight(this.rowHeight - 2);
		
		// 렌더러 자체 HTML Element(Div)
		var element = this.element;
		// 중요!!!! child 들이 absolute 포지션을 갖기 때문에 relative 해줘야 함.
		this.__setStyle(element, "position", "relative" );
		
		var c1 = this.__childEle = document.createElement("div");
		c1.className = "my-child1";
		
		var c2 = this.__childEle2 = document.createElement("div");
		c2.className = "my-child2";
		
		var c3 = this.__childEle3 = document.createElement("div");
		c3.className = "my-child3";
		
		element.appendChild(c1);
		element.appendChild(c2);
		element.appendChild(c3);
		
		// IE 메모리 누수 방지
		c1 = c2 = c3 = null;
	},
	
	/****************************************************************
	 * 
	 * Private Methods
	 * 
	 * Rule : Private Methods 는 반드시 __ 로 시작하십시오
	 * 즉, 사용자가 추가하는 속성, 메소드는 __ 로 시작하십시오.
	 * 
	 ****************************************************************/
	
	/* 값을 실제로 element 에 출력함*/
	__displayMyValues : function() {
		var el, ownValue;
		if(this.data) {
			
			//-- 종가 출력
			el = this.__childEle;
			ownValue = this.data.close;
			el.textContent != null ? el.textContent = ownValue : el.innerText = ownValue;
			
			//-- 대비값 퍼센티지
			el = this.__childEle2;
			ownValue = this.data.vars + "%";
			el.textContent != null ? el.textContent = ownValue : el.innerText = ownValue;
			
			//-- 대비값 퍼센티지
			el = this.__childEle3;
			ownValue = this.data.gap;
			el.textContent != null ? el.textContent = ownValue : el.innerText = ownValue;
		}
		el = null;
	},
	
	/* element (엘리먼트) 에 styles 을 설정합니다. */
	__setStyle : function(element, name, value) {
		element.style[name] = value;
	}
	
}).extend(window.AUIGrid.RendererBase);