w2ui 플러그인을 활용한 그리드 그리기 -3 (추가, 수정, 삭제)

w2ui 플러그인을 활용한 그리드 그리기 3번째 포스팅이다.

 

그리드에서 데이터를 추가 수정 삭제할 때 각각 필요한 메서드가 있다.

add(record) : 데이터를 추가한다.

getChanged() : 변경사항을 확인한다.

getSelection() : 선택하고 있는 데이터를 확인한다.

 

 

[추가] - add( )

 

위 세개의 메서드는 2번째 포스팅에서 다뤘던 이벤트 리스너를 통해 이벤트가 발생했을때 작동할 수 있도록 구현한다.

추가시에는 onAdd리스너를 통해 구현한다.

, onAdd: function(target, eventData){
    this.add({
          recid: this.total + 1
        , name: '[입력]'
        , author: '[입력]'
        , publisher: '[입력]'
        , price: '[입력]'
        , point: '[입력]'						
    })
}

이곳에서 this는 $('#wrap').w2grid({}) 즉, w2grid 자체를 가르킨다.

, onAdd: function(target, eventData){
    this.add({
        console.log(this)
        console.log($('#wrap'))
    })
}

 

콘솔에 출력시켰을때 $('#wrap')을 포함한 w2grid라는 이름의 데이터를 가지고있다.

 

단순하게 렌더가 완료된 그리드 자체에 데이터를 추가하는것으로 해석하면 쉽다.

 

해당 코드를 입력하고 페이지를 실행 후 AddNew 버튼을 클릭한다.

  체크박스로 선택된 그리드 행이 하나 추가된다 (체크는 확인시켜 주기 위해 직접함)

 

---

[수정]

수정시에는 onChange 이벤트 리스너를 활용한다.

책에서는 getChanged() 메서드를 사용하라고 나와있지만 1.2버전이아닌 1.5버전이라 그런지 getChanges() 메소드를 지원한다.

this.getChanges()의 object형태의 값을 JSON형태로 변환시켜 출력해본다.

, onChange: function(target, eventData){
    console.log(JSON.stringify(this.getChanges()));
}

도서명의 값을 수정한다.

콘솔에는 아무런 값도 출력되지 않는다.

 

 

혹시 모르니 출판사 값을 한번 더 수정해본다

이번엔 출력이된다. 하지만 분명 도서명과 출판사 두개를 수정했는데 출력되는 결과물은 처음 수정했던 값이 출력된다.

onChange 이벤트가 처음 실행되고 getChanges 메소드가 호출되면 처음 실행되고 수정 전의 데이터를 가져오기때문에.

아무런 수정값이 없으므로 반환이 되지않는다.

즉 현재 onChange 바로 이전의 수정된 값들을 가져오는셈이다.

일종의 버그인거같다.

누가 쓰지?

 

대체방안으로는 어차피 한번에 한칸 실행할 때 마다 onChange가 발생하기 때문에, 한번 수정할때마다 값을 한개씩 가져오는 방법을 생각해보았다.

 

어떻게 찾았는지는 다음과 같다.

, onChange: function(target, eventData){
    console.log(eventData);
}

eventData를 출력했을때 현재 이벤트에 해당하는 객체 내용을 확인할 수 있고

 객체 속성들중 value_new 속성에 onChange이벤트가 발생하면서 수정된 데이터를 저장받아준다.

, onChange: function(target, eventData){
    console.log(eventData.value_new);
}

위와 같이 접근하게되면

수정된 데이터만 추출이 가능하다.

 

앞서 말햇듯 한 컬럼당 한번씩의 change이벤트가 발생하기 때문에 위의 방법으로 접근해도 상관없다.

수정할 때 마다 통신하면 되지 않는가?

 

하나 더 작업해야한다.

컬럼을 알아야 수정이 가능하기때문에,

, onChange: function(target, eventData){
    console.log(eventData.column);
}

eventData.column으로 접근하면 현재 수정된 데이터의 컬럼 인덱스값을 확인할 수 있다.

이 인덱스값을 통해... 나중에 ... if문으로 분기해야할거같다.

, onChange: function(target, eventData){
    console.log(eventData.value_new);
    console.log(eventData.column);
    var changeVal = eventData.value_new;
    var columnIdx = eventData.column;
    
    if(columnIdx == 0){}
    else if(columnIdx == 1){}
}

---

[삭제] - getSelection() 

 

삭제시에는 onDelete 이벤트 리스너를 활용한다.

 

, onDelete: function(target, eventData){
    console.log(JSON.stringify(this.getSelection()));
    eventData.preventDefault();
}

 

getSelection() 메서드로 선택된 데이터를 확인하는데 recid (레코드아이디) 값을 확인시켜준다.

(나중에 데이터베이스 테이블 생성시 recid 값이 primary Key가 될거 같음)

w2ui 플러그인에서 지원하는 그리드에서는 삭제할 데이터를 체크하고 삭제 버튼을 누른다

재미난 사항은 삭제 버튼을 누르는 순간에도 recid값을 출력시켜주고 삭제가 완료된 후에 한번 더 출력시켜준다.

eventData.preventDefault();

일반적으로 데이터는 서버와 통신하므로 이벤트 객체의 preventDefault() 메서드로 기본 이벤트를 제거해야 한다.

데이터 삭제 요청이 실패하는 가능성도 염두해야 하기 때문이다.

 

다음 포스팅에서는 추가 수정 삭제 메소드를 활용하여 Ajax를 통한 데이터 처리를 포스팅 할 예정이다.