[jQgrid] 관련 정리.

2014. 12. 23. 11:16ㆍIT/Tips!

이번에 jQgrid 사용하면서 정리가 필요한 내용.

 

- editable이 true이면 sortable 옵션등을 사용못함?

 

- edittype에 따른 editoptions을 다양하게 사용할 수 있음.

   :: 데이터 입출력 및 화면처리 가능함

   :: 혹자는 beforeSubmitCell 과 같은 내장 함수를 이용

   :: 나는 셀렉트박스를 구현하면서 dataEvents를 이용

   예)

1
2
3
4
5
6
7
8
9
10
11
 
editable: true,                                       // 수정가능 여부
formatter : 'select',                                 // SELECT 포매터
edittype:'select',                                    // EDIT타입 : SELECT
editoptions:{ value:"Y:이상유;N:이상무;:-",             // EDIT옵션(SELECT, INPUT, CHECKBOX등 옵션 상이함)
                dataEvents:[{
                    type:'change',
                    fn:function(e) {                // 값 : this.value || e.target.val()
                        fn_SaveAttention(this);
                        jQuery("#gridList").saveRow(this.id[0], true);
                    },
                }] },
 cs

     :: dataEvents에서 this.id의 형식은 >> [rowId]_[colName] , 위의 this.id[0]처럼 배열로 값을 구분하여 가져올 수 있음

- jqGrid에서 input객체들이 안 먹을 때에는 jqGrid에 수정이 가능한지 확인해야함
   Model에서의 옵션은 editable, jqGrid자체에 대한 옵션은 rowEdit, CellEdit

 

- jqGrid 헤더 클릭 정렬 이벤트

1
2
3
4
5
6
7
8
9
10
11
 
onSortCol: function(columnName, columnIndex, sortOrder) {        // 헤더 클릭 이벤트 : 칼럼명, 인덱스, 정렬순서
    var records = jQuery("#gridList").getGridParam("records");    // 데이터 그리드 체크
    if(records == 0) {
        alert("검색버튼을 클릭하세요.")
        return;
    }
    jQuery("#sortColumnId").val(columnName);            // 정렬대상 칼럼명
    jQuery("#sortOrder").val(sortOrder);                // 정렬타입  : ASC, DESC              
 
    searchAjaxSubmit("", 1, "Y");                    // 데이터 그리드 그리기
},
 cs

 

- jGrid 내비게이션 페이징 이벤트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
onPaging: function(action){                                     // 내비게이션 페이징 이벤트 : first, prev, next, last, user
    var pageIndex         = jQuery("#gridList").getGridParam("page");            // 페이지 인덱스
    var lastPageX         = jQuery("#gridList").getGridParam("lastpage");        // 마지막 페이지
    var sortAt             = "";                                                        // 정렬 여부
    var sortColumnId     = jQuery("#sortColumnId").val();                        // 정렬 칼럼명
    var sortOrder         = jQuery("#sortOrder").val();                            // 정렬 순서
    
    if(sortColumnId != "" && sortOrder != "") {            // 정렬조건이 세팅되어 있으면 "Y"
        sortAt = "Y";
    }
 
    if(action == "next_subPager"){            // 다음 페이지
        searchAjaxSubmit("", ++pageIndex, sortAt);
    } else if (action == "prev_subPager") {    // 이전 페이지
        searchAjaxSubmit("", --pageIndex, sortAt);
    } else if (action == "first_subPager") {    // 첫 페이지
        searchAjaxSubmit("", 1, sortAt);
    } else if (action == "last_subPager") {    // 마지막 페이지
        searchAjaxSubmit("", lastPageX, sortAt);
    } else if (action == "user") {                // 사용자 입력 페이징 처리
        var nowPage = jQuery(".ui-pg-input").val();                
        // 입력한 값이 총 페이지수보다 크다면 수행
        if( lastPageX < nowPage ) {    nowPage = lastPageX;    }                     
        searchAjaxSubmit("", nowPage, sortAt);
    }
},    
 cs

 

- 선택자를 이용하여 jqGrid 내비게이션 rowList 변경시 이벤트 부여. 초기 페이지 인덱스 1로 세팅

1
2
3
4
 
// JqGrid 내비게이션 rowList 변경시 이벤트 부여.    초기 페이지 인덱스 1로 세팅
jQuery(".ui-pg-selbox").change(function(){
    searchAjaxSubmit("", 1, "");
});
 cs

- 선택한 Cell의 값, 정보 출력

  :: $(그리드ID).getCell(rowId, colNo) 혹은 getCell(rowId, 칼럼명)
 

- 멀티 셀렉트(체크박스) 옵션

  :: multiselect 를 사용
  :: 체크박스 자동 체크 >> $(그리드ID).jqGrid("setSelection", rowId);
  :: 체크된 모든 값 가져오기 >> $(그리드ID).getGridParam("selarrrow");

 

졸렵다. 끝.

 

 

 

저작자표시 비영리 동일조건

'IT > Tips!' 카테고리의 다른 글

JQuery 및 CSS 관련 팁 사이트  (0) 2014.08.25
[JQUERY] 자주 쓰이는 팁 [퍼옴]  (0) 2014.08.04
[VMWare] 원격 설정 및 테스트? 텔넷 '^]' 에러?  (0) 2014.07.01
[이클립스(Eclipse)] 조판부호, 문단부호(공백문자) 보이기/없애기  (2) 2014.04.07
[자바스크립트] 숫자 입력시 정규식을 이용한 자릿수 제한 - 퍼옴  (2) 2014.01.03

관련글

티스토리툴바