[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 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 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 삭제(delete) 예제  



1. jquery , jsgrid cdn으로 연결하기

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.js"></script>
<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" />


2. body에서 div id 값으로 만들어주기

<div id="jsGrid"></div>




3. script 코드 넣어주기


- fileds에 {type : 'control'} 를 추가하기 


$(function () {

    $("#jsGrid").jsGrid({
        width: "100%",
        height: "400px",

        sorting: true, // 칼럼의 헤더를 눌렀을 때, 그 헤더를 통한 정렬
        data: clients, //아래에 있는 client 배열을 데이터를 받아서
        // deleting : true,

        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" },
            { type : 'control'}
            // { type : 'control' , editButton : false}         
        ]
    })
})

결과 화면 - 오른쪽에 수정이 가능한 연필 모양과 쓰레기통 모양에 삭제 버튼이 생긴다.


-  연필 모양에 수정 버튼이 필요 없는 경우 => editButton : false를 추가하기


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" },
            //{ type : 'control'} // 이럴 경우 연필 모양에 칼럼 수정과 삭제가 가능한 버튼이 생긴다.
            { type : 'control' , editButton : false}            
        ]

결과 화면 -  쓰레기통 모양의 삭제 버튼만 생긴다.



* 자 이렇게 하면 jsgrid에서 삭제를 진행할 수 있다. 여기서 추가적인 질문!!!!!



Are you sure? ... Are you sure?... 한글 안되나요 ! 안되나요 ㅠㅠㅠ 한글을 되게 하소서..!



$(function () {

    $("#jsGrid").jsGrid({
        width: "100%",
        height: "400px",

        sorting: true, // 칼럼의 헤더를 눌렀을 때, 그 헤더를 통한 정렬
        data: clients, //아래에 있는 client 배열을 데이터를 받아서
        // deleting : true,
        deleteConfirm: function(item) { // 아이템 삭제를 confirm 창을 만들수 있습니다.
return "아이템 삭제 " + item.Name + "를 삭제하시겠습니까?";
},
        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" },
            //{ type : 'control'} // 이럴 경우 연필 모양에 칼럼 수정과 삭제가 가능한 버튼이 생긴다.
            { type : 'control' , editButton : false}            
        ]
    })
})

결과 화면 -  쓰레기통 모양의 삭제 버튼만 생긴다.


테스트 화면 내용

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



 

전체 테스트 코드


블로그 이미지

미나미나미

댓글을 달아 주세요

[jsgrid] jsgrid 예제 기초 사용법  


 HTML 웹을 프로그래밍을 할때만 데이터에대한 그리드를 그려야하는 경우가 있습니다. 그럴때, 아주 좋은 그리드를 설명합니다.

공식사이트는 http://js-grid.com/ 입니다.

이곳에 가시면 필요한 정보 및 문서들이 있습니다. 기능이 필요하시면 꼭 찾아보세요.


간단하게 요녀석을 따라해 볼 거에요! 



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




1. 첫번째로 할일은 jquery의 cdn 또는 js를 추가합니다(간편하게 하기위해서 저는 cdn으로 진행하였습니다.)


2. 두번째로 jsgrid 관련 js 파일과 css를 cdn 또는 다운을 받아서 추가하도록 합니다.



이렇게 jquery 그 다음 jsgrid를 순서대로 넣어주셔야합니다. jquey가 후 순위로 들어갈 경우 이라는 에러가 일어납니다. 


(jquery 보다 다른 js를 먼저 넣었을 경우 일어나는 에러)

jsgrid.js:1473 Uncaught ReferenceError: jQuery is not defined at jsgrid.js:1473 

이렇게 하신 후에 


3. body에 부분에 이렇게 넣어주세요.



여기서 $(function () { });는 $(document).ready(function() {}); 와 같은 의미를 가지고 있습니다.

전체소스코드를 보면 이렇게 나올거에요


<html>
    
    <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <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" />
    
        <title>테스트 페이지</title>
    </head>
    
    <body>
        <div id="jsGrid"></div>
        <script>
            $(function () {

                $("#jsGrid").jsGrid({
                    width: "100%",
                    height: "400px",

                    sorting: true, // 칼럼의 헤더를 눌렀을 때, 그 헤더를 통한 정렬
                    data: clients, //아래에 있는 client 배열을 데이터를 받아서

                    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" },
                    ]
                })
            })

            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 }
            ];

        </script>
    </body>
    
    </html>



그러면 가벼운 javascript 그리드(grid)를 찾으셨다면 유용할 거 같습니다.

블로그 이미지

미나미나미

댓글을 달아 주세요