ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • Javascript Toast grid 예시
      DEV/javascript 2022. 2. 16. 17:28

      기존에 작성하였던 그리드 예시가 가독성이 좋지 못하여 새로 작성하였다.

       

      사실 이 글이 이렇게 많이 볼 줄 몰랐다...

       

      기존에 작성한 내용은 하단에 그대로 남겨 두었으니 옛날 글을 보고싶다면 스크롤을 내리면 된다.

       

      간단한 Toast grid 예제는 다음과 같다.

       

      sample.html

      <!DOCTYPE html>
<html>
<meta charset="utf-8">

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

<body>
    <div id="gridDiv"></div>
</body>

<script src="./sample.js"></script>

       

      sample.js

      const initGrid = () => {
    // 그리드 객체
    const Grid = tui.Grid;

    /**
     * Grid 테마 커스텀
     * Grid.applyTheme('striped', {...}) : 
     * @param {String} default : 프리셋 (기본)
     * @param {String} striped : 프리셋 (줄무늬)
     * @param {String} clean : 프리셋 (클린)
     *      - preset theme name. Available values are 'default', 'striped' and 'clean'.
     *      - https://nhn.github.io/tui.grid/latest/Grid#applyTheme
     */
    Grid.applyTheme('defualt',  {
        cell: {
            normal: {
                border: 'black'
            },
            header: {
                background: 'gray',
                text: 'white'
            },
            evenRow: {
                background: '#fee'
            }
        }
    });

    /**
     * 그리드 설정
     * @variable {Dom} el : 그리드 element(DOM)
     * @variable {boolean} scrollX : X 스크롤 사용여부
     * @variable {boolean} scrollY : Y 스크롤 사용여부
     * @variable {boolean} draggable : 드레그 사용 여부
     * @variable {Object} header
     *      - @variable {Number} height : 헤더 높이
     * @variable {Number} bodyHeight : 그리드 바디 높이
     * @variable {*} contextMenu : 마우스 우클릭 옵션
     * @variable {Array} columns :
     *      - @variable {String} header : 컬럼명(헤더)
     *      - @variable {String} name : 컬럼 name (input data와 이름이 일치해야함)
     *      - @variable {String} align : 정렬
     *      - @variable {Number} width : 너비
     *      - @variable {String} whiteSpace : 줄바꿈 설정
     *      - @variable {Function} formatter : 출력 포멧
     * 기타 옵션은 공식 document를 참조하자.
     */
    
    const sampleGrid = new Grid({
        el: document.getElementById('gridDiv'),
        scrollX: true,
        scrollY: true,
        draggable: false,
        header: { height: 30 },
        bodyHeight: 200,
        contextMenu: null,
        columns: [
            {
                header: '날짜',
                name: 'date',
                align: "center",
                width: 150,
                whiteSpace: 'normal',
                formatter: function (e) {
                    return e.value
                },
            },
            {
                header: '이름',
                name: 'name',
                align: "left",
                width: 100,
                whiteSpace: 'normal',
                formatter: function (e) { 
                    return e.value
                },
            },
            {
                header: '위치',
                name: 'location',
                align: "left",
                width: 150,
                whiteSpace: 'normal',
                formatter: function (e) {
                    return e.value
                },
            },
        ]
    });

    return sampleGrid;
}

window.onload = () => {
    // 그리드 설정
    const createdGrid = initGrid();

    // 샘플 데이터
    const sampleData = [
        {
            date: '2022-12-04',
            name: '석봉박1',
            location: '부천',
        },
        {
            date: '2022-12-07',
            name: '석봉박2',
            location: '마곡',
        },
        {
            date: '2022-12-12',
            name: '석봉박3',
            location: '충주',
        }
    ];

    // 그리드에 데이터 넣기(출력)
    createdGrid.resetData(sampleData);
}

       

      출력결과

      (이쁘게 꾸미고 싶다면... : https://ui.toast.com/tui-grid)

       

       

       

       

       

       

      (옛날 버전)

      이번 프로젝트에서 Toast Grid를 사용했다.

       

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

       

      TOAST UI :: Make Your Web Delicious!

      The TOAST UI Is Free Open-source JavaScript UI Libraries Maintained By NHN.

      ui.toast.com

       

      사용법이 아주 간단하다.

       

      패키지 메니저를 통하여 다운로드 받거나 CDN, 직접 다운 등 다양한 방법으로 사용이 가능하다.

       

      우선 CDN ( Contents Delivary Network ) 방법으로 추가하도록 하자.

       

      아래 내용을 헤더에 넣어주면 된다.

       

      <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>

       

      큰 설명이 필요 없다.

       

      샘플 코드로 확인해 보자.

       

      샘플HTML

      <!DOCTYPE html>
<html>
    <meta charset="utf-8">
<head>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>

    <!-- Toast grid -->
    <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>
</head>

<body>
    <div>
        ■ 그리드 테스트
    </div>
    <div id="testGrid"></div>
</body>

<script src="./test.js"></script>
<script src="./testGrid.js"></script>

</html>

      단순히 그리드를 그려 넣을 div를 하나 추가하였다.

       

      test.js

      "use strict"

const TEST = {
    dataSet : new Object(),

    init : new function(){},
    gridSet : new function(){},
}

TEST.init = () => {
    TEST.gridSet();
}

TEST.gridSet = () => {
    // 임시 테스트 데이터
    TEST.dataSet = [
        {
            'name' : '석봉',
            'year' : '1994',
            'date' : '0905',
            'region' : '부천',
        },
        {
            'name' : '시봉',
            'year' : '1994',
            'date' : '1231',
            'region' : '충주',
            'etc' : '바보임',
        }
    ];
}

// 실행
$(function(){
    TEST.init();
})

      testGrid.js

      "use strict"

const TESTGRID = {
    init : new function(){},
    setGrid : new function(){},
    setColumsInfo : new function(){},

    testGrid : new Object(),
    columnsInfo : new Object(),
}

TESTGRID.init = async () => {
    await TESTGRID.setColumsInfo();             // 컬럼 준비
    await TESTGRID.setGrid();                   // 그리드 객체 생성
    TESTGRID.testGrid.resetData(TEST.dataSet);  // 그리드에 데이터 입력
}

/**
 * [그리드 객체 생성]
 * 그리드 객체를 생성한다.
 */
TESTGRID.setGrid = () => {
    const Grid = tui.Grid;

    TESTGRID.testGrid = new Grid({
        // Container element
        el: document.getElementById('testGrid'),
        bodyHeight: 250,        // Grid의 높이를 설정
        scrollX: true,          // scrollX : 가로 축 이동 추가여부
        rowHeaders: [
            // type : 'rowNum', 'checkbox'등이 있음  
            { type: 'rowNum', header: 'NO', },      // row 숫자 표시
            { type: 'checkbox', header: 'chk?'}     // 각 row 맨 앞에 체크박스 추가
        ],
        // 설정된 컬럼 지정
        columns: TESTGRID.columnsInfo,
    });
}

/**
 * [컬럼 설정]
 * 그리드에 표시될 컬럼을 작성한다.
 * 포멧만 맞춰 준다면 가변적으로도 만들 수 있다.
 */
TESTGRID.setColumsInfo = () => {
    TESTGRID.columnsInfo = [
        {
            header: '이름',
            name: 'name',
            align: "center",
            width: 100,
            sortable: true,
            ellipsis: true,
        },
        {
            header: '제조년도',
            name: 'year',
            align: "center",
            width: 80,
            sortable: true,
            ellipsis: true,
        },
        {
            header: '제조월일',
            name: 'date',
            align: "center",
            width: 80,
            sortable: true,
            ellipsis: true,
            // formatter를 이용하여 다양한 방식으로 출력이 가능하다.
            formatter: function(e){
                return `<a href="javascript:void(0)">${e.value.substring(0,2)} / ${e.value.substring(2,4)}</a>`; 
            },
        },
        {
            header: '지역',
            name: 'region',
            align: "center",
            width: 60,
            sortable: true,
            ellipsis: true,
        },
        {
            header: '특이사항',
            name: 'etc',
            align: "center",
            width: 120,
            sortable: true,
            ellipsis: true,
            // hidden 값을 주어 사용자에게 해당 컬럼을 숨길 수 있다.
            hidden: 1,
        },
    ]
}

// 실행
$(function(){
    TESTGRID.init();
})

       

      결과는 다음과 같다.

       

      그리드 출력 결과

       

      Toast grid 함수 리스트

      https://nhn.github.io/tui.grid/latest/Grid

       

      https://nhn.github.io/tui.grid/latest/Grid/

      Occurs when the grid data is updated and the grid is rendered onto the DOM The event occurs only in the following API as below. 'resetData', 'restore', 'reloadData', 'readData', 'setPerPage' with 'dataSource', using 'dataSource' PROPERTIES

      nhn.github.io

      Toast grid 함수 및 이벤트 예시

      https://seokbong.tistory.com/15

       

      Toast grid 함수 및 이벤트 예시

      Toast grid를 사용하면서 가장 많이 쓴 이벤트와 함수를 남겨 두려고 한다. https://nhn.github.io/tui.grid/latest/Grid https://nhn.github.io/tui.grid/latest/Grid/ Occurs when the grid data is updated and..

      seokbong.tistory.com

       

      저작자표시

      'DEV > javascript' 카테고리의 다른 글

      Bootstrap 설치 및 사용하기  (0) 2022.02.21
      Toast grid 함수 및 이벤트 예시  (0) 2022.02.17
      Javascript 물음표 연산자와 물음표 두개 연산자 (? 연산자와 ?? 연산자)  (0) 2022.02.15
      jQuery 선택자(태그) 접근 방법 2 (여러 Id, Class 사용하여 접근하기)  (0) 2022.02.15
      Javascript Data 속성 활용 예시  (0) 2022.02.12

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바