본문 바로가기

웹 개발/jQuery

jqGrid 설명 01


jQuery('#grid_selector').jqGrid( options )

 options에 해당하는 속성들.

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의 제목을 설정하는 것. 이 부분이 없으면 제목은 보여지지 않는다.