웹포넌트 그리드는, 그리드를 동적으로 제어 할 수 있는 풍부한 API를 제공합니다.
var grid = webponent.grid.init(table, template);
// 컬럼 길이 설정 API호출
grid.setColumnWidth('columnName', 150);/**
* 그리드를 구성하는 컬럼들의 이름을 반환한다.
*
* @return {Array<String>} 컬럼이름을 가지고 있는 배열
*/
grid.getColumnNames();/**
* 컬럼단위로 Dom을 추출한다
* @param {String} columnName 추출하구 싶은 컬럼이름
* @return {Array[Node]} td또는 th가 담긴 배열
*/
grid.getColumn(columnName);/**
* 컬럼단위로 Dom을 추출한다
* @param {String} columnName 추출하구 싶은 컬럼이름
* @return {Array[Node]} td또는 th가 담긴 배열
*/
grid.getColumn(columnName);/**
* 해당 컬럼의 정보를 가져온다.
* @param {[type]} columnName 정보를 가져오고싶은 컬럼의이름
* @return {Object} 컬럼정보
*/
grid.getColumnInfo (columnName);/**
* 컬럼의 길이를 세팅한다.
* @param {String} columnName 세팅할 컬럼의 이름
* @param {Number} width 세팅할 값
*/
grid.setColumnWidth(columnName, width);/**
* 컬럼을 보여주고 안보여주게 하는 세팅
* @param {String} columnName 세팅하고자 하는 컬럼의 name
* @param {Boolean} visibility true이면 보이고 false이면 숨긴다.
*/
grid.setColumnVisibility(columnName, visibility);/**
* 0부터 i번째 컬럼을 고정시킨다.
*
* @param {Number} i i번째 컬럼까지 고정이 된다.
*/
grid.setFixedColumn(idx);/** * Fixed된 컬럼을 해제시킨다. */ grid.destroyFixedColumn();
/**
* 소팅 API
* @param {String} columnName 소팅할 컬럼이름
* @param {String} type 오름차순이라면 'asc' 내림차순이라면 'desc'
*/
grid.sortColumn(columnName, type);/**
* 필터링하려는 컬럼명과 키워드를 입력해서
* 해당 키워드를 포함하는 row만 렌더링한다.
*
* @param {String} columnName 정렬하려는 컬럼명
* @param {String} keyword 검색 키워드
*/
grid.filterColumn(columnName, keyword);/** * 필터링을 해제하고 * 원래 소팅되어 있는 상태로 되돌린다. */ grid.resetFiltering();
/**
* 해당 이름을 가진 컬럼의 헤더 타이틀을 바꾼다.
* @param {String} columnName 바꾸고 싶은 컬럼 이름
* @param {String} newLabel 새로운 타이틀
*/
grid.setColumnLabel(columnName, newLabel);/**
* 해당 이름을 가진 컬럼의 헤더 타이틀을 가져온다
* @param {String} columnName 가져오고 싶은 컬럼 이름
*/
grid.(columnName);/**
* 두 컬럼의 위치를 변경 시킨다.
* @param {String} columnName 컬럼이름
* @param {String} anotherColumnName 컬럼이름
*/
grid.swapColumn(columnName, anotherColumnName);/**
* 배열에 나열돼어 있는 순서대로 컬럼 표시 순서를 바꾼다.
*
* @param {Array<String>} columnNameArray 컬럼이름이 순서대로 들어간 배열
*/
grid.setColumnOrder(columnNameArray);/**
* 그리드의 컬럼을 그룹화 시켜 교대하며 visibility를 바꿔준다
*
* @param {Array<Array<String>>} group 그룹화 시킬 컬럼명으로 이루어진 배열
*/
grid.groupColumns(group);/**
* 그리드에 로우를 append한다.
*
* @param {Array<Map>|Array<Array>|Node} row 추가하려는 row
*/
grid.appendRow(row);/**
* 그리드에 로우를 prepend한다.
*
* @param {Array<Map>|Array<Array>|Node} row 추가하려는 row
*/
grid.prependRow(row);/**
* 그리드에서 로우가 담긴 배열을 가저온다
* 아무인자도 넘겨주지 않으면 모든 로우를
* 첫번째 인자만 넘기면 해당 인덱스의 로우를
* 첫번째와 두번째 둘다 넘기면 해당 범위의 로우를 가저온다.
* @param {undefined | Number} start 첫번째 인자
* @param {undefined | Number} end 두번째 인자
* @return {Array<Node>} TR노드가 담긴 배열
*/
grid.getRow(start, end);/**
* 그리드에서 특정 또는 전체 로우를 지운다.
* 아무 인자도 전해주지 않으면 전체 로우를 지운다.
*
* @param {Node|Array<Node>|Number} rowOrStart [description]
* @param {Number} end 지우고 싶은 row의 끝 인덱스
*/
grid.removeRow(rowOrStart, end);/**
* 두개의 로우의 순서를 바꾼다.
* @param {Number} movingRowIdx 로우1
* @param {Number} targetRowIdx 로우2
*/
grid.swapRow(movingRowIdx, targetRowIdx);/**
* 원하는 Row를 선택한다.
* @param {Array[Number]} row index가 담긴 배열
*
*/
grid.selectRow( param );/**
* 선택된 Row를 추출한다.
*
* @return {Array[Node]} tr이 담긴 배열
*/
grid.getSelectedRow();/**
* 선택된 Row의 Data를 추출한다
*
* @return {Array[Node]} Data가 담긴 배열
*/
grid.getSelectedRowData();/**
* 원하는 Row의 checkbox를 선택한다.
* @param {Number | Array[Number] | Node | Array[Node]} row index가 담긴 배열
*
*/
grid.checkRow( param );/**
* CheckBox가 선택된 Row단위로 Dom을 추출한다
*
* @return {Array[Node]} tr이 담긴 배열
*/
grid.getCheckedRow();/**
* CheckBox가 선택된 Row단위로 Data를 추출한다
*
* @return {Array[Node]} Data가 담긴 배열
*/
grid.getCheckedRowData();/**
* 전체 row, column에 대해 필터링 한다.
*
* @param {String} keyword 검색 키워드 아무것도 넣어주지 않으면 필터링이 리셋된다.
*/
grid.search(keyword);/**
* 그리드에서 데이터배열을 가저온다
* 아무인자도 넘겨주지 않으면 모든 데이터를
* 첫번째 인자만 넘기면 해당 인덱스의 데이터를
* 첫번째와 두번째 둘다 넘기면 해당 범위의 데이터를 가저온다.
* @param {undefined | Number} start 첫번째 인자
* @param {undefined | Number} end 두번째 인자
* @return {Array<Map>} 데이터가 담긴 배열
*/
grid.getData(start, end);/**
* 그리드 내부 이벤트(grid.event)를 연결
* @param {String} eventName 이벤트명
* @param {Function} callback 콜백
*/
grid.on(eventName, callback);/**
* 그리드의 높이를 설정한다.
* @param {Number} height 설정하고 싶은 높이
*/
grid.setGridHeight(height);/**
* 그리드의 넗이를 설정한다.
* @param {Number} width 설정하고싶은 넓이
*/
grid.setGridWidth(width);/** * 그리드를 사고있는 wrapper의 길이가 변경됬을때 * 호출하여 그리드 레이아웃을 맞춰준다. */ grid.resize();
/** * 그리드에서 모든 스크롤을 제거해준다. * 소팅과 리사이징 이벤트도 지워준다. */ grid.releaseScroll();
/** * 그리드를 새로 렌더링 한다. * 이경우 헤더뿐만아니라 데이터도 새로 캐싱해 그려준다. */ grid.rerender();
/**
* 해당 위치로 그리드를 세로로 스크롤 시킨다
* @param {Number} position 위치값
*/
grid.scrollTop(position);/**
* 해당 위치로 그리드를 가로로 스크롤 시킨다
* @param {Number} position 위치값
*/
grid.scrollLeft(position);/** * 그리드를 완전히 제거한다. */ grid.destroy();
/**
* 이동할 페이지의 인덱스를 찾아 렌더링한다.
* @param {Number} 이동할 페이지 index
*/
grid.renderingPage(idx);/** * Paging 을 사용 할 경우 페이지 리스트의 마크업 및 이벤트를 설정한다. */ grid.makePageList();
/**
* 페이징을 위한 레이아웃 설정
* @param {Object} 페이징 option
*/
grid.setPageLayout(option);