Front에 쓰이는 JavaScript 라이브러리 (jqGrid, Kendo UI Grid)

 

js와 html을 사용해 그리드를 더 쉽고 편하게 만들어 주는 라이브러리이다.

HTML5개발자가 많이 사용한다고 한다.

 

 

1. jqGrid

jQuery Grid Plugin – jqGrid

 

플러그인 다운로드 사이트이다.

 

 

jqGrid Demos

예시 사이트인데 여기서 데모 그리드를 볼 수 있다.

다양한 css적용이 가능하다.

 

 

html

<table id="list5"></table>
<div id="pager5"></div>
<br />
<a href="#" id="a1">Get data from selected row</a>
<br />
<a href="#" id="a2">Delete row 2</a>
<br />
<a href="#" id="a3">Update amounts in row 1</a>
<br />
<a href="#" id="a4">Add row with id 99</a>
<script src="manipex.js" type="text/javascript"> </script>
<br />

 

table 태그를 사용하여 공간을 만든 후

거기에 jquery를 사용하여 데이터를 가져와 그리드를 만들어준다.

 

 

 

js

jQuery("#list5").jqGrid({        
   	url:'server.php?q=2',
	datatype: "json",
   	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
   	colModel:[
   		{name:'id',index:'id', width:55},
   		{name:'invdate',index:'invdate', width:90},
   		{name:'name',index:'name', width:100},
   		{name:'amount',index:'amount', width:80, align:"right"},
   		{name:'tax',index:'tax', width:80, align:"right"},		
   		{name:'total',index:'total', width:80,align:"right"},		
   		{name:'note',index:'note', width:150, sortable:false}		
   	],
   	rowNum:10,
   	rowList:[10,20,30],
   	pager: '#pager5',
   	sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"Simple data manipulation",
    editurl:"someurl.php"
}).navGrid("#pager5",{edit:false,add:false,del:false});
jQuery("#a1").click( function(){
	var id = jQuery("#list5").jqGrid('getGridParam','selrow');
	if (id)	{
		var ret = jQuery("#list5").jqGrid('getRowData',id);
		alert("id="+ret.id+" invdate="+ret.invdate+"...");
	} else { alert("Please select row");}
});
jQuery("#a2").click( function(){
	var su=jQuery("#list5").jqGrid('delRowData',12);
	if(su) alert("Succes. Write custom code to delete row from server"); else alert("Allready deleted or not in list");
});
jQuery("#a3").click( function(){
	var su=jQuery("#list5").jqGrid('setRowData',11,{amount:"333.00",tax:"33.00",total:"366.00",note:"<img src='images/user1.gif'/>"});
	if(su) alert("Succes. Write custom code to update row in server"); else alert("Can not update");
});
jQuery("#a4").click( function(){
	var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
	var su=jQuery("#list5").jqGrid('addRowData',99,datarow);
	if(su) alert("Succes. Write custom code to add data in server"); else alert("Can not update");
});

colModel:[
   		{name:'id',index:'id', width:55},
   		{name:'invdate',index:'invdate', width:90},
   		{name:'name',index:'name', width:100},
   		{name:'amount',index:'amount', width:80, align:"right"},
   		{name:'tax',index:'tax', width:80, align:"right"},		
   		{name:'total',index:'total', width:80,align:"right"},		
   		{name:'note',index:'note', width:150, sortable:false}		
   	],

colModel을 사용하여 VO의 요소와 연결시켜준다.

각각 컬럼의 넓이나 정렬을 조절할 수 있다.

 

 

 

2. Kendo UI

 

 

Kendo Grid UI jQuery working example

Kendo UI Grid 예시 사이트이다.

 

 

Demo of core features in jQuery Grid widget | Kendo UI for jQuery

여긴 개별 레코드를 수정할 수 있는 기능도 추가되어 있는 예시 사이트이다.

 

마찬가지로, jqGrid와 비슷하게 해주면 된다.

 

 

html

<table id="sampleTable">
                    <tbody>
                    <tr>
                        <td colspan="5"></td>
                    </tr>
                    </tbody>
</table>

<script id="scriptId" type="text/x-kendo-tmpl">
</script>

 

js

$("#sampleTable").kendoGrid({
                dataSource : {
                    data: null,
                    transport: {
                        read: {
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            url: 데이터 가져올 url,
                            type: "POST",
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                            },
                            complete: function (xhr, status) {
                                if (xhr.status != 200) {
                                    alert("처리 중 에러가 발생하였습니다.");
                                }
                            }
                        },
                        parameterMap: 파라미터설정
                    },
                    schema: {
                        data: "data",
                        total: "data.length"
                    },
                    pageSize: 10,
                },
                filterable: {
                    extra: false
                },
                sortable: true,
                columns: [
                    { title:"타이틀", field: "필드", width: 컬럼너비, filterable: false}
                ],
                pageable: {
                    buttonCount: 한페이지당 갯수
                },
                selectable: "row",
                change: //변경할때,
                scriptId: kendo.template($("#scriptId").html())
            });