'jsgrid 아이템 가져오기'에 해당되는 글 1건

[jsgrid] jsgrid input으로 데이터(아이템) 추가하기(insert item)

jsgrid를 사용하다보면, 데이터를 추가 할 필요할 때가 있습니다.

추가하는 방법을 알아보도록 하겠습니다.


그리고, 글 마지막에 전체소스 코드가 있습니다.

중간에 코드보기가 짤리면 전체소스코드로 확인하세요.





1. import를 해줄 요소들

<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 연결-->



jsgrid를 사용하기 위해서 

jquery 1.8.3 이상 버전을 다운 또는 cdn으로 연결하셔야 합니다. 


다음으로 jsgrid js파일을 가져옵니다.




2. body 요소 내용




<label>Name : </label>
<input id="Name" type="text" placeholder="Name" style="font-size:14px;" tabindex="1">
<br>

<label>Age : </label>
<input id="Age" type="text" placeholder="Age" style="font-size:14px;" tabindex="2">
<br>

<label>Address : </label>
<input id="Address" type="text" placeholder="Address" style="font-size:14px;" tabindex="3">
<br>

<label>Married : </label>
<input id="Married" type="checkbox" tabindex="5">
<br>

<button id="add"> jsgrid 데이터 추가 </button>
<!-- 데이터 추가를 위해서 input 4개를 생성합니다.-->



jsgrid에 데이터를 추가할 요소들 

Name, Age, Address, isMarried의 값들을 

input과 checkbox으로 값을 받습니다. 

그리고, script에서 값을 추가해줍니다.




3. script 요소 내용


<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에 데이터를 추가
$("#add").click(function () {
alert("grid 데이터 추가");

var insert_item = {};
//데이터를 추가를 위해서 json object 생성
insert_item.Name = $("#Name").val();
insert_item.Age = parseInt($("#Age").val());
insert_item.Address = $("#Address").val();
insert_item.Country = $("#Country").val();
insert_item.Married = $('#Married').is(":checked") ? true : false;
//grid에 넣을 데이터를 object의 만들기
$("#jsGrid").jsGrid("insertItem", insert_item);
//jsGrid에 insert_item object 추가
});
</script>



첫번째 script 부분은 

그리드를 생성하는 부분을 담고 있습니다.


두번째 script 은 

body에서 버튼 id=add로 이벤트 발생시 

그리드에 추가가 됩니다.



4. 결과화면



See the Pen wXxPLx by Nami (@NamuNami) on CodePen.

데이터를 추가합니다.



그리드에 데이터가 추가됩니다.



5. 전체소스코드




블로그 이미지

미나미나미

,