[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. 전체소스코드
'[jsgrid]' 카테고리의 다른 글
| [jsgrid] jsgrid 안에 데이터 가져오기 (0) | 2018.06.29 |
|---|---|
| [jsgrid] jsgrid input으로 데이터(아이템) 업데이트 하기(update item) (0) | 2018.06.25 |
| [jsgrid] jsgrid 삭제(delete) 예제 (0) | 2018.04.17 |
| [jsgrid] jsgrid 예제 기초 사용법 (0) | 2018.04.15 |
미나미나미