[제이쿼리] 제이쿼리 그리드(jQuery grid) 사용방법

 

제이쿼리 그리드(jQuery grid) 사용방법

---

안녕하세요? 장장스입니다.

오늘은 제이쿼리 그리드 사용방법에 대해서 정리해보려고 합니다.

 

이런 깔끔한(?) Grid 테이블을 생성하고 싶으시다면 제이쿼리 그리드를 사용하면 정말 편리하게 만들 수 있답니다.

 

 

제이쿼리 그리드 다운로드

---

먼저 제이쿼리 그리드를 다운로드해주세요.

 

▼jQuery-Grid Download

jQuery Grid Plugin – jqGrid » Downloads

 

 

 

제이쿼리 UI 다운로드

---

▼앙상한 그리드 디자인

 

제이쿼리 그리드만 사용하게 되면 위 사진처럼 앙상한(?) 디자인이 나온답니다. 이쁘게 보일려면 제이쿼리 UI를 설치해주세요.

 

▼jQuery-UI download

jQuery UI

 

코드 예제

---

▼html

<table id="jqGrid"></table>
<div id="gridpager"></div>

제이쿼리 그리드를 사용하게 되면 html 코드는 딱 2개만 필요합니다. 데이터를 담을 <table>과 페이징 기능을 담을 <div> 2개면 충분합니다.

 

 

먼저 위에서 다운받은 그리드와 UI를 Import(?) 해줍니다.

 

▼제이쿼리 그리드 js 파일

<script src="./jquery-3.4.1.min.js"></script>
<script src="./Guriddo_jqGrid_JS_5.4.0-Trial/js/jquery.jqGrid.min.js"></script>
<script src="./Guriddo_jqGrid_JS_5.4.0-Trial/js/i18n/grid.locale-en.js"></script>

▼제이쿼리 그리드 css 파일

<link rel="stylesheet" href="./Guriddo_jqGrid_JS_5.4.0-Trial/css/ui.jqgrid-bootstrap-ui.css">
<link rel="stylesheet" href="./Guriddo_jqGrid_JS_5.4.0-Trial/css/ui.jqgrid-bootstrap.css">
<link rel="stylesheet" href="./Guriddo_jqGrid_JS_5.4.0-Trial/css/ui.jqgrid-bootstrap4.css">
<link rel="stylesheet" href="./Guriddo_jqGrid_JS_5.4.0-Trial/css/ui.jqgrid.css">

▼제이쿼리 UI css 파일

<link rel="stylesheet" href="./jquery-ui-1.12.1.custom/jquery-ui.css">
<link rel="stylesheet" href="./jquery-ui-1.12.1.custom/jquery-ui.structure.css">
<link rel="stylesheet" href="./jquery-ui-1.12.1.custom/jquery-ui.theme.css">

 

▼javascript

var dataArr = [ 
         {ID:"1",javascript:"80",python:"60",jsp:"50"},
         {ID:"2",javascript:"57",python:"80",jsp:"50"},
         {ID:"3",javascript:"90",python:"40",jsp:"85"},
         {ID:"4",javascript:"67",python:"84",jsp:"76"},
         {ID:"5",javascript:"35",python:"83",jsp:"85"},
         {ID:"6",javascript:"90",python:"67",jsp:"56"},
         {ID:"7",javascript:"80",python:"60",jsp:"50"},
         {ID:"8",javascript:"45",python:"67",jsp:"100"},
         {ID:"9",javascript:"90",python:"40",jsp:"68"},
         {ID:"10",javascript:"67",python:"57",jsp:"76"},
         {ID:"11",javascript:"36",python:"83",jsp:"35"},
         {ID:"12",javascript:"76",python:"35",jsp:"98"},
         ]; 
         
	$("#jqGrid").jqGrid({
        datatype: "local",
        data: dataArr,
        height: 250, 
        width: 500,
        colNames : ['ID','자바스크립트','파이썬','JSP'], 

        colModel:[
            {name:"ID",
            index:"ID",
            width:15,
            align:'center',
            hidden:false
            },

            {name : 'javascript',
            index : 'javascript',
            width : 70, 
            align : 'left',
            hidden:false,
            },

            {name : 'python',
            index : 'python',
            width : 70, 
            align : 'center',
            hidden:false
            },

            {name : 'jsp',
            index : 'jsp',
            width : 70, 
            resizable : true,
            align : 'right',
            hidden:false
            }],

        loadtext: "로딩중일때 표시되는 텍스트!",
        caption: "jQuery Grid: jqGrid 샘플",

        pager:"#gridpager",
        rowNum:5,

        //rownumbers:true,
        //viewrecords:true,
        //pgbuttons:true,
        //pginput:true,
        //shrinkToFit:true,
        //sortable: false,
        //loadComplete:function(data){},
        //scroll:true,
        //loadonce:false,
        //hidegrid:true
        }); 

 

