$(document).ready(function() {
$(“#list”).jqGrid({ 선언부분 });
});
/ jqGrid url 전송 선언 : url, datype, mtype
url : ‘<c:url value="/" />/sample.do’, // url 선언
datatype : ‘json’, // 데이터 타입 지정
mtype : 'POST', // 데이터 전송 방식 지정
postData : {}, // url 보낼 값 설정, 검색조건 등의 초기값을 보낼 때 사용
// jqGrid 양식 선언부 caption, colNames, colModel, width, height 선언
caption : 'example Grid'; // caption 네임 설정 기본 미설정
colNames : ['컬럼1','컬럼2'], // 컬럼 헤더 설정
colModel : [{name : 'col1', index : 'col1', width : '100', align : 'center'},
{name : 'col1', index : 'col1', width : '100', align : 'center'}
],
width : 'auto', // 그리드의 넓이를 지정한다.
height : '100', // 그리드의 높이를 지정한다.
// jqGrid 추가 옵션 영역
loadonce : false, // ture로 설정할 경우 현재 조건으로 조회된 전체데이터를 DB를 다시 가져오지 않고 사용한다.
loadui : 'disable', // jqGrid 기본 로딩ui의 사용여부를 설정한다.
shrinkToFit : false, // Grid 전체 넓이에 맞춰서 자동으로 컬럼크기를 설정함 default:true
gridview : true, // 처리속도를 빠르게 해 줌. 뿌려 준 Grid 디자인을 재사용하게 하여 로딩시간을 개선
rownumbers : true, // rownum 표시여부
rownumWidth : 30, // rownum 컬럼 넓이 지정
rowNum : 15, // 한 화면에 표시할 행 개수를 지정한다.
rowList : [15,30,50,100], // rowList : rowNum을 선택할 수 있는 옵션을 지정한다.
pager : '#pager', // pager : 도구 모임이 될 div 태그를 지정한다.
viewrecords : true, // 데이터 건수를 pager에 보여줄 것인지를 설정
sortable : true, // 정렬 사용 여부 설정
sortname : 'regdt', // default Sort 조건
sortorder : 'desc', // sort 방법 설정
multiselect : true, // 그리드 좌측에 콤보박스 추가
cellEdit : true, // 셀수정 여부 설정. false로 설정할 경우 그리드 콤보 박스를 제외하고 전체 lock 상태가 된다.
cellsubmit : 'clientArray', // 수정된 사항이 local에 일단 저장된다는 의미임.
editurl : './example.jsp',
//footerrow : true, // summary footer 사용함
//userDataOnFooter : true,
// jqGrid 함수 선언 영역
beforeSelectRow : function(rowid){}, // 사용자가 클릭한 순간 발생하며 rowid 값을 전달한다. true, false를 return 값으로 반환하여 다음 이벤트 실행여부를 결정한다.
onSelectRow : function(rowid, status){}, // 행의 선택 버튼을 눌렀을 때 발생하는 이벤트 처리를 위해 사용된다.
onCellSelect : function(rowid, iCol, cellcontent){}, // cell을 선택할 때마다 필요한 처리를 실행하기 위해 사용된다. 클릭이벤트시 rowid, columnindex, cell데이터가 입력된다.
ondblClickRow : function(rowid, iRow, iCol){}, // cell을 더블클릭시 발생하는 이벤트 처리를 위해 사용된다.
onRightClickRow : function(rowid, iRow, iCol){}, // 셀에서 마우스 오른쪽 버튼을 눌렀을 때 발생하는 이벤트 처리를 위해 사용된다.
afterEditCell : function(id,name,val,iRow,iCol){}, // Cell 수정 후 이벤트
afterSaveCell : function(rowid,name,val,iRow,iCol){}, // cell 저장 후 발생한다.
afterInsertRow : function(rowid){}, // addrow 이벤트가 발생한 뒤에 수행되는 이벤트를 정의한다.
rowattr : function(rowData, currentObj, rowid){}, // 행이 추가되는 순간 발생되는 이벤트를 위해 사용된다.
beforeProcessing : function(data, status, xhr){}, // 서버로부터 데이터를 받은 후 화면에 찍기 위한 processing을 진행기 직전에 호출된다. 넘어온 data와 status, xhr 등을 받아 성공했는지 여부에 대해 알 수 있다.
beforeRequest : function(){}, // 서버로 데이터를 요청하기 직전에 호출된다.
onHeaderClick : function(gridstate){}, // 캡션에서 그리드 숨기기/펼치기 버튼을 눌렀을 때 이벤트 처리를 위해 사용된다.
onSelectAll : function(aRowids, status){}, // 헤더의 선택 버튼을 눌렀을 때 발생하는 이벤트 처리를 위해 사용된다.
onSortCol : function(index, iCol, sortorder){}, // 헤더의 컬럼명을 눌러 정렬하는 경우 호출된다.
onPaging : function(pgButton){}, // 사용자가 페이징 관련 버튼을 눌렀을 때 이벤트를 호출한다. next, prev, first, last 버턴을 눌렀을 때 이벤트 처리를 한다.
resizeStart : function(event, index){}, // 컬럼의 사이즈를 변경하기 위해 선택하는 경우 발생되는 이벤트를 위해 사용된다.
resizeStop : function(newwidth, index){}, // 컬럼의 사이즈를 변경하고 선택을 취소할 때 발생되는 이벤트를 위해 사용된다.
gridComplete : function(){}, // grid가 모든 작업을 완료한 이후에 발생한다.
loadBeforeSend : function(xhr, settings){}, // xhr에 의해 서버로 요청이 들어가기 전에 호출된다. 요청전 헤더값 설정 등에 사용된다. 만약에 이 함수가 false를 리턴하면 요청이 취소된걸로 본다.
loadComplete : function(data){}, // 서버에 요청을 보낸 후 완료되면 호출된다.
loadError : function(xhr, status, error){}, // 요청 실패시에 호출된다.
// jsonReader 선언 영역
jsonReader : {
repeatitems : false,
total :"total",
page :"page",
records :"records",
rows :"rows"
}
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
jQuery 선택자 정리 (0) | 2022.07.19 |
---|---|
jQuery : $(window).load, $(document).ready 로드 후 실행되는 시간 (0) | 2020.01.31 |
jquery 화면 상단으로 이동 (0) | 2019.12.19 |
자바스크립트 event.keyCode (0) | 2016.04.26 |
jQuery selectBox 제어 (0) | 2016.04.14 |