jquery] jqgrid plugin 사용

원본출처 :  http://dev.henjjang.com/414

jqGrid를 기억하고자 이번 포스팅을 작성한다. jqGrid 사이트 와 데모사이트를 통해서 관련된 여러정보를 얻을 수 있지만 사용했던것을 정리하지 않으면 기억했던것을 또 찾아야 하는 일이 되풀이 되곤한다.

버전

- 최근(2010.07.12)에 릴리즈 된 버전이 3.7.2 버전이다. 3.7.2 버전에서 변화된 내용은 다음에서 확인할 수 있다. 3.7 버전은 다음의 내용을 담고 있다.

 

+ Load array data at once

+ Load at once from server

+ Single search

+ Multiple search

+ Virtual scrolling

+ Toolbar search

+ Add/edit/delete on local data

 

- 2010.8월 Grouping 이 가능한 jqGrid 3.8 Beta 버전을 공개했다.

jqGrid 시작하려면

 

- jqGrid 를 시작하려면 jQuery를 알아야 한다. javascript 프레임워크, 또는 라이브러리라고 부를 수 있는 jQuery 에 대해서는 추후 정리해야겠다. 

 

<!-- BEGIN: load jQuery UI theme -->

<link type="text/css" href="./css/themes/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" /><!-- END: load jQuery UI theme -->

<!-- BEGIN: load jQuery -->

<script type="text/javascript" src="./js/jquery-1.4.2.js"></script>

<!-- END: load jquery -->

<!-- BEGIN: load jQuery UI-->

<script type="text/javascript" src="./js/jquery-ui-1.8.2.custom.min.js"></script>

<!-- END: load jQuery UI-->

 

[code 1 : jquery theme, jquery ui, jquery 선언부]

- [code 1] 은 ui-lightness 테마를 적용하고, jquery ui, jquery 관련되어 선언하는 부분이다. 

jqGrid 시작하기

 

- jqGrid 시작하기

jqGrid 다루기

 

- jqGrid 다루기

* id가 13 인 값을 선택한다.

jQuery("#list9").jqGrid('setSelection',"13");<font class="Apple-style-span" color="#333333" face="굴림"><span class="Apple-style-span" style="line-height: 18px; white-space: normal;"><font class="Apple-style-span" color="#222222" face="monospace"><span class="Apple-style-span" style="line-height: 15px; white-space: pre;"><br /> </span></font></span></font>

참고사이트

 

- jQuery Grid Plugin site

- jQuery Demos