ajax를 이용한 async post data 저장

사용자가 grid(slickgrid) cell에 text 입력하면 해당 text가 서버의 database에 사용자 인지 없이 자동 저장되는 Logic

기본 구현 환경   -. Slickgrid   -. mysql   -. django

Client

---

Slickgrid 설정

---

[templates/test/index.html]

    var columns = [

...

        {id: "comment", name: "Comment", field: "comment", width: 300, editor: Slick.Editors.Text},

    ];

    var options = {

        editable: true,

...

    };

Slickgrid column 설정 및 option에서 editable 속성을 enable하고 editor를 설정해 준다.

Ajax 설정

---

[templates/test/index.html]

        grid.onCellChange.subscribe(function(e, args) {

            $.ajax({

                type: "POST",

                url: "/test/updateComment/",

                data: {

                    code: data[args.row]['code'],

                    comment: data[args.row][grid.getColumns()[args.cell].field],

                    csrfmiddlewaretoken: '{{ csrf_token }}'

                },

                dataType: "json",

                success: function(a) {

                    //console.log(data);

                }

            });

        });

해당 부분의 사용법[참고링크] 외에 주의깊게 봐야할 부분은 POST 방식으로 넘기게 되는 json data 이다.

slickgrid에서 원하는 data를 가져 와야하는데 cell change가 발생한 cell의 정보는 args로 부터 추출할 수 있다.

args.row : cell change가 발생한 row index (index는 0부터 시작)

args.cell : cell change가 발생한 column index (index는 0부터 시작)

grid.getColumns()[args.cell] : cell change가 발생한 column 열에 대한 information

grid.getColumns()[args.cell].field : cell change가 발생한 column 열의 field 이름 (여기에서는 "comment")

결론적으로 cell change가 발생한 cell의 text값을 가져오려면 다음 배열 접근이 필요하다.

data[args.row][grid.getColumns()[args.cell].field]

cell change가 발생하면 해당 값을 즉시 설정한 url로 POST방식으로 전송한다.

단, 주의해야 할 것이 그냥 data만 전송할 경우 http 403 forbidden이 response로 돌아올 수 있다.  따라서 json data전달시 crsf_token 추가가 필요하다.

Server

---

django views.py 설정

def updateComment(request):

    privateCommentData.objects.update_or_create(code=request.POST['code'],defaults={'comment':request.POST['comment']})

    return HttpResponse(status=200)

입력하려는 data가 기 mysql에 존재하면 update를 하고, 없을 경우 insert를 실행한다.

django에서는 해당 동작을 update_or_create라는 api로 구현해 놓았다. [참고자료]

update_or_create(defaults=None, **kwargs)¶

New in Django 1.7. A convenience method for updating an object with the given kwargs, creating a new one if necessary. The defaults is a dictionary of (field, value) pairs used to update the object. Returns a tuple of (object, created), where object is the created or updated object and created is a boolean specifying whether a new object was created. The update_or_create method tries to fetch an object from database based on the given kwargs. If a match is found, it updates the fields passed in the defaults dictionary.

위의 update_or_create를 거치게 되면 아래와 같이 mysql에 sync되게 된다.