Aui Gird -> Toast UI Grid 로 전환하기(기록, 정리)

https://ui.toast.com/tui-grid

TOAST UI :: Make Your Web Delicious!

TOAST UI is an open-source JavaScript UI library maintained by NHN Cloud.

ui.toast.com

Toast UI 에는 차트, 그리드, 캘린더 등 다양한 Application 이 있습니다.

여기서 Toast UI Grid 관련 정리하였습니다.

Aui Grid

https://www.auisoft.net/

에이유아이소프트(AUISoft)

Advanced Pure Javascript and HTML5 UI for the Web 순수 자바스크립트로 작성되어 모든 디바이스에서 사용가능합니다. One Source Any Platforms

www.auisoft.net

에이유아이소프트에서 만든 그리드로서

Enterprise License의 2,800,000원(VAT 별도) 로 비용 안내가 되어 있습니다.

해당 그리드를 사용하고 있어, SaaS로 솔루션화해 패키지를 파는 데 문제가 발생되어

상용으로 무료로 활용 가능한 그리드를 찾다

Nhn FE 랩에서 만든 Toast UI 그리드로 전환해보기로 하였습니다.

1. 설치하기

1) npm 을 통한 설치

Node 가 설치된 경우, 설치 가능

npm init

npm install –save tui-gird

정상적으로 설치가 되면 node_modules 가 폴더에 설치되며,

이를 프로젝트의 알맞는 경로에다가 저장하고 불러오기

2) CDN

<link rel="stylesheet" href="https://uicdn.toast.com/grid/latest/tui-grid.css" /> 
<script src="https://uicdn.toast.com/grid/latest/tui-grid.js"></script>

2. Toast UI Grid 가이드 및 예제 문서

가이드 문서가 잘 정리되어 있어 문서를 잘 살피고 기능 구현

https://nhn.github.io/tui.grid/latest/tutorial-example01-basic

https://nhn.github.io/tui.grid/latest/tutorial-example01-basic/

nhn.github.io

3. GRID 동작 흐름과 JSP 에서의 적용 시

Grid 동작

HTML 이 최초 화면상에 출력
HTML이 구성된 이후 Javascript 내에 그리드를 구성한 함수를 호출
Grid 생성
Grid 공통 옵션 구성(디자인, 페이징)
Grid의 데이터를 로드(API 통신)
Grid 컬럼 별 구성
Gird의 이벤트 핸들러 구성(그리드 라이프 사이클, 이벤트 핸들러 구성)
최종적으로 Javascript 내 함수에서 구성한 그리드를 HTML로 출력

JSP 에서

HTML 코드 위에 script 에서

el: document.getElementById('grid'),

el document 를 불렀을 때 에러 발생함..

- 근본적인 원인은 못찾고, HTML 코드 밑에 script 작성하여 grid 생성 및 div 에 연결함.

4. 그리드 전환 관련

그리드 기본출력

auiGrid는 setGridData 로 데이터를 받아서 설정함.
tuiGrid는 resetData(data) 로 데이터 받거나, 혹은 tuiGrid 생성 시 data: 에 넣을 수 있음.

컬럼 설정

기존 컬럽 옵션의 visible(숨기거나 보이기) : => hidden : 1(true or false)
컬럼 정렬 : column에서 sortable : true 적용하여 가능.
요약(Summary) : 그리드 옵션 summary 적용
row의 추가, 삽입 , 삭제 기능 :
1. appendRow
2. removeRow
3. removeRows

엑셀 Export

export 함수로 auiGrid와 파라미터 동일하게 사용 가능함.
auiGrid의 exportTo => grid.export('xlsx', { fileName : '파일명' }); 로 변경

그리드의 Validation 검사

validate() 메서드를 통해 로우 단위로 유효성에 맞지 않은 컬럼 정보를 가져올 수 있다.
columns 별로 require / unique 등의 옵션을 부여하고 저장을 할 때 grid.validate() 메서드를 통해서
변수에 저장해서 유무를 통해서 Validation 검사가 가능하다.

참고

https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/ko/validation.md

GitHub - nhn/tui.grid: 🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!

🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer! - GitHub - nhn/tui.grid: 🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Da...

github.com

참고 소스 - 전환 하며 정리

