[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)를 찾으셨다면 유용할 거 같습니다.
'[jsgrid]' 카테고리의 다른 글
| [jsgrid] jsgrid 안에 데이터 가져오기 (0) | 2018.06.29 |
|---|---|
| [jsgrid] jsgrid input으로 데이터(아이템) 업데이트 하기(update item) (0) | 2018.06.25 |
| [jsgrid] jsgrid 데이터(아이템) 추가하기(insert item) (0) | 2018.06.25 |
| [jsgrid] jsgrid 삭제(delete) 예제 (0) | 2018.04.17 |
미나미나미