[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로 확인 합니다.


결과화면




블로그 이미지

미나미나미

,