[jQuery] Jqgrid 설정방법

2013. 12. 12. 11:29ㆍ개발관련기록/JQuery

반응형

참고할 사이트


jQuery Grid : http://www.trirand.com/blog/


에서 플러그인 다운받습니다

추가적으로 수정, Subgrid, 그룹 등등... 있는데


jQuery Gird Demo : http://trirand.com/blog/jqgrid/jqgrid.html  에서 확인하면

어떤 것들인지 알수 있습니다


wiki jqgird : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs 에 설명서가 있습니다


그리고 빠질수 없는 jQuery 받아야 합니다 여기서 jqgrid 는 jQuery UI 를 쓰다보니


http://jquery.com




데모를 보면 Redmond UI 인 것을 알수 있습니다 같은 것 으로 다운받겠습니다



목표 - 간단한 jqgrid 만들기





  

  1. 제일 처음에 받은 jquery.jqGrid-4.4.0 압축을 풉니다,(이제 이 폴더 기준으로 구성해 나갑니다)

      

  

  2. jquery-ui-1.8.21.custom 도 압축을 풀고 css 폴더에  css 파일과 images 있는 것 을

      jquery.jqGrid-4.4.0 풀었던 css 폴더에 복사 합니다


      


     즉, UI 를 위해 저 파일들이 필요 합니다


  3. js 에는 최신 jQuery 를 넣습니다 현재 jquery-1.7.2.min.js 가 최신이네요


     이제 최소의 jqgrid 만드는 준비 작업은 다 끝났습니다



1.  Doctype 선언 주의 

       문서 호환에 관련이 있다는데 Grid can not be used in this ('quirks') mode!

       메세지를 띄우는 경우가 있다네요 그래서


      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


      으로 선언합니다. 그리고 저렇게 해야 레이아웃 , 크기가 제대로 나옵니다


2. 지역 설정 js 파일이 있는데 grid.locale-en.js 이 기본으로 영어로 나옵니다

    이 것을 한글로 수정해서 올리신 분이 있는데 배포 & 수정이 자유라 받아서 넣었습니다


3. 기본적인 jqgrid 소스

 

- 메인 파일(jqgrid.html)


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4.  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Insert title here</title>
  7.  
  8.     <link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
  9.     <link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
  10.  
  11.     <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
  12.     <script src="js/i18n/grid.locale-kr_utf-8.js" type="text/javascript"></script>
  13.     <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
  14.  
  15.     <script type="text/javascript">
  16.         jQuery(document).ready(function(){
  17.  
  18.             jQuery("#JQ_list").jqGrid({
  19.                 url:'report_load.php',
  20.                 datatype: 'json',
  21.                 mtype: 'GET',
  22.                 colNames:['번호','사번','FN','LN','전화번호','입사일','급여'],
  23.                 colModel :[
  24.                   {name:'rownum', index:'rownum', width:80, align:"right"},
  25.                   {name:'emp_id', index:'emp_id', width:100, align:"center"},
  26.                   {name:'first_name', index:'first_name', width:100, align:"center"},
  27.                   {name:'last_name', index:'last_name', width:70, align:"center"},
  28.                   {name:'phone_number', index:'phone_number', width:160, align:"center" },
  29.                   {name:'hire_date', index:'hire_date', width:80, align:"center"},
  30.                   {name:'salary', index:'salary', width:70, summaryType:'sum', align:"right", formatter:"integer", formatoptions:{thousandsSeparator:","}},
  31.                 ],
  32.                 pager: '#pager',
  33.                 rowNum:50,
  34.                 rowList:[10,50, 100],
  35.                 sortname: 'rownum',
  36.                 sortorder: 'asc',
  37.                 viewrecords: true,
  38.                 caption: '보고서',
  39.                 height: 'auto'
  40.            });
  41.  
  42.         });
  43.     </script>
  44.  
  45. </head>
  47.     <table id="JQ_list"></table>
  48.     <div id="pager"></div>
  49. </body>
  50.  
  51. </html>


4 . 컬럼 출력이나 기타 함수들 그룹, 수정 등등 데모와 위키 설명서를 참고하면 됩니다

     데모에 나왔다듯이 현재 JSON 를 받아서 출력해주는데 XML 도 됩니다


5.  나머지 소스들은 그냥 JSON 로 보내기 위한 파일들입니다


- 정보 제공파일(report_load.php), 테스트용입니다, 실제론 디비에서 가저와야 겠죠..page,total,records 도 대충 지정했습니다


  1. <?php
  2.  
  3. ini_set('display_errors','On');
  4.  
  5. $arr_cell = array('1','20001234','상일','김', '010-5061-998x', '2000-01-02', '50650');
  6. $arr_cell2 = array('2','20003456','길동','홍', '010-5345-1235', '2000-01-03', '54551');
  7. $arr_cell3 = array('3','20004567','철수','곽', '010-5456-4567', '2000-01-04', '55672');
  8. $arr_cell4 = array('4','20004577','영희','이', '010-5345-5676', '2000-01-05', '54563');
  9.  
  10.  
  11. $arr_row = array('id' => '20001234', 'cell' => $arr_cell);
  12. $arr_row2 = array('id' => '20003456', 'cell' => $arr_cell2);
  13. $arr_row3 = array('id' => '20004567', 'cell' => $arr_cell3);
  14. $arr_row4 = array('id' => '20004577', 'cell' => $arr_cell4);
  15.  
  16. $arr_rows = array($arr_row);
  17. $arr = array('page' => "1", "total" => "27", "records" => "13", 'rows' => $arr_rows);  
  18.    
  19. include 'Cjson.php';
  20.  
  21. $cj = new CJson();
  22.  
  23. $cj->jqGridAddDataInfo2(1, 13, 15);
  24. $cj->jqGridFirstColIdRowAdd($arr_cell);
  25. $cj->jqGridFirstColIdRowAdd($arr_cell2);
  26. $cj->jqGridFirstColIdRowAdd($arr_cell3);
  27. $cj->jqGridFirstColIdRowAdd($arr_cell4);
  28.  
  29. echo $cj->jqGridArrayToJson_encode();
  30.  
  31. ?>
  32.  
  33.  
  34.  
  35.  


 - JSON 를 더 쉽게 만들기 위해 테스트용 클래스 만들어 보았습니다


  1. <?
  2.  
  3. /**
  4.  * JSon Create Hepler_Test
  5.  * @author Niney 12.04
  7.  *
  8.  */
  9. class CJson {
  10.    
  11.     //$arr_cell = array('4527','niney','asdf','ksid', '010-3453-3455', '2000-01-01', '600.00');
  12.     //$arr_row = array('id' => '10', 'cell' => $arr_cell);
  13.     //$arr_rows = array($arr_row);
  14.     //$arr = array('page' => "1", "total" => "27", "records" => "13", 'rows' => $arr_rows);
  15.    
  16.     private $m_jqGridArr;
  17.     private $m_jqGridArrRows;
  18.    
  19.     function __construct() {
  20.         $this->m_jqGridArr = array();
  21.         $this->m_jqGridArrRows = array();
  22.     }
  23.    
  24.     public function jqGridRowAdd($id_colname, $arr_cell)
  25.     {
  26.         $row = array('id' => $arr_cell[$id_colname], 'cell' => $arr_cell);
  27.         array_push($this->m_jqGridArrRows, $row);
  28.     }
  29.    
  30.     public function jqGridCustomIdRowAdd($id_value, $arr_cell)
  31.     {
  32.         $row = array('id' => $id_value, 'cell' => $arr_cell);
  33.         array_push($this->m_jqGridArrRows, $row);
  34.     }
  35.    
  36.     public function jqGridFirstColIdRowAdd($arr_cell)
  37.     {
  38.         $row = array('id' => current($arr_cell), 'cell' => $arr_cell);
  39.         array_push($this->m_jqGridArrRows, $row);
  40.     }
  41.    
  42.     public function jqGridAddDataInfo1($arr_info, $arr_cell)
  43.     {
  44.         $this->jqGridAddDataInfo2($arr_info[page], $arr_info[total], $arr_info[records]);
  45.     }
  46.    
  47.     public function jqGridAddDataInfo2($int_page, $int_total, $int_records)
  48.     {
  49.         $this->m_jqGridArr = array('page' => $int_page, 'total' => $int_total, 'records' =>$int_records);
  50.     }
  51.    
  52.     public function jqGridArrayToJson_encode()
  53.     {
  54.         $this->m_jqGridArr['rows'] = $this->m_jqGridArrRows;
  55.         return json_encode($this->m_jqGridArr);
  56.     }
  57. }
  58.  
  59. ?>


참고 사이트

 - http://techbug.tistory.com/158


참고할만 사이트

 - http://comnori.blogspot.com/2011/09/jqgrid.html

[출처] jqgrid(jQuery Grid) 사용해 보기|작성자 니키아


반응형
저작자표시

'개발관련기록 > JQuery' 카테고리의 다른 글

[JQuery] JQuery TreeView 만들기(트리뷰)  (0) 2014.03.18
이클립스(Eclipse) jQuery 플러그인(자동완성 지원) JSDT 설치  (0) 2014.02.07
[JQuey] JQuey 강좌  (0) 2014.01.08
jQuery 플러그인  (0) 2010.07.28
JQuery 정보 Site 모음  (0) 2010.07.06

관련글

댓글 0

티스토리툴바