웹포넌트 그리드는, 그리드를 동적으로 제어 할 수 있는 풍부한 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);