AG-GRID GRID OPTION

Attribute	Value	Description
columnDefs	칼럼정보	정의된 칼럼 정보를 넣어줘야 합니다.
rowData	[{key:value]}	그리드 데이터, json data를 넣어 줘야 합니다.
defaultColDef	기본정의	공통 기본 정의
rowSelection	'single' or 'multiple'	row data를 선택하는 경우의 옵션으로 하나만 선택하거나 복수개를 선택할 수 있습니다.
enableColResize	true | false	칼럼 리사이즈 허용 여부
enableSorting	true | false	정렬 옵션 허용 여부
enableFilter	true | false	필터 옵션 허용 여부
enableRangeSelection	true | false	정렬 기능 강제여부, true인 경우 정렬이 고정이 된다.
suppressRowClickSelection	true | false	선택 허용 여부
animateRows	true | false
suppressHorizontalScroll	true | false	가로 스크롤 허용 여부, 자동 조정으로 되어 있으면 불필요.
suppressMovableColumns	true | false	헤더 고정시키기
localeText	{"key":"value"}	데이터가 없는 경우 보여 주는 사용자 메시지 {noRowsToShow: '조회 결과가 없습니다.'}
getRowStyle	스타일지정	row 스타일 지정 e.g. {"textAlign":"center", "backgroundColor":"#f4f4f4"}
onGridReady	event	(중요) javascript의 onload 이벤트와 유사한 것으로 ready 이 후 필요한 이벤트를 삽입한다. 보통 그리드 자동 사이즈 등을 지정한다.   onGridReady: function (event) {     event.api.sizeColumnsToFit(); },
onGridSizeChanged	event	(중요)창 크기가 변경되었을 때 이벤트  onGridSizeChanged: function(event) { event.api.sizeColumnsToFit(); },
onCellEditingStarted	event	(중요)cell 편집을 시작할 때(편집 허용인 칼럼을 더블 클릭할 때) 발생하는 이벤트.
onCellEditingStopped	event	(중요)cell 편집을 종료할 때(다른 칼럼으로 이동) 발생하는 이벤트. 데이터 수정 시 값을 재 계산 하거나 해당 정보를 별도 관리 할때 이용하는 이벤트로 매우 중요하고 자주 사용이 된다.
onCellClicked	event	(중요)Cell Click 하는 경우 발생하는 이벤트, 모달 팝업을 띄우거나 다른 페이지로 이동하거나 클릭시 무언가를 처리해야 하는 경우 사용된다
onRowClicked	event	(중요)Row Click 하는 경우 발생하는 이벤트, 모달 팝업을 띄우거나 다른 페이지로 이동하거나 클릭시 무언가를 처리해야 하는 경우 사용된다.
isRowSelectable	event	(중요)특정 Row는 조건에 따라 선택/클릭이 안되게 하고 싶은 경우 사용.
onSelectionChanged	event	(중요) onRowClicked 이벤트와 유사하다. Row가 선택이 바뀌는 경우 발생하는 이벤트.
onSortChanged	event	(중요) 정렬이 변경되었을 때 발생하는 이벤트. 외부에서 값을 새로 가져오거나 정렬 조건에 따른 로직을 삽입할 수 있다.
onCellValueChanged	event	(중요) Cell의 값이 변경 되었을 때 발생하는 이벤트.  데이터 편집에서 수정이 발생하면 그에 따른 처리를 할 때 이용할 수 있다.
getRowNodeId	event	(중요) RowNodeId를 가져오는 함수로 값을 지정해 두면 그리드에서 데이터를 여기서 정의한 값으로 접근할 수 있다. row nodeId 설정 예제  getRowNodeId : function(data) {      return data.goodCd;  } 데이터 접근 예제 var rowNode = gridOptions.api.getRowNode(selectedRow.goodCd);
components	event	컴포넌트 정의
debug	true | false	디버그
setPinnedTopRowData	data	그리드 Top에 데이터 고정 시키기
setPinnedBottomRowData	data	그리드 Bottom에 데이터 고정 시키기

 

해당 옵션들 말고도 더 많은 옵션들이 있다. 여기에 없거나 궁금한게 있다면 홈페이지 접속을 추천한다.

해당 옵션들의 예제를 보겠다ㅋ

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
};

 

개발 하는데 도움이 되길 ... 어차피 혼자 보는 사이트라서 ㅋㅋㅋ

다른 방법 추가 합니다.

		<div style="float: left;width: 14%;height:91%;border: 1px solid black;margin-left: 5px;">
          <ag-grid-vue style="width:100%; height:100%" class="ag-theme-balham"
                       :gridOptions="gridOptions"
                       :columnDefs="columnDefs"
                       :rowData="fullList"
                       @grid-read="onGridReady"
                       @cellClicked="getSelectedRows">
          </ag-grid-vue>
        </div>
        
        <script>
          methods: {
              onGridReady (params) {
                this.gridApi = params.api
                this.columnApi = params.columnApi
              },
              getSelectedRows (params) {
                this.selectRow = params.rowIndex
                this.canvasView()
              },
          }
        </script>