JSP Toast Grid 적용 예제

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Toast UI Grid JSP Example</title>
    <link rel="stylesheet" href="https://uicdn.toast.com/tui-grid/latest/tui-grid.min.css"/>
</head>
<body>
<h1>Toast UI Grid JSP Example</h1>
<div id="grid"></div>

<!-- Toast UI Grid 라이브러리 -->
<script src="https://uicdn.toast.com/tui-code-snippet/latest/tui-code-snippet.min.js"></script>
<script src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.min.js"></script>
<script src="https://uicdn.toast.com/tui-component-popup/v1.5.0/tui-component-popup.min.js"></script>
<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui-date-picker/latest/tui-date-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui-chart/latest/tui-chart.min.js"></script>
<script src="https://uicdn.toast.com/tui-grid/latest/tui-grid.min.js"></script>

<script>
    // Toast UI Grid 생성
    const grid = new tui.Grid({
        el: document.getElementById('grid'),
        columns: [
            {name: 'name', header: 'Name'},
            {name: 'age', header: 'Age'},
            {name: 'address', header: 'Address'}
        ],
        data: [
            {name: 'John Doe', age: 30, address: 'New York'},
            {name: 'Jane Doe', age: 25, address: 'San Francisco'},
            {name: 'Bob Smith', age: 50, address: 'Los Angeles'}
        ]
    });
</script>
</body>
</html>

1. 그리드 행 추가

var grid = new tui.Grid({
    el: document.getElementById('myGrid'),
    columns: [
        { name: 'Name', editor: 'text' },
        { name: 'Age', editor: 'text' },
        { name: 'Address', editor: 'text' }
    ]
});

var addRowBtn = document.getElementById('addRowBtn');
addRowBtn.addEventListener('click', function() {
    grid.appendRow({});
});

2. 그리드 select ( dropdown) 박스 구현

var dynamicListItems = [
  { text: 'Deluxe', value: '1' },
  { text: 'EP', value: '2' },
  { text: 'Single', value: '3' },
  { text: 'Custom', value: '4' }
];

var grid = new tui.Grid({
  // ...
  columns: [
    {
      header: 'Type',
      name: 'typeCode',
      formatter: 'listItemText',
      editor: {
        type: 'select',
        options: {
          listItems: dynamicListItems
        }
      }
    },
    // ...
  ]
});

3. 컬럼 숨기기

{
  header: '컬럼 제목',
  name: '컬럼 이름',
  hidden: true, // 해당 컬럼 숨기기
  // ...
}

4. 컬럼 필수값 설정

columns: [
  {
    header: 'Name',
    name: 'name',
    required: true
  },
  {
    header: 'Age',
    name: 'age',
    required: true
  },
  ...
]

var validCheck = grid.validate();

참고

[스프링 부트+Thymleaf] https://adjh54.tistory.com/95

[JS] Toast UI Grid 설정 및 응용하기 : Thymeleaf 기반 구성

해당 글에서는 Spring Boot의 타임리프(Thymeleaf)를 기반으로 CDN을 통하여 오픈소스 ‘Toast UI Grid’를 이용한 설정 및 활용방안에 대해서 공유합니다. 1) 개발 환경 💡 해당 환경에서는 ‘Package Manager

adjh54.tistory.com

https://forward.nhn.com/2020/seoul/hands-on-labs/toastui.grid-account-book/01.html

1. 개요 — TOAST UI Grid로 가계부 만들기 1.0 documentation

1. 개요 TOAST UI Grid는 FE개발랩에서 개발한 오픈소스 자바스크립트 라이브러리입니다. TOAST UI Grid를 사용하면 액셀과 같이 다양한 형태로 데이터를 표현하고 편집할 수 있습니다. 이번 핸즈온 랩

forward.nhn.com

https://github.com/nhn/tui.grid

'프로그래밍' 카테고리의 다른 글

[SpringBoot+Vue.js] 정리 (4) JWT Token (0)	2023.04.07
[SpringBoot+Vue.js] 정리 (3) Vue router 추가 및 로그인 (0)	2023.04.06
[SpringBoot] 한국수출입은행 환율 API 가져오기 (0)	2023.03.29
[도커] 1. 도커 기본강의 - 인프런(따라하며 배우는 도커와 CI환경) (0)	2023.03.27
[공부 정리] Spring 핵심원리 기본편 - 싱글톤 컨테이너 (0)	2023.03.22