AG-GRID 행 자동 조절 기능
1. 행 넓이 자동 조절 기능 : 열 개수에 맞춰 넓이 자동 조절
2. 행 높이 조절 기능 : 행 높이 설정
3. 여러 줄로 나타내기 기능 : 행 여러 줄로 나타내는 기능
행 넓이 자동 조절 기능 : 열 개수 넓이에 맞게 자동 조절 기능
- var gridOptions에 추가한다.
onGridReady: function (event) {
event.api.sizeColumnsToFit();
}
추가된 코드 부분
var gridOptions = {
defaultColDef: {
sortable: true,
resizable: true,
filter: true
},
columnDefs: columnDefs,
rowData: null,
onGridReady: function (event) {
event.api.sizeColumnsToFit();
}
};
행 높이 조절 기능
- var gridOptions에 추가한다.
* cf) 높이 조절 : return "28" 부분
getRowHeight: function(params) {
// assuming 50 characters per line, working how how many lines we need
return 28 * (Math.floor(params.data.model.length / 60) + 1);
}
추가한 코드 부분 모습 :
<style>
.cell-wrap {
white-space: normal !important;
}
</style>
<script charset="UTF-8">
var gridOptions = {
defaultColDef: {
sortable: true,
resizable: true,
filter: true,
autoHeight: true
},
columnDefs: columnDefs,
rowData: null,
onGridReady: function (event) {
event.api.sizeColumnsToFit();
},
getRowHeight: function(params) {
// assuming 50 characters per line, working how how many lines we need
return 28 * (Math.floor(params.data.model.length / 60) + 1);
}
};
</script>
여러 줄로 나타내기 기능
- var columnDefs안에 여러줄로 나타내는 기능을 나타낼 해당 컬럼 안에 기제한다.
cellStyle: {'white-space': 'normal'}
추가한 코드 부분 모습 :
body태그>script태그 안
var columnDefs = [
{headerName: "분류", field:"equipment_f", width:90},
{headerName: "날짜", field:"date_f", width:150},
{headerName: "내용", field:"comment_f", width:740, cellClass: 'cell-wrap-text', autoHeight: true,
cellStyle: {'white-space': 'normal'}
},
{headerName: "작성자", field:"user_f", width:90},
];
AG-GRID 연관 글
AG-GRID, AG-GRID 테이블 생성, 버튼 추가
: https://justdo-heal.tistory.com/23
AG-GRID, AG-GRID 행 넓이 자동 조절, 행 높이 설정, 행 여러 줄 기능
: https://justdo-heal.tistory.com/24
AG-GRID, 행 높이 자동 조절 추가 관련 조사
: https://justdo-heal.tistory.com/25
AG-GRID 버튼을 이용한 행 추가, 행 삭제 기능
: https://justdo-heal.tistory.com/26
AG-GRID 셀 편집 기능
: https://justdo-heal.tistory.com/27
AG-GRID, 콘솔 로그 기록 기능
: https://justdo-heal.tistory.com/28
AG-GRID, 수직 가운데 정렬
: https://justdo-heal.tistory.com/29
AG-GRID, 선택한 데이터 추출 기능
: https://justdo-heal.tistory.com/30
AG-GRID, 전체 행 색상 변경
: https://justdo-heal.tistory.com/31
AG-GRID, 추가된 행에 색상 적용
: https://justdo-heal.tistory.com/32
AG-GRID - 엑셀 내보내기 기능, CVS 내보내기 기능
: https://justdo-heal.tistory.com/33
AG-GRID, 체크 박스 기능 추가
: https://justdo-heal.tistory.com/34