<!-- for jquery -->
<script type="text/javascript" src="/jquery/jquery-1.4.2.min.js">
<!-- jquery:autocomplete -->
<link rel="stylesheet" type="text/css" href="/jquery/autocomplete/jquery.autocomplete.css">
<script type="text/javascript" src="/jquery/autocomplete/jquery.autocomplete.js">
<script type="text/javascript" src="/jquery/autocomplete/jquery.bgiframe.min.js">
<!-- jquery:jstree-0.9.9 -->
<script type="text/javascript" src="/jquery/jstree/lib/jquery.cookie.js">
<script type="text/javascript" src="/jquery/jstree/lib/jquery.metadata.js">
<script type="text/javascript" src="/jquery/jstree/jquery.tree.js">
<script type="text/javascript" src="/jquery/jstree/plugins/jquery.tree.contextmenu.js">
<script type="text/javascript" src="/jquery/jstree/plugins/jquery.tree.cookie.js">
<!-- jquery ui, jqGrid -->
<script type="text/javascript" src="/jquery/jqgrid/i18n/grid.locale-en.js">
<link href="/jquery/jquery-ui/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/jquery/jquery-ui/jquery-ui-1.7.2.custom.min.js">
<link href="/jquery/jqgrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/jquery/jqgrid/jquery.jqGrid.min.js">
<!-- jquery popup -->
<script type="text/javascript" src="/jquery/nyromodal/js/jquery.nyroModal-1.6.2.pack.js">
<link href="/jquery/nyromodal/styles/nyroModal.css" rel="stylesheet" type="text/css" />
<!-- jquery tab -->
<link href="/jquery/jquery-ui/jquery-ui.css" rel="stylesheet" type="text/css" />
<!-- jquery uploadify -->
<script type="text/javascript" src="/jquery/uploadify/swfobject.js">
<script type="text/javascript" src="/jquery/uploadify/jquery.uploadify.v2.1.0.min.js">
<!-- jquery image dropdown -->
<script type="text/javascript" src="/jquery/dropdown/msdropdown/js/jquery.dd.js">
<link href="/jquery/dropdown/msdropdown/dd.css" rel="stylesheet" type="text/css" />
이 중 간단한 Autocomplete 기능을 예로 들어보면, 아래와 같은 간단한 코드로 Auto Complete 기능을 적용하실 수 있습니다.$(“#searchKeyword”).autocomplete(
””, {
width : 200,
scrollHeight : 200,
selectFirst:true,
mustMatch:true,
matchCase:true,
autoFill:true,
scroll: true
});
위와같이 url을 지정해 주면 바로 autocomplete 기능을 사용할 수 있습니다.
jquery-autocomplete| <script src="./jquery.js"></script> 이런식으로 넣어주면 이제 모든 준비가 끝났다. 그럼 간단하게 제이쿼리에 맛만 보고 글을 마치겠습니다. 자바스크립트에서 해당 ID를 찾을 쓰는 구문을 제이쿼리로 한다면 document.getElementById("test") -> $("#test") 자바스크립트로 스타일을 변경하고 싶을때 document.getElementById("test").style.display = 'none' -> $("#test").css("display","none") 자바스크립트로 select box 안에 선택된 값을 찾을때 document.getElementById("test").options[document.getElementById("test").selectedIndex].value -> $("#test option:selected").val() 자바스크립트로 checkbox 중 선택된거 알아올때 var ck = document.getElementByName("test"); var str = ""; for(var i = 0;i<ck.length;i++){ if(ck[i].chekced) str += ck[i].value + "|"; } -> var str = ""; $("#test:checked").each( str += $(this).val() + "|"; ); |
Property
|
Description
|
url
|
tells us where to get the data. Typically this is a server-side function with a connection to a database which returns the appropriate information to be filled into the Body layer in the grid
- 데이터를 가지고 와야할 url을 지정하는 곳. DB연결 동시에 적합한 정보를 body부분의 grid에 채워주는 server-side 기능이다.
|
datatype
|
this tells jqGrid the type of information being returned so it can construct the grid. In this case we tell the grid that we expect xml data to be returned from the server, but other formats are possible. For a list of all available datatypes refer to API Methods
- grid가 생성될때 리턴된 정보의 타입을 적는 곳. 이 경우 서버로부터 xml 데이터를 가져와 처리가능하고 다른 형식(타입)도 가능하다. 자세한 것은 API 메소드 보고 알아서 하라.
|
mtype
|
tells us how to make the ajax call: either 'GET' or 'POST'. In this case we will use the GET method to retrieve data from the server
- GET 방식으로 호출할지 POST로 호출할지를 적는 곳. 대부분 GET으로 이용한다.
|
colNames
|
an array in which we place the names of the columns. This is the text that appears in the head of the grid (Header layer). The names are separated with commas
- 컬럼의 이름을 지정하는 곳. Header Layer에 표시된다.
|
colModel
|
an array that describes the model of the columns. This is the most important part of the grid. Here I explain only the options used above. For the complete list of options see colModel API:
name
the name of the column. This name does not have to be the name from database table, but later we will see how we can use this when we have different data formats
- 컬럼의 이름. 이름은 DB Table의 이름이 될 수 없으며, 추후 서로 다른 타입의 데이터 타입의 정보를 가지고 있을때 어떻게 사용할 수 있는지 볼 수 있다.
index
the name passed to the server on which to sort the data (note that we could pass column numbers instead). Typically this is the name (or names) from database -- this is server-side sorting, so what you pass depends on what your server expects to receive
- 데이터 정렬을 위한 인덱스. (DB의 테이블의 컬럼명을 따른다.)
width
the width of the column, in pixels
align
the alignment of the column
sortable
specifies if the data in the grid can be sorted on this column; if false, clicking on the header has no effect
|
pager
|
defines that we want to use a pager bar to navigate through the records. This must be a valid html element; in our example we gave the div the id of "pager", but any name is acceptable. Note that the Navigation layer (the "pager" div) can be positioned anywhere you want, determined by your html; in our example we specified that the pager will appear after the Body layer.
- 여러 데이터를 페이지 bar 하기 위해 선언하는 것. 반드시 유효한 element 여야 한다.
Navigation layer( Div : pager ) 를 이용하여 원할때 어디서든지 사용 가능하다.
|
rowNum
|
sets how many records we want to view in the grid. This parameter is passed to the url for use by the server routine retrieving the data
- grid에 몇개의 데이터를 보여 줄 것인지 지정 하는 것.
|
rowList
|
an array to construct a select box element in the pager in which we can change the number of the visible rows. When changed during the execution, this parameter replaces the rowNum parameter that is passed to the url
- pager의 select box가 생성될때 배열로 볼수 있는 데이터의 수를 지정한다. 갯수가 바뀌어 실행이 되면 rowNum 파라미터가 자동적으로 바뀌게 되어 url로 전송이 되어 다시 데이터를 가져온다.
|
sortname
|
sets the initial sorting column. Can be a name or number. This parameter is added to the url for use by the server routine
- 초기화 될때 sort할 컬럼을 지정한다. 숫자 or 컬럼 이름일 수 있고, 서버 루틴 사용을 위한 파라미터에 추가되는 것(?)
|
sortorder
|
sets the sorting order. This parameter is added to the url
- 정렬 방법 (desc | asc)
|
viewrecords
|
defines whether we want to display the number of total records from the query in the pager bar
- 총 레코드 수를 pager bar에 표시할 것 인지 지정하는 것.
|
imgpath
|
the path to the images needed for the grid. The path should not end with '/'
- 생략
|
caption
|
sets the caption for the grid. If this parameter is not set the Caption layer will be not visible
- Grid의 제목을 설정하는 것. 이 부분이 없으면 제목은 보여지지 않는다.
|
