본문 바로가기
Web과 프로그래밍 언어/JavaScript

[jQuery] jqGrid 만들기 (guriddo.net) / 플러그인 사용하기

by cosmicgy 2022. 11. 1.

 

<jQuery Grid plugin 다운로드>

 

1. jQuery Grid Plugin – jqGrid » Downloads (trirand.com) 에 접속한다. 

 

2. 다운로드 한다. 

 

3. 압축을 푼다.

 

< Guriddo.net>

 

1. Guriddo 에 접속한다. 

2. Demo → Guriddo jqGrid Booststrap JavaScript Demo 

(아래의 페이지에서 Demo 탭 클릭 이후에는 본인이 필요한 항목 클릭하면 된다)

 

 

3. 상단 탭에서 필요한 내용을 클릭하거나 왼쪽 메뉴 탭에서 필요한 기능 구현을 선택한다. 

 

 

4. 예시를 확인한다.

 

 

5. HTML 탭과 Data.JSON 탭의 코드를 사용하면 위의 예시와 같은 테이블이 완성된다. 

 

 

* 중요 

<head> 태그 부분에 첨부된 외부 파일들을 위에서 jqgrid plugin 다운로드 한 폴더에서 찾아 내가 만들고 있는 폴더에 추가해야한다. 

css 도 전부 마찬가지! 특히 css 의 경우는 image 폴더 안에 들어있는 이미지도 함께 넣어주어야 함!

예시) src부분에 ../../../js/trirand/i18n/grid.locale-en.js 로 적혀있으니  다운받은 jqgrid plugin 폴더에서 

js → trirand → i18n 폴더에 들어가 grid.locale-en.js 파일을 찾아 내가 작성하는 파일이 있는 폴더에 넣어준다. 

 

<head>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="../../../js/jquery.min.js"></script> 
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>
    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid-bootstrap.css" />

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <meta charset="utf-8" />
    <title>jqGrid Loading Data - Million Rows from a REST service</title>
</head>

 

- 이클립스 폴더 

하지만.. 이제 jQuery는.. 쓰지 않는 걸...