옵션

webPonent Grid 2.0  Options

 웹포넌트 그리드는 초기화시 그리드의 상태을 결정할 수 있는 몇가지 옵션이 있습니다.

js
var grid = webponent.grid.init(table, template, {
	// options...
});

15px2

그리드 옵션

width

@type {Number} 그리드 가로 길이를 설정할 수 있습니다.

height

@type {Number} 그리드의 세로 길이를 설정할 수 있습니다.

템플릿에 그리드의 width와 height를 지정하지 않고 초기화시 옵션으로 설정할 수 있습니다.

id

@type {String} 그리드에 id속성을 줄 수 있습니다.

classes

@type {String} 그리드에 클래스를 추가합니다.

rowRendered

@type {Function} 그리드의 하나의 로우가 랜더링된 후 발생하는 콜백입니다.

js
var grid = webponent.grid.init(table, template, {
 
	/**
	 * @param  {Node} row  현재 랜더링 되는 TR노드
	 * @param  {Map} data  현재 로우의 데이터
	 * @param  {Number} index 전체 로우에 대한 현재로우의 인덱스
	 */
	rowRendered : function (row, data, index ) {
 
	}
});

rowSelectable

@type {Boolean} 로우선택 UI를 활성화 시킬건지 결정합니다. 기본값는 false로 비활성화 되어 있습니다.

checkBox

@type {Object} 그리드에 체크박스 UI를 활성화 시킬건지 결정합니다. 기본값는 null입니다.

js
var grid = webponent.grid.init(table, template, {
	checkBox: {
		/**
	     * @param  {String} cellType 체크박스를 'td'노드안에다 랜더링할지 'th'노드안에다 렌더링할지 결정합니다.
	 	 */
		cellType: 'td',
		
		/**
	     * @param  {Number} cellWidth 체크박스가 들어가는 컬럼의 길이를 결정합니다.
	 	 */
		cellWidth: 70,
 
		/**
	     * @param  {String} align 체크박스가 들어가는 컬럼의 정렬을 결정합니다. 'left', 'center', 'right'중 하나를 넣을 수 있습니다.
	 	 */
		align: 'center'
	}
});

autoResizing

@type {Boolean} 브라우저가 리사이징될때 자동으로 resize API호출 여부를 결정합니다. 기본값은 true입니다.

virtualScrollDefaultHeight

 @type {Number} 그리드 템플릿에 그리드 높이값이 세팅되어있지 않은 상태에서 가상스크롤을 만들 때 자동으로 그리드에 세팅되는 높이값입니다. 기본값는 400입니다.

resizable

 @type {Boolean} 컬럼의 길이를 드래그로 바꿀수 있게 할수 있는가를 결정합니다. 기본값은 true입니다.

sortable

@type {Boolean} 그리드에 컬럼 소팅 UI를 넣을지를 결정 합니다. 기본값은 true입니다.

paging

@type {Object}  클라이언트 페이징을 활성화 할때 사용됩니다. 기본값는 null입니다.

js
var grid = webponent.grid.init(table, template, {
	paging : {
		/**
	     * @param  {Number} countPerPage 한페이지에 몇개의 로우를 표시할지 결정합니다.
	 	 */
		countPerPage : 10,
 
		/**
	     * @param  {Number} paginationCount 페이지를 표시하는 객체의 개수를 결정합니다.
	 	 */
		paginationCount : 5,
 
		/**
	     * @param  {String} freezeScrollerY 페이징모드로 표시할때 그리드 세로 스크롤바를 남겨둘지 선택합니다. 'hide'를 넣으면 숨겨집니다.
	 	 */
		freezeScrollerY : 'hide',
 
		/**
	     * @param  {Boolean} usingMarkUp 그리드 아랫부분에 페이징 UI를 표시할지 결정합니다. 기본값은 false로 표시되지 않습니다.
	 	 */
		usingMarkUp: true,
 
		/**
	     * @param  {String} animate 페이지가 전환될때 애니매이션을 추가 할 수 있습니다.
		 *							'basic'과 '3D'중에 선택 할 수 있습니다. 이 옵션을 주지 않으면 애니매이션이 일어나지 않습니다
	 	 */
		animate: 'basic'
	}
});

boostLoad

@type {Boolean} 초기 로딩속도를 빠르게 한다. 옵션을 킬 경우 numberOfBoostLoadRow에 지정된 갯수의 로우만큼이 먼저 캐싱되서 랜더링된다. 렌더링후 남은 로우를 캐싱하게 된다.

numberOfBoostLoadRow

@type {Number} BoostLoad시 캐싱을 해나가는 로우 개수

fixedScrollAdjustment

@type {Number} 틀고정 스크롤일때 마지막 공간이 너무 많이 빌 경우를 대비한 조절 값. 숫자만큼 컬럼의 마지막부터 숨겨지지 않는다.