이벤트

webPonent Grid 2.0  Events

 웹포넌트 그리드는 여러가지 상황에서 이벤트를 발생하고 있습니다. 그리드에 어떠한 변화가 일어나면 이벤트를 수신하여 여러가지 일을 할 수 있습니다.

jfx
var grid = webponent.grid.init(table, template);

// 이벤트 사용법
grid.on('eventName', callback);

 그럼 그리드가 어떠한 이벤트를 발생하는지 알아봅시다.

그리드 이벤트

headerRendered

그리드의 헤더가 랜더링 됬을때 발생합니다.

jfx
var grid = webponent.grid.init(table, template);

 
/**
 * @param  {jQuery.Event} e    jQuery이벤트
 * @param  {Grid} grid 그리드 객체
 */
grid.on('headerRendered', function (e, grid) {
 
});

beforeRenderData

그리드안에 로우가 렌더링되기 전에 발생합니다.

jfx
var grid = webponent.grid.init(table, template);

 
/**
 * @param  {jQuery.Event} e    jQuery이벤트
 * @param  {Grid} grid 그리드 객체
 */
grid.on('beforeRenderData', function (e, grid) {
 
});

dataRendered

그리드안에 로우가 렌더링된 후 발생 합니다.

jfx
var grid = webponent.grid.init(table, template);

 
/**
 * @param  {jQuery.Event} e    jQuery이벤트
 * @param  {Grid} grid 그리드 객체
 */
grid.on('dataRendered', function (e, grid) {
 
});

columnResized

컬럼의 width가 변경된 후 발생 합니다.

jfx
var grid = webponent.grid.init(table, template);

 
/**
 * @param  {jQuery.Event} e    jQuery이벤트
 * @param  {Grid} grid 그리드 객체
 * @param  {Object} column 리사이즈된 컬럼의 모델
 * @param  {Number} distance 컬럼리사이즈 UI(마우스 드래그)에 인해 컬럼의 길이가 바낀경우 그 거리
 */
grid.on('columnResized', function (e, grid, column, distance) {
 
});

rowRendered

그리드에 붙게될 로우가 생성된 후 발생합니다. OPTION의 rowRendered속성과 같은역활을 합니다.

jfx
var grid = webponent.grid.init(table, template);

 
/**
 * @param  {jQuery.Event} e    jQuery이벤트
 * @param  {Node} row      로우의 TR 노드
 * @param  {Object} data   로우를 구성하는 데이터
 * @param  {Number} index  전체 로우에 대한 인덱스
 */
grid.on('rowRendered', function (e, row, data, index) {
 
});

beforeAppendingRow

그리드의 appendRow를 호출하면 즉시 발생합니다.

jfx
var grid = webponent.grid.init(table, template);

 
/**
 * @param  {jQuery.Event} e    jQuery이벤트
 * @param  {Node} data      그리드에 추가되려는 데이터
 */
grid.on('beforeAppendingRow', function (e, data) {
 
});

rowAppended

그리드의 appendRow를 호출하고 모든 계산과, 렌더링이 끝난 후 발생하는 이벤트입니다.

jfx
var grid = webponent.grid.init(table, template);

 
/**
 * @param  {jQuery.Event} e    jQuery이벤트
 * @param  {Grid} grid 그리드 객체
 */
grid.on('rowAppended', function (e, grid) {
 
});

beforeCachingRow

그리드에 데이터가 들어오면 데이터를 기반으로 로우(TR) 노드를 생성해서 데이터모델, 로우 모델을 등록합니다.. 모델들을 등록하기 직전에 발생합니다.

jfx
var grid = webponent.grid.init(table, template);

 
/**
 * @param  {jQuery.Event} e    jQuery이벤트
 * @param  {Grid} grid 그리드 객체
 */
grid.on('beforeCachingRow', function (e, grid) {
 
});

rowCached

그리드에 데이터가 들어온후 로우모델, 데이터 모델등을 다 등록한 후 발생 합니다.

jfx
var grid = webponent.grid.init(table, template);

 
/**
 * @param  {jQuery.Event} e    jQuery이벤트
 * @param  {Grid} grid 그리드 객체
 */
grid.on('rowCached', function (e, grid) {
 
});

scroll

그리드의 스크롤을 움직일때 발생합니다.

jfx
var grid = webponent.grid.init(table, template);

 
/**
 * @param  {jQuery.Event} e    jQuery이벤트
 * @param  {Grid} grid 그리드 객체
 * @param  {Number} scrollTop 현재 그리드의 Y스크롤 위치
 * @param  {Number} scrollLeft 현재 그리드의 X스크롤 위치
 */
grid.on('scroll', function (e, grid, scrollTop, scrollLeft) {
 
});

resized

그리드의 width와 height가 변경되었을때 발생함

jfx
var grid = webponent.grid.init(table, template);

 
/**
 * @param  {jQuery.Event} e    jQuery이벤트
 * @param  {Grid} grid 그리드 객체
 * @param  {String | Number} width 그리드의 길이
 * @param  {Number} height 그리드의 높이
 */
grid.on('resized', function (e, grid, width, height) {
 
});