이렇게 보니 하나도 모르겠군요.. 코드는 따로 아래에서 설명하겠습니다.

 

 

코드 설명

---

○ dataArr

var dataArr = [ 
         {ID:"1",javascript:"80",python:"60",jsp:"50"},
         {ID:"2",javascript:"57",python:"80",jsp:"50"},
         {ID:"3",javascript:"90",python:"40",jsp:"85"},
         {ID:"4",javascript:"67",python:"84",jsp:"76"},
         {ID:"5",javascript:"35",python:"83",jsp:"85"},
         {ID:"6",javascript:"90",python:"67",jsp:"56"},
         {ID:"7",javascript:"80",python:"60",jsp:"50"},
         {ID:"8",javascript:"45",python:"67",jsp:"100"},
         {ID:"9",javascript:"90",python:"40",jsp:"68"},
         {ID:"10",javascript:"67",python:"57",jsp:"76"},
         {ID:"11",javascript:"36",python:"83",jsp:"35"},
         {ID:"12",javascript:"76",python:"35",jsp:"98"},
         ]; 

임의의 데이터 배열을 선언했습니다. json형태의 배열입니다.

 

○ jqGrid

$("#jqGrid").jqGrid({

테이블의 id를 선택하여 제이쿼리그리드로 만들어줍니다.

 

○ datatype, data

datatype: "local",
data: dataArr,

 

위에서 dataArr 배열을 선언하여 사용하기 떄문에 datatype은 "local"로 설정했습니다. 

datatype은 이외에도 다양한 종류를 사용할 수 있습니다.

• xml
• json
• jsonp
• array
• xmlstring
• jsonstring
• script
• function (…)

자세한 내용은 References에 적어둔 제이쿼리 그리드 API를 참고해주세요.

 

○ height, width

height: 250, 
width: 500,

그리드 테이블의 높이와 넓이를 설정할 수 있습니다.

 

○ colNames

 colNames : ['ID','자바스크립트','파이썬','JSP'], 

column의 이름을 설정 할 수 있습니다.

 

○ colModel

colModel:[
          {name:"ID",
          index:"ID",
          width:15,
          align:'center',
          hidden:false
          },

column별 설정을 할 수 있습니다. name은 data의 이름과 일치해야 합니다.

 

○ loadtext, caption

loadtext: "로딩중일때 표시되는 텍스트!",
caption: "jQuery Grid: jqGrid 샘플",

loadtext는 말 그대로 그리드 테이블이 로딩중일 때 표시되는 텍스트를 지정할 수 있습니다.

caption은 테이블의 이름(?)을 지정할 수 있습니다. 옵션을 사용하지 않으면 더 깔끔(?)해집니다. caption을 비워서도 사용해보세요.

 

○ pager, rowNum

pager:"#gridpager",
rowNum:5,

 

 

페이징 기능을 사용할 때 설정할 수 있는 옵션입니다.

pager 속성은 html에 지정해둔 <div> 태그의 아이디를 입력하면 됩니다.

rowNum 한 페이지에 몇개의 row를 표시할지 설정할 수 있습니다. row의 개수가 넘어가면 자동으로 다음페이지가 생성됩니다.

 

 

 

더 자세한 옵션을 확인하고 싶으시다면 제이쿼리 그리드 API를 참고하십시오.

 

http://www.trirand.com/jqgridwiki/doku.php?id=start

start - jqGrid Wiki

 

 

Post

---

•  

References

---

• jQuery-Grid Download
• http://www.trirand.com/jqgridwiki/doku.php?id=start

---

잘못된 코드나 내용이 있다면 댓글을 남겨주세요. 즉시 수정하도록 하겠습니다! :)