갈루아의 반서재


Handsontable 기본 사용법




    

https://github.com/handsontable/handsontable




1. Handsontable 이란

Handsontable은 웹브라우저상에서 엑셀과 같은 그리드를 구현해주는 자바스크립트 라이브러리이다. jQuery 등의 기타 라이브러리와 의존성을 가지지 않는다.


2. Handsontable Installation

다음과 같이 Handsontable 을 설치한다.

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
# npm install handsontable --save
npm http GET https://registry.npmjs.org/handsontable
npm http 200 https://registry.npmjs.org/handsontable
npm http GET https://registry.npmjs.org/handsontable/-/handsontable-0.31.1.tgz
npm http 200 https://registry.npmjs.org/handsontable/-/handsontable-0.31.1.tgz
npm http GET https://registry.npmjs.org/pikaday
npm http GET https://registry.npmjs.org/zeroclipboard
npm http GET https://registry.npmjs.org/moment
npm http GET https://registry.npmjs.org/numbro
npm http 200 https://registry.npmjs.org/pikaday
npm http GET https://registry.npmjs.org/pikaday/-/pikaday-1.5.1.tgz
npm http 200 https://registry.npmjs.org/zeroclipboard
npm http GET https://registry.npmjs.org/zeroclipboard/-/zeroclipboard-2.3.0.tgz
npm http 200 https://registry.npmjs.org/numbro
npm http GET https://registry.npmjs.org/numbro/-/numbro-1.9.3.tgz
npm http 200 https://registry.npmjs.org/pikaday/-/pikaday-1.5.1.tgz
npm http 200 https://registry.npmjs.org/zeroclipboard/-/zeroclipboard-2.3.0.tgz
npm http 200 https://registry.npmjs.org/numbro/-/numbro-1.9.3.tgz
npm http 200 https://registry.npmjs.org/moment
npm http GET https://registry.npmjs.org/moment/-/moment-2.18.1.tgz
npm http 200 https://registry.npmjs.org/moment/-/moment-2.18.1.tgz
handsontable@0.31.1 node_modules/handsontable
├── zeroclipboard@2.3.0
├── numbro@1.9.3
├── pikaday@1.5.1
└── moment@2.18.1
cs




3. Hello world를 만들어보자.

기본 구현을 위해 Github 에서 압축 파일을 다운로드 받는다. 최신 버전은 0.31.1 이다.


https://github.com/handsontable/handsontable/releases

 

압축을 푼 후 dist 폴더 아래에서 본 예제에 사용할 handsontable.full.min.js 와 handsontable.full.min.css 파일을 적절한 위치에 업로드한다.


/static/assets/js/libs/handsontable.full.min.js

/static/assets/css/handsontable.full.min.css


다음과 같이 간단한 스크립트 파일을 만든다.

/static/assets/js/libs/handsontable.basic.js

1
2
3
4
5
6
7
8
9
var data = [
  ['佐藤', 28],
  ['鈴木', 19],
  ['田中', 25]
];
 
var grid = document.getElementById('grid');
 
new Handsontable(grid, {data: data});
cs


handsontable.html

그리드를 표현할 장소에 <div> 태그를 넣는다.

1
2
3
4
5
6
7
8
9
10
<head>
    <meta charset="utf-8">
    <link href="{% static 'assets/css/handsontable.full.min.css' %}" rel="stylesheet">
</head>
 
<body>
    <div id="grid"></div>
    <script src="{% static 'assets/js/libs/handsontable.full.min.js' %}"></script>
    <script src="{% static 'assets/js/libs/handsontable.basic.js' %}"></script>
</body>
cs


구현된 모습이다.



4. 데이터 소스
데이터 소스의 구성을 조금 더 살펴보자.

/static/assets/js/libs/handsontable.basic1.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var data = [
  {name: {first: 'John', last: 'Gordon'}, age: 25},
  {name: {first: 'Alfred', last: 'Galois'}, age: 11},
  {name: {first: 'Niels', last: 'Abel'}, age: 21}
];
 
var grid = document.getElementById('grid1');
 
new Handsontable(grid, {
    data: data,
    columns: [ 
        {data: 'age'},
        {data: 'name.last'}, 
        {data: 'name.first'}
    ]
});
cs


/static/assets/js/libs/handsontable.basic2.js

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
var data = [
    new MyModel('John', 22),
    new MyModel('Evariste', 31),
    new MyModel('Niels', 19)
];
 
var grid = document.getElementById('grid2');
 
new Handsontable(grid, {
    data: data,
    dataSchema: new MyModel(), 
    columns: [
        {
            data: function(myModel, name) {
                if (name) {
                    myModel.setName(name);
                } else {
                    return myModel.getName();
                }
            }
        },
        {
            data: function(myModel, age) {
                if (age) {
                    myModel.setAge(age);
                } else {
                    return myModel.getAge();
                }
            }
        }
    ]
});
 
document.getElementById('button').addEventListener('click', function() {
    data.forEach(function(myModel) {
        console.log(myModel.toString());
    });
});
 
function MyModel(name, age) {
    var _name = name,
        _age = age;
 
    this.getName = function() {
        return _name;
    };
 
    this.setName = function(name) {
        _name = name;
    };
 
    this.getAge = function() {
        return _age;
    };
 
    this.setAge = function(age) {
        _age = age;
    };
 
    this.toString = function() {
        return 'MyModel{name=' + _name + ', age=' + _age + '}';
    };
}
cs



handsontable.html

데모 3에는 버튼을 추가했다. 셀의 값을 수정한 다음 적용하면 변경된 값이 반영된다.

1
2
3
4
5
6
7
8
9
<p class="deck">Demo2
    <div id="grid1"></div>
    <script src="{% static 'assets/js/libs/handsontable.basic1.js' %}"></script>
</p>
<p class="deck">Demo3
    <div id="grid2"></div>
    <button id="button">click</button> <!-- ★ 버튼추가 -->
    <script src="{% static 'assets/js/libs/handsontable.basic2.js' %}"></script>
</p>
cs



완성된 모습이다.

저작자표시 비영리 변경금지

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

장고 사이트에 reCAPTCHA 넣기 Add reCAPTCHA to Django site  (0) 2017.04.10
Django와 Handsontable.js를 이용한 엑셀풍의 입력화면 만들기  (0) 2017.03.30
Django Channels로 채팅룸 만들기  (0) 2017.02.21
PIP로 특정 버전 패키지 설치하는 법 To install a specific version of a package with pip  (0) 2017.02.20
pyhaikunator (Heroku like random name generator) 설치하기  (0) 2017.02.13


갈루아의 반서재 블로그의 첫 페이지로 이동

티스토리툴바