른록노트

[SlickGrid 플러그인을 알아보자] 본문

Programming/[Javascript]

[SlickGrid 플러그인을 알아보자]

른록 2017. 8. 2. 16:45

SlickGrid란?

javascript기반으로 간단하게 grid/spreadsheet를 사용할 수 있게 해주는 플러그인이다.


공식사이트 : https://github.com/mleibman/SlickGrid


SlickGrid is an advanced JavaScript grid/spreadsheet component

Some highlights:

  • Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
  • Extremely fast rendering speed
  • Supports jQuery UI Themes
  • Background post-rendering for richer cells
  • Configurable & customizable
  • Full keyboard navigation
  • Column resize/reorder/show/hide
  • Column autosizing & force-fit
  • Pluggable cell formatters & editors
  • Support for editing and creating new rows.
  • Grouping, filtering, custom aggregators, and more!
  • Advanced detached & multi-field editors with undo/redo support.
  • “GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.
  • Support for millions of rows


여러가지 기능들을 제공한다.

API : https://github.com/mleibman/SlickGrid/wiki/Slick.Grid#header-columns


간단한 사용법


시작하기


SlickGrid는 자바스크립트 기반의 플로그인입니다.


var slickgrid = new Slick.Grid(container, rows, columns, options);

기본적은 문법으로써, slickgrid라는 Slick.Grid 객체를 생성해줍니다.

jquery도 지원하여 같이 사용하시면 됩니다.

객체를 만들었기 때문에  slickgrid.someMethod() 를 사용할 수 있습니다.


첫번째 인자 Container를 알아보겠습니다.

쉽게말해 <div>태그와같은 담는 공간을 말합니다. 즉 표가 담기는 공간입니다.

처음에 비어있어야하고 <div>는 css로 명백한 크기를 지정해줘야합니다.



두번째 인자 Rows는 데이터 오브젝트의 배열입니다.

데이터를 배열로 넣어주면됩니다.


세번째 인자는 Columns입니다. 각 열의 속성이라고 생각하시면 됩니다.


마지막으로 여러 옵션을 줄 수 있습니다.


간단한예제를 보시고 자세한 내용은 사이트를 참고하시기바랍니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE HTML>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
 
        <!-- 슬릭그리드 기본 CSS -->
        <link rel="stylesheet" href="libs/slickgrid/css/slick.grid.css" type="text/css"/>
 
        <!-- jquery-ui가 없으면 안예쁘게 나옴 -->
        <link rel="stylesheet" href="libs/jquery/css/jquery-ui-1.8.16.custom.css" type="text/css"/>
 
        <!-- 필수 jquery library -->
        <script src="libs/jquery/js/jquery-1.7.min.js" type="text/javascript"></script>
        <script src="libs/jquery/js/jquery.event.drag-2.2.js" type="text/javascript"></script>
 
        <!-- 필수 슬릭그리드 library -->
        <script src="libs/slickgrid/js/slick.core.js" type="text/javascript"></script>
        <script src="libs/slickgrid/js/slick.grid.js" type="text/javascript"></script>
 
        <!-- 슬릭그리드 세팅 -->
        <script type="text/javascript" charset="utf-8">
            //DOM이 모두 로드되었을 때
            $(document).ready(function () {
                var rows = [
                    {
                        name: "은복",
                        contents: "안녕하세요."
                    },
                    {
                        name: "호동",
                        contents: "반갑습니다."
                    }
                ];
                var columns = [
                    {
                        name: "이름",
                        field: "name",
                        id: "name",
                        sortable: true
                    },
                    {
                        name: "내용",
                        field: "contents",
                        id: "contents",
                        sortable: true
                    }
                ];
 
                var slickgrid = new Slick.Grid("#slickGrid", rows, columns, {enableColumnReorder: false});
                slickgrid.onSort.subscribe(function (e, args) { // args: sort information. 
                    var field = args.sortCol.field;
 
                    rows.sort(function (a, b) {
                        var result =
                                a[field] > b[field] ? 1 : a[field] < b[field] ? -1 : 0;
 
                        return args.sortAsc ? result : -result;
                    });
 
                    slickgrid.invalidate();
                });
 
            });
       </script>
 
    </head>
    <body>
        <!-- 아무것도 없는 DIV를 만든다. -->
        <!-- 여기에 SlickGrid가 그려진다. -->
        <div id="slickGrid" style="width:600px;height:500px;"></div>
 
    </body>
</html>
cs



참고 사이트

https://okky.kr/article/281643

http://programmingsummaries.tistory.com/133

반응형
'Programming/[Javascript]' Related Articles more
Comments