[jsgrid] jsgrid 예제 기초 사용법  


 HTML 웹을 프로그래밍을 할때만 데이터에대한 그리드를 그려야하는 경우가 있습니다. 그럴때, 아주 좋은 그리드를 설명합니다.

공식사이트는 http://js-grid.com/ 입니다.

이곳에 가시면 필요한 정보 및 문서들이 있습니다. 기능이 필요하시면 꼭 찾아보세요.


간단하게 요녀석을 따라해 볼 거에요! 



See the Pen jsgrid1 by Nami (@NamuNami) on CodePen.




1. 첫번째로 할일은 jquery의 cdn 또는 js를 추가합니다(간편하게 하기위해서 저는 cdn으로 진행하였습니다.)


2. 두번째로 jsgrid 관련 js 파일과 css를 cdn 또는 다운을 받아서 추가하도록 합니다.



이렇게 jquery 그 다음 jsgrid를 순서대로 넣어주셔야합니다. jquey가 후 순위로 들어갈 경우 이라는 에러가 일어납니다. 


(jquery 보다 다른 js를 먼저 넣었을 경우 일어나는 에러)

jsgrid.js:1473 Uncaught ReferenceError: jQuery is not defined at jsgrid.js:1473 

이렇게 하신 후에 


3. body에 부분에 이렇게 넣어주세요.



여기서 $(function () { });는 $(document).ready(function() {}); 와 같은 의미를 가지고 있습니다.

전체소스코드를 보면 이렇게 나올거에요


<html>
    
    <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
        <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
    
        <title>테스트 페이지</title>
    </head>
    
    <body>
        <div id="jsGrid"></div>
        <script>
            $(function () {

                $("#jsGrid").jsGrid({
                    width: "100%",
                    height: "400px",

                    sorting: true, // 칼럼의 헤더를 눌렀을 때, 그 헤더를 통한 정렬
                    data: clients, //아래에 있는 client 배열을 데이터를 받아서

                    fields: [ // 그리드 헤더 부분에 넣기 위해서 필드 지정
                        { name: "Name", type: "text", width: 150 },
                        { name: "Age", type: "number", width: 50 },
                        { name: "Address", type: "text", width: 200 },
                        { name: "Married", type: "checkbox", title: "Is Married" },
                    ]
                })
            })

            var clients = [
                { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
                { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
                { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
                { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
                { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
            ];

        </script>
    </body>
    
    </html>



그러면 가벼운 javascript 그리드(grid)를 찾으셨다면 유용할 거 같습니다.

블로그 이미지

미나미나미

,