[Vue][AG-Grid] Grid-Properties

조준형·2021년 10월 4일
0

AG-Grid

목록 보기
3/9
post-thumbnail

📖 Grid Properties

https://www.ag-grid.com/vue-data-grid/grid-properties/

모든 Grid Properties들은 GridOptions 인터페이스를 통해 사용 가능.

이번 글은 공식문서를 보고 하나씩 정리해보려다가 종류가 되게 다양하고, 아직 어떤 Options가 자주쓰이고 중요한지 잘 몰라 타 블로그에서 작성된 글을 옮겼습니다.

추후에 사용해보면서 추가할 내용이 있다면 변경될 예정입니다.

또한, 전체를 가져온것이 아니기 때문에 다른 옵션들에 대한 점은 공식문서 참고!

참고 : https://eblo.tistory.com/32?category=713082

🌏 Grid Options

이름설명
columnDefs칼럼 정보정의된 칼럼 정보 넣어주어야함.
defaultColDef기본 정의공통 기본 정의
rowData[{ key : value}]그리드 데이터, json data를 넣어 주어야함.
rowSelectionsingle | multiplerow data를 선택하는 경우 옵션으로 하나만 선택하거나 복수개를 선택
enableColResize -> colResizeDefaulttrue | false칼럼 resize 허용 여부
enableSorting -> sortabletrue | false정렬 옵션 허용 여부
enableFilter -> filtertrue | false필터 옵션 허용 여부
enableRangeSelectiontrue | false정렬 기능 강제여부, true의 경우 정렬이 고정됨
범위 선택 활성화.
기본값 : false
suppressRowClickSelectiontrue | false선택 허용 여부.
행을 클릭할 때 행 선택이 발생하지 않습니다. 체크박스 선택만 원할 때 사용합니다
기본값 : false
animateRowstrue | false행 애니메이션의 활성화
기본값 : false
suppressHorizontalScrolltrue | false가로 스크롤 허용 여부, 자동 조정으로 되있다면 불필요
alwaysShowHorizontalScroll와 같이 사용하면 안됨.
기본값 : false
suppressMovableColumnstrue | falsetrue인 경우 열 이동을 억제함. => 열을 고정위치로 만듬
기본 값 : false
localeText{"key" : "value"}그리드 내에서 텍스트를 현지화하기 위한 키->값 쌍의 맵입니다.
데이터가 없는 경우 보여주는 사용자 메시지
{noRowsToShow: '조회 결과가 없습니다.'}
getRowStyle -> rowStyle스타일 지정모든 행에 적용할 스타일 속성
key(style name) value(style value)의 객체로 설정됨.
{"textAlign": "center", "backgroundColor":"#f4f4f4"}
onGridReady
여기서 부터 event값인 아이들은 grid Event.
eventjavascript의 onload와 유사.
ready이 후 필요한 이벤트를 삽입

보통 그리드 자동 사이즈등을 지정
<ag-grid-vue

@grid-ready="onGridReady">
onGridReady:function(event){
event.api.sizeColumnsToFit();
}
onGridSizeChangedevent창 크기가 변경 되었을 때 이벤트
onGridSizeChanged: function(event){
event.api.sizeColumnsToFit();
}
onCellEditingStartedeventcell편집을 시작할 때 (편집 허용인 컬럼을 더블 클릭할 때) 발생하는 이벤트
onCellEditingStoppedeventcell 편집을 종료할 때 (다른 컬럼으로 이동)발생하는 이벤트
데이터 수정 시 값을 재계산 하거나 해당 정보를 별도 관리할 때 이용하는 이벤트로 매우 중요 + 자주 사용
onCellClickedeventcell을 클릭하는 경우 발생하는 이벤트
모달 팝업을 띄우거나 다른 페이지로 이동하거나 클릭시 무언가를 처리해야하는 경우 사용
onRowClickedeventRow Click하는 경우 발생하는 이벤트, 모달 팝업을 띄우거나 다른페이지로 이동하거나 클릭시 무언가를 처리해야하는 경우 사용
isRowSelectableevent특정 Row는 조건에 따라 선택 / 클릭이 안되게 하고 싶은 경우 사용
onSelectionChangedevenonRowClicked와 유사.
Row가 선택이 바뀌는 경우 발생하는 이벤트
onSortChangedevent정렬이 변경되었을 때 발생하는 이벤트
외부에서 값을 새로 가져오거나 정렬 조건에 따른 로직을 삽입가능
onCellValueChangedeventcell의 값이 변경되었을 때 발생하는 이벤트.
데이터 편집에서 수정이 발생하면 그에 따른 처리를 할 때 이용할 수 있다.
getRowNodeIdeventRowNodeId를 가져오는 함수
값을 지정해 두면 그리드에서 데이터를 여기서 정의한 값으로 접근가능

row nodeId설정
getRowNodeId : function(data){
return data.goodCd;
}

데이터 접근
var rowNode = gridOptions.api.getRowNodeId(selectedRow.goodCd);
componentsevent컴포넌트 정의
debugtrue | false디버그
setPinnedTopRowDatadata그리드 Top에 데이터 고정시키기
setPinnedBottomRowDatadata그리드 Bottom에 데이터 고정시키기

🌏 Example

var gridOptions = {
    columnDefs: columnDefs,
    rowData: students,
    defaultColDef: {
        editable: true,
        width: 100
    },
    rowSelection: 'single', /* 'single' or 'multiple',*/
    enableColResize: true,
    enableSorting: true,
    enableFilter: true,
    enableRangeSelection: true,
    suppressRowClickSelection: false,
    animateRows: true,
    suppressHorizontalScroll: true,
    localeText: {noRowsToShow: '조회 결과가 없습니다.'},
    getRowStyle: function (param) {
        if (param.node.rowPinned) {
            return {'font-weight': 'bold', background: '#dddddd'};
        }
        return {'text-align': 'center'};
    },
    getRowHeight: function(param) {
        if (param.node.rowPinned) {
            return 30;
        }
        return 24;
    },
    // GRID READY 이벤트, 사이즈 자동조정 
    onGridReady: function (event) {
        event.api.sizeColumnsToFit();
    },
    // 창 크기 변경 되었을 때 이벤트 
    onGridSizeChanged: function(event) {
        event.api.sizeColumnsToFit();
    },
    onRowEditingStarted: function (event) {
        console.log('never called - not doing row editing');
    },
    onRowEditingStopped: function (event) {
        console.log('never called - not doing row editing');
    },
    onCellEditingStarted: function (event) {
        console.log('cellEditingStarted');
    },
    onCellEditingStopped: function (event) {
        console.log('cellEditingStopped');
    },    
    onRowClicked : function (event){
        console.log('onRowClicked');
    },
    onCellClicked : function (event){
        console.log('onCellClicked');
    },
    isRowSelectable : function(event){
        console.log('isRowSelectable');
        return true;
    },
    onSelectionChanged : function (event) {
        console.log('onSelectionChanged');
    },
    onSortChanged: function (event) {
        console.log('onSortChanged');
    },
    onCellValueChanged: function (event) {
        console.log('onCellValueChanged');
    },
    getRowNodeId : function(data) {
        return null; 
    },
    // 리드 상단 고정 
    setPinnedTopRowData: function(data) {
        return null; 
    },
    // 그리드 하단 고정 
    setPinnedBottomRowData: function(data) {
        return null; 
    },
    components:{
        numericCellEditor: NumericCellEditor,
        moodEditor: MoodEditor
    },
    debug: false
};

📘 참고

https://www.ag-grid.com/vue-data-grid/grid-properties/

https://eblo.tistory.com/32?category=713082

profile
깃허브 : github.com/JuneHyung

0개의 댓글