버튼을 이용한 행 추가, 행 삭제 기능
- 형광펜 칠한 부분을 참고 :)
추가한 코드 부분 화면 :
html > body 태그
<button onclick="onAddRow()">추가</button>
<button onclick="onRemoveSelected()">삭제</button>
script 태그
var gridOptions = {
defaultColDef: {
resizable: true,
sortable: true
},
columnDefs: columnDefs,
rowData: null,
onColumnResized: onColumnResized,
onGridReady: function(params) {
setTimeout(function () {
params.api.setRowData(data);
}, 2000);
},
rowSelection: 'multiple' //추가한 코드. multiple 설정안하면 행 선택이 안되고 하나의 셀이 선택 되어 삭제가 불가능
};
function createNewRowData() {
var newData = {
equipment_f: "기타",
seq_f: "날짜",
date_f: "내용",
comment_f: "추가 버튼으로 생성된 행입니다~",
user_f: "작성자"
};
return newData;
}
function onAddRow() {
var newItem = createNewRowData();
var res = gridOptions.api.updateRowData({add: [newItem]});
printResult(res);
}
function onRemoveSelected() {
var selectedData = gridOptions.api.getSelectedRows();
var res = gridOptions.api.updateRowData({remove: selectedData});
printResult(res);
}
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