본문 바로가기

카테고리 없음

AG-GRID, AG-GRID 테이블 생성, 버튼 추가

AG-GRID 테이블 생성

 

1. ag-grid 테이블 생성

   1) AG-GRID 번들 추가

   2) AG-GRID 테이블 생성

2. 한글 출력 기능

3. 버튼 기능

 


 

1) AG-GRID 번들 추가

- head 태그 안에 추가

<script src='https://unpkg.com/@ag-grid-enterprise/all-modules@22.1.2/dist/ag-grid-enterprise.min.js'></script>

2) AG-GRID 테이블 생성

- Body 태그 안에 추가

<div id="myGrid" style="height: 600px;width:500px;" class="ag-theme-balham"></div>

 

2. 한글 출력 기능

 

1) head 태그 안에 추가

<meta charset="utf-8">

2) body 태그 안에 추가

<script <%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>>

 

3. 버튼 기능 

- body 태그 안에 추가
<button onclick="">적용</button>

 

 

 

해당 코드 추가한 부분적 모습 : 

<body> 
          AG-GRID 테이블
         <div id="myGrid" style="width: 100%; height:500px" class="ag-theme-balham"></div>   

         <button onclick="">추가</button> 
         <button onclick="">삭제</button> 
         <button onclick="">적용</button> 
</body> 


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