2012. 11. 23.

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

댓글 없음:

댓글 쓰기