jqGrid 기본속성

 

 

var grid = jQuery("#grid1");
        grid.jqGrid({
            url: '/sample/openSampleBoardList.do',
            mtype: "POST",
            datatype: "local",
            postData : JSON.stringify(  jQuery("#frm01").serialize() ),
            editUrl : 'clientArray',
            cellSubmit: 'clientArray',
            colNames: ['글번호', '제목', '설명'],                    
            colModel:[
                      {  name: 'SAMPLE_NO'    , width:30  , align:'center'   },
                      {  name: 'TITLE'        , width:30  , align:'left'     },   
                      {  name: 'DESCRIPTION'  , width:30  , align:'left'     }                      
            ],
            loadtext : "<img src='/images/loading.gif' />",            
            width:1145,                
            height :540,
            regional : 'kr',
            viewrecords: true,                        
            pager: "#pager1",
            page:1,
            pgbuttons:true,
            rowNum:10,            
            recordpos:'right',       //우측좌측 기준변경 records의 위치 설정
            rowList : [ 20, 50, 100, 500 ],
            loadonce : false,            // 데이타 가져오는 방식 true: 최초 한번 ,
            rownumbers : false, // 줄번호 표시 여부        
            altRows:true, 
            gridview:true,
            sortable : true,
            caption: '게시판 목록',
            jsonReader: {
                page: 'page',
                total: 'total',            
                root: 'rows',
                repeatitems:false
            },
            loadComplete : function(data){ //데이타 로딩후 
                           },
            onSelectRow : function(id){                            // 로우 클릭
                
            },
            ondblClickRow : function(rowid, status, e){        //로우 더블클릭
            }
        });    

 

url : 데이터를 가지고 올 수 있는 주소를 지정함

mtype : 요청방식을 설정함. GET / POST

datatype : grid에 바인딩할 데이터 형식을 지정한다. json, xml ,local 주로 세가지 사용함

colName: 헤더에 출력할 컬럼의 이름을 배열형태로 적음

colModel: 각 컬럼에 대한 상세 정보를 설정함. 예제소스 참조

jsonReader/xmlReader : 데이터 타입에 따라 reader를 통해 데이터를 어떻게 읽는지 설정함

rowNum : 초기에 출력될 데이터의 개수를 설정함

rowList : 출력된 데이터 리스트를 콤보형태로 표시함

loadonce : 데이터를 가져오는 방식 true인경우는 한번만 가져옴. 페이징을 할거면 false가 나음.

pager: 그리드에 대표기능인 페이징을 설정함 div id를 지정함

autowidth : true 이면 알아서 화면에 곽차게 하며, false 이면 width 속성을 줘서 가로사이즈를 지정함

width : 그리드 가로사이즈

height : 그리드 세로사이즈

shrinkToFit : true 인경우 그리드 width에 맞춰 자동으로 맞춰짐

rownumbers : true 인경우 순번이 생성됨

altRows: true 인경우 title태그 처럼 값이 커서에 자동 표시됨

multiselect : true인경우 여러줄을 선택할 수 있다.

viewrecords : true인경우 전체 레코드의 수를 표현할지를 여부