[jsgrid] jsgrid input으로 데이터(아이템) 업데이트 하기(update item)
jsgrid를 사용하다보면, 데이터를 수정 할 필요할 때가 있습니다.
input를 통해 수정하는 방법을 알아보도록 하겠습니다.
그리고, 글 마지막에 전체소스 코드가 있습니다.
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="update"> jsgrid 데이터 업데이트 </button>
<!-- 데이터 추가를 위해서 input 4개를 생성합니다.-->
<div id="jsGrid"></div>
<!-- jsGrid 생성을 합니다.-->
jsgrid에 데이터를 수정할 값들
Name, Age, Address, isMarried의 값들을
input과 checkbox으로 값을 받습니다.
그리고, script에서 값을 수정,
즉 update를 해줍니다.
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
}
];
var update_item = {};
//수정할 데이터의 값을 임시적으로 갖고 있을 jsonobj
$("#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에 표현될 필드 요소
//그리드안에 row를 두번 클릭하면
//input 값을 넣어줌
rowDoubleClick: function (args) {
var getData = args.item;
update_item = getData;
console.log(update_item);
$("#Name").val(getData.Name);
$("#Age").val(getData.Age);
$("#Address").val(getData.Address);
$("#Country").val(getData.Country);
$('#Married').prop("checked", getData.Married);
}
});
//버튼 클릭시 grid에 데이터를 업데이트
$("#update").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("updateItem", update_item, insert_item);
//jsGrid에 insert_item object 업데이트
});
</script>
그리드 생성 내용에서 double click 할 경우,
클릭한 열의 값을 통해서 값을 수정을 합니다.
임시적으로, 기존의 데이터의 값위치를 통해서 수정,
즉,update가 됨으로 update_item object변수를 하나 생성합니다.
4. 결과화면
See the Pen update_jsgrid by Nami (@NamuNami) on CodePen.
5. 전체소스코드
'[jsgrid]' 카테고리의 다른 글
| [jsgrid] jsgrid 안에 데이터 가져오기 (0) | 2018.06.29 |
|---|---|
| [jsgrid] jsgrid 데이터(아이템) 추가하기(insert item) (0) | 2018.06.25 |
| [jsgrid] jsgrid 삭제(delete) 예제 (0) | 2018.04.17 |
| [jsgrid] jsgrid 예제 기초 사용법 (0) | 2018.04.15 |
미나미나미