행 높이 자동 조절 추가 관련 조사
행 높이 자동 조절 추가에 대해 조사하면서 알게된 것들 몇가지 적어본다.
도움이 되시길..
추가 (1)
<style>
.cell-wrap-text {
white-space: normal !important;
}
</style>
추가 (2)
- var gridOptions = { 안에 코드를 추가한다.
- 이건 기존 코드에 있는 건데, 없으면 값이 안 나타난다.
onGridReady: function(params) {
setTimeout(function () {
params.api.setRowData(data);
}, 2000);
}
- 행 조절 관련 코드 추가
onColumnResized: onColumnResized,
추가 (3)
- 행 필요한 높이 확인
function onColumnResized() {
gridOptions.api.resetRowHeights();
}
추가 (4)
- 데이터 정의하는 var columnDefs = [ 안에 각 열마다 뒤에 추가
cellClass: 'cell-wrap-text'
- 높이 조절 기준이 되는 해당 열에 코드 추가
autoHeight: true,
cellStyle: {'white-space': 'normal'}
추가된 코드 부분 모습 :
var columnDefs = [
{
headerName: "분류",
field:"equipment_f",
width:90,
cellClass: 'cell-wrap-text'
},
{
headerName: "날짜",
field:"date_f",
width:150,
cellClass: 'cell-wrap-text'
},
{
headerName: "내용",
field:"comment_f",
width:740,
cellClass: 'cell-wrap-text',
autoHeight: true,
cellStyle: {'white-space': 'normal'}
},
{
headerName: "작성자",
field:"user_f",
width:90,
cellClass: 'cell-wrap-text'
}
];
var gridOptions = {
defaultColDef: {
resizable: true,
sortable: true,
editable: true
},
columnDefs: columnDefs,
rowData: null,
onColumnResized: onColumnResized,
onGridReady: function(params) {
setTimeout(function () {
params.api.setRowData(data);
}, 2000);
}
};
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