[jsgrid] jsgrid 안에 데이터 가져오기
jsgrid 안에 데이터를 읽어와야 하는 경우가 있습니다.
한번 알아보도록 하겠습니다.
네모 안에 데이터를 가져와보도록 하겠습니다.
head 부분
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- jsgrid 사용을 위한 jquery를 cdn 연결-->
<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" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<!-- jsgrid 사용을 위한 필요한 요소 cdn 연결-->
<title>grid 테스트 페이지</title>
</head>
body 부분
<body>
<button id="get_data"> jsgrid 데이터 가져오기 </button>
<!-- grid_data 가져오기 -->
<div id="jsGrid"></div>
<!-- jsGrid 생성을 합니다.-->
<script>
//grid에 들어갈 초기 내용
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
}
];
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
autoload: true,
//데이터 변경, 추가, 삭제대하여 자동으로 로드되게 함
sorting: true,
//그리드 헤더 클릭시 sorting이 되게함
data: clients,
//clients를 생성된 배열를 연결함.
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",
sorting: false
}
]
//grid에 표현될 필드 요소
});
</script>
<script>
//버튼 클릭시 grid에 있는 값 가져오기
$("#get_data").click(function () {
var items = $("#jsGrid").jsGrid("option", "data");
//jsGrid에 데이터 가져오기
console.log(items);
});
</script>
</body>
<script>
//버튼 클릭시 grid에 있는 값 가져오기
$("#get_data").click(function () {
var items = $("#jsGrid").jsGrid("option", "data");
//jsGrid에 데이터 가져오기
console.log(items);
});
</script>
버튼 클릭시 console.log로 확인 합니다.
결과화면
'[jsgrid]' 카테고리의 다른 글
| [jsgrid] jsgrid input으로 데이터(아이템) 업데이트 하기(update item) (0) | 2018.06.25 |
|---|---|
| [jsgrid] jsgrid 데이터(아이템) 추가하기(insert item) (0) | 2018.06.25 |
| [jsgrid] jsgrid 삭제(delete) 예제 (0) | 2018.04.17 |
| [jsgrid] jsgrid 예제 기초 사용법 (0) | 2018.04.15 |
미나미나미
