jQgrid 사용하기(2)

이번 포스팅에선 저번 포스팅에 이어

그리드에 행추가 기능과 삭제 기능을 달아보자.

먼저 탭을 만들어주자

            <span><a href="#" onclick="javascript:jqgridTable.goSearch();">조회</a></span> 
            <span><a href="#" onclick="javascript:gridFunc.addRow();">행추가</a></span>
            <span><a href="#" onclick="javascript:jqgridTable.saveData();">저장</a></span>
            <span><a href="#" onclick="javascript:gridFunc.clearGrid();">초기화</a></span>
            <span><a href="#" onclick="javascript:jqgridTable.deleteData();">삭제</a></span>

위치는 알아서 찾아서 넣자.

onclick 함수에 의해 스크립트 함수를 실행한다. 

다음 addRow를 만들자

totCnt는 그리드 안의 총 카운트를 세주는데

getGridParam 함수를 사용한다.

getGridParam은 리턴타입이 int이고 getter 메소드만 제공한다.

서버에 요청하여 리턴받은 실제 레코드 수 이므로 사용자가

임의로 설정할 수 없다.

addRowData는 행추가를 할때 totCnt에 10을더한 행에 새로 추가된다.

setColProp는 속성을 설정해주는데 name값을 편집 가능하게 설정한것이다.

그리고 위 부분을 jsp 파일의

도큐먼트 레디 어딘가에 넣어주자

직접 찾아보자.

이렇게 하면 원래 있던 값도 수정을 할수있게 된다.

그러므로 원래값들은 수정할수 없게 하기위해

cellsubmit을 추가한다.

이부분은 clientArray와 remote 두속성을 제공한다.

remote 는 저장하는 순간 cellurl로 ajax를 타고간다.

하지만 clientArray는 ajax를 타지않고 어떤 다른 이벤트를

통해서 데이터를 처리해줘야 한다. 바로 ajax를 타지않는 다는거다

clientArray를 처리할 onCellSelect를 만들자

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

onCellSelect   : function(rowId, colId, val, e) {                  var seq = $("#jqGrid").getCell(rowId, 'seq');                                    if(colId == 2) {                     if(!CommonJsUtil.isEmpty(seq)) {                        $('#jqGrid').setColProp('name', {editable: false});                        $('#jqGrid').setColProp('phone', {editable: false});                        $('#jqGrid').setColProp('address', {editable: false});                     } else {                        $('#jqGrid').setColProp('name', {editable: true});                        $('#jqGrid').setColProp('phone', {editable: true});                        $('#jqGrid').setColProp('address', {editable: true});                     }                                       }               }, Colored by Color Scripter

cs

rowid는 현재 row의 id 이다.

colId는 cell의 인덱스이다 (선택된 컬럼의순서)

val은 선택된 cell의 값이다.

e는 클릭한 객체이다.

getCell로 값을 가져온다. 클릭된 row의 순서와

헤더의 이름 seq를 넣어준다

만약 클릭된 컬럼이 2라면 2번째 row의 seq인값을 seq에 넣는다.

값을 가지고 있고 celId는 이름을 눌렀는지 전화번호를 눌렀는지

클릭된 컬럼의 위치를 걸러주는 것이다. 그 값이2라면

name이므로 seq가 빈문자열을 확인하다. 이것은 초기에

조회버튼을 눌렀을시 그리드에 데이터가 쌓이게 되는데 이것을 편집하면

안되기 때문이다. 편집하는 것은 새로이 추가된 row에서의

name이므로 seq가 비어있다는 것을 새로운 행이 추가된 row이고 이것을

editable:true로 설정한다 seq가 차있다는 것은 서버에서

불러온 편집하면 안되는 row이므로 editable:false로 설정한다.

이제 성별코드를 추가해보자

1 2 3 4 5 6 7 8 9 10 11 12

{name:'gender',        index:'gender',     width:100,    editable:true, edittype: "select", formatter:"select",                           editoptions: {                                 value        : {"1":"남자","2":"여자"},                              dataEvents     : [{                                type: 'change',                                 fn : function(e) {                                                                 }                             }]                           }                       }, Colored by Color Scripter

cs

이제 삭제기능을 추가하자

먼저 colModel에 아래 한줄을 추가하자

다음 rowBtn 메소드를 추가하자

// 글 넣기
    rowBtn : function(cellvalue, options, rowObject) {
        
        if(rowObject.seq == "") {
            
            return '<a href="javascript:gridFunc.delRow('+options.rowId+');"> 행삭제 </a>';            
        } else {
            
            return "";
        }        
    },

options의 rowId는 row번호이다. 여기서는 행삭제를 위하여

어떤 row가 클릭되는지 구해서 delRow함수를 실행시킨다.

rowObject는 데이터가 들어가는 객체이다. 여기서 rowObject.seq라고 썼는데

이것은 여기에 들어있는 데이터의 seq의 값을 뽑는것이다.

if문안에서 빈 문자열 검사를 하는데 이것은 원래 서버에서

받아온 데이터는 삭제를 하지 않기 위함이고 if를 탄다면

새로행추가된 row이므로 삭제버튼을 달아주는 것이다.

위와같이 추가된 행에만 행삭제가 붙는다

이제 delRow를 정의하자

1 2 3 4 5 6 7 8

// 행 삭제     delRow : function(rowid) {                  if(rowid != "") {                           $("#jqGrid").delRowData(rowid);         }     }, Colored by Color Scripter

cs

간단하게 rowid번째에 있는 row를 del시킨다.