API

webPonent Grid 2.0  APIs

 웹포넌트 그리드는, 그리드를 동적으로 제어 할 수 있는 풍부한 API를 제공합니다.

jfx
var grid = webponent.grid.init(table, template);
 
// 컬럼 길이 설정 API호출
grid.setColumnWidth('columnName', 150);

15px2

그리드 APIs

컬럼에 관한 API

getColumnNames

jfx
/**
 * 그리드를 구성하는 컬럼들의 이름을 반환한다.
 * 
 * @return {Array<String>} 컬럼이름을 가지고 있는 배열
 */
grid.getColumnNames();

getColumn

jfx
/**
 * 컬럼단위로 Dom을 추출한다
 * @param  {String} columnName 추출하구 싶은 컬럼이름
 * @return {Array[Node]}            td또는 th가 담긴 배열
 */
grid.getColumn(columnName);

getColumnData

jfx
/**
 * 컬럼단위로 Dom을 추출한다
 * @param  {String} columnName 추출하구 싶은 컬럼이름
 * @return {Array[Node]}            td또는 th가 담긴 배열
 */
grid.getColumn(columnName);

getColumnInfo

jfx
/**
 * 해당 컬럼의 정보를 가져온다.
 * @param  {[type]} columnName 정보를 가져오고싶은 컬럼의이름
 * @return {Object}            컬럼정보
 */
grid.getColumnInfo (columnName);

setColumnWidth

jfx
/**
 * 컬럼의 길이를 세팅한다.
 * @param {String} columnName 세팅할 컬럼의 이름
 * @param {Number} width      세팅할 값
 */
grid.setColumnWidth(columnName, width);

setColumnVisibility

jfx
/**
 * 컬럼을 보여주고 안보여주게 하는 세팅
 * @param {String} columnName 세팅하고자 하는 컬럼의 name
 * @param {Boolean} visibility true이면 보이고 false이면 숨긴다.
 */
grid.setColumnVisibility(columnName, visibility);

setFixedColumn

jfx
/**
 * 0부터 i번째 컬럼을 고정시킨다.
 *
 * @param {Number} i i번째 컬럼까지 고정이 된다.
 */
grid.setFixedColumn(idx);

destroyFixedColumn

jfx
/**
 * Fixed된 컬럼을 해제시킨다.
 */
grid.destroyFixedColumn();

sortColumn

jfx
/**
 * 소팅 API
 * @param  {String} columnName 소팅할 컬럼이름
 * @param  {String} type       오름차순이라면 'asc' 내림차순이라면 'desc'
 */
grid.sortColumn(columnName, type);

filterColumn

jfx
/**
 * 필터링하려는 컬럼명과 키워드를 입력해서
 * 해당 키워드를 포함하는 row만 렌더링한다.
 *
 * @param  {String} columnName 정렬하려는 컬럼명
 * @param  {String} keyword    검색 키워드
 */
grid.filterColumn(columnName, keyword);

resetFiltering

jfx
/**
 * 필터링을 해제하고
 * 원래 소팅되어 있는 상태로 되돌린다.
 */
grid.resetFiltering();

setColumnLabel

jfx
/**
 * 해당 이름을 가진 컬럼의 헤더 타이틀을 바꾼다.
 * @param {String} columnName 바꾸고 싶은 컬럼 이름
 * @param {String} newLabel   새로운 타이틀
 */
grid.setColumnLabel(columnName, newLabel);

getColumnLabel

jfx
/**
 * 해당 이름을 가진 컬럼의 헤더 타이틀을 가져온다
 * @param {String} columnName 가져오고 싶은 컬럼 이름
 */
grid.(columnName);

swapColumn

jfx
/**
 * 두 컬럼의 위치를 변경 시킨다.
 * @param  {String} columnName        컬럼이름
 * @param  {String} anotherColumnName 컬럼이름
 */
grid.swapColumn(columnName, anotherColumnName);

setColumnOrder

jfx
/**
 * 배열에 나열돼어 있는 순서대로 컬럼 표시 순서를 바꾼다.
 * 
 * @param {Array<String>} columnNameArray 컬럼이름이 순서대로 들어간 배열
 */
grid.setColumnOrder(columnNameArray);

groupColumns

jfx
/**
 * 그리드의 컬럼을 그룹화 시켜 교대하며 visibility를 바꿔준다
 * 
 * @param  {Array<Array<String>>} group 그룹화 시킬 컬럼명으로 이루어진 배열
 */
grid.groupColumns(group);

로우에 관한 API

appendRow

jfx
/**
 * 그리드에 로우를 append한다.
 *
 * @param {Array<Map>|Array<Array>|Node} row 추가하려는 row
 */
grid.appendRow(row);

prependRow

jfx
/**
 * 그리드에 로우를 prepend한다.
 *
 * @param {Array<Map>|Array<Array>|Node} row 추가하려는 row
 */
grid.prependRow(row);

getRow

jfx
/**
 * 그리드에서 로우가 담긴 배열을 가저온다
 * 아무인자도 넘겨주지 않으면 모든 로우를
 * 첫번째 인자만 넘기면 해당 인덱스의 로우를
 * 첫번째와 두번째 둘다 넘기면 해당 범위의 로우를 가저온다.
 * @param  {undefined | Number} start 첫번째 인자
 * @param  {undefined | Number} end   두번째 인자
 * @return {Array<Node>}      TR노드가 담긴 배열
 */
grid.getRow(start, end);

removeRow

jfx
/**
 * 그리드에서 특정 또는 전체 로우를 지운다.
 * 아무 인자도 전해주지 않으면 전체 로우를 지운다.
 *
 * @param  {Node|Array<Node>|Number} rowOrStart [description]
 * @param  {Number} end 지우고 싶은 row의 끝 인덱스
 */
grid.removeRow(rowOrStart, end);

swapRow

jfx
/**
 * 두개의 로우의 순서를 바꾼다.
 * @param  {Number} movingRowIdx 로우1
 * @param  {Number} targetRowIdx 로우2
 */
grid.swapRow(movingRowIdx, targetRowIdx);

selectRow

jfx
/**
 * 원하는 Row를 선택한다.
 * @param  {Array[Number]} row index가 담긴 배열
 *
 */
grid.selectRow( param );

getSelectedRow

jfx
/**
 * 선택된 Row를 추출한다.
 *
 * @return {Array[Node]}   tr이 담긴 배열
 */
grid.getSelectedRow();

getSelectedRowData

jfx
/**
 * 선택된 Row의 Data를 추출한다
 *
 * @return {Array[Node]}            Data가 담긴 배열
 */
grid.getSelectedRowData();

checkRow

jfx
/**
 * 원하는 Row의 checkbox를 선택한다.
 * @param  {Number | Array[Number] | Node | Array[Node]} row index가 담긴 배열
 *
 */
grid.checkRow( param );

getCheckedRow

jfx
/**
 * CheckBox가 선택된 Row단위로 Dom을 추출한다
 *
 * @return {Array[Node]}            tr이 담긴 배열
 */
grid.getCheckedRow();

getCheckedRowData

jfx
/**
 * CheckBox가 선택된 Row단위로 Data를 추출한다
 *
 * @return {Array[Node]}            Data가 담긴 배열
 */
grid.getCheckedRowData();

search

jfx
/**
 * 전체 row, column에 대해 필터링 한다.
 *
 * @param  {String} keyword 검색 키워드 아무것도 넣어주지 않으면 필터링이 리셋된다.
 */
grid.search(keyword);

그리드에 관한 API

getData

jfx
/**
 * 그리드에서 데이터배열을 가저온다
 * 아무인자도 넘겨주지 않으면 모든  데이터를
 * 첫번째 인자만 넘기면 해당 인덱스의  데이터를
 * 첫번째와 두번째 둘다 넘기면 해당 범위의  데이터를 가저온다.
 * @param  {undefined | Number} start 첫번째 인자
 * @param  {undefined | Number} end   두번째 인자
 * @return {Array<Map>}      데이터가 담긴 배열
 */
grid.getData(start, end);

on

jfx
/**
 * 그리드 내부 이벤트(grid.event)를 연결
 * @param  {String}   eventName 이벤트명
 * @param  {Function} callback  콜백
 */
grid.on(eventName, callback);

setGridHeight

jfx
/**
 * 그리드의 높이를 설정한다.
 * @param {Number} height 설정하고 싶은 높이
 */
grid.setGridHeight(height);

setGridWidth

jfx
/**
 * 그리드의 넗이를 설정한다.
 * @param {Number} width 설정하고싶은 넓이
 */
grid.setGridWidth(width);

resize

jfx
/**
 * 그리드를 사고있는 wrapper의 길이가 변경됬을때 
 * 호출하여 그리드 레이아웃을 맞춰준다.
 */
grid.resize();

releaseScroll

jfx
/**
 * 그리드에서 모든 스크롤을 제거해준다.
 * 소팅과 리사이징 이벤트도 지워준다.
 */
grid.releaseScroll();

rerender

jfx
/**
 * 그리드를 새로 렌더링 한다.
 * 이경우 헤더뿐만아니라 데이터도 새로 캐싱해 그려준다.
 */
grid.rerender();

scrollTop

jfx
/**
 * 해당 위치로 그리드를 세로로 스크롤 시킨다
 * @param  {Number} position 위치값
 */
grid.scrollTop(position);

scrollLeft

jfx
/**
 * 해당 위치로 그리드를 가로로 스크롤 시킨다
 * @param  {Number} position 위치값
 */
grid.scrollLeft(position);

destroy

jfx
/**
 * 그리드를 완전히 제거한다.
 */
grid.destroy();

페이징에 관한 API

renderingPage

jfx
/**
 * 이동할 페이지의 인덱스를 찾아 렌더링한다.
 * @param  {Number} 이동할 페이지 index
 */
grid.renderingPage(idx);

makePageList

jfx
/**
 * Paging 을 사용 할 경우 페이지 리스트의 마크업 및 이벤트를 설정한다.
 */
grid.makePageList();

setPageLayout

jfx
/**
 * 페이징을 위한 레이아웃 설정
 * @param {Object} 페이징 option
 */
grid.setPageLayout(option);