표에서 메모를 수정하는 버튼 기능

1) 메모를 수정하는 기능

1-1) 클라이언트

    function changeMemo(){

        bootbox.confirm("해당 참고사항을 수정하시겠습니까?", function (result) {

            var modifyList = [];
            $('#replyTable tbody tr').each(function () {
                var memo = $(this).find('.memo').val();
                var id = $(this).find('.receiptid').text();
                var flag = $(this).find('.flag').is(':checked');

                var dataList = {memo: memo, id: id, flag: flag};
                modifyList.push(dataList);
            })

            if (result == true) {

                $.ajax({
                    url: '/venuseshopadmin/Receipt/receiptMemo',
                    data: {data : JSON.stringify(modifyList)},
                    type: 'POST',
                    dataType: 'json',
                    success: function (data) {
                        bootbox.alert('참고사항을 수정하였습니다');
                    },
                    error: function (e) {
                        bootbox.alert('참고사항 수정이 실패하였습니다');
                    }
                });
            } else {
                return;
            }
        });
    }

1-2) 데이터를 수정하기 위한 id값 가져오기

Content += "<td style=\"vertical-align: middle; display: none; \" class='receiptid'>" + receipt[i].id + "</td>";

- 클래스명으로 receiptid 선언하고 display: none;으로 화면상으로는 보이지 않도록 한다.

- 수정할 데이터를 받을 배열 선언

- $('#replyTable tbody tr').each(function () { //테이블 id의 tbody > tr 요소에 접근하여 반복문 실행

   var memo = $(this).find('.memo').val(); //textarea의 class명인 memo를 val로 가져온다.

   var id = $(this).find('.receiptid').text(); //td의 class명인 receiptid를 text로 가져온다.

   var flag = $(this).find('.flag').is(':checked'); //input box의 class명인 flag에서 checked인 것을 가져온다.

   var dataList = {memo: memo, id: id, flag: flag}; //key: value를 담을 맵 리스트를 선언하여 데이터를 담는다.

   modifyList.push(dataList); //선언했던 배열에 데이터가 담긴 맵 리스트를 넣는다.

)

- $.ajax({

  data: {data: JSON.stringify(modifyList)}, // 맵 리스트를 담은 배열을 stringify하여 서버로 전송한다.

});

 

1-3 서버(Controller)

@RequestMapping(value = {"/Receipt/receiptMemo"}, method = RequestMethod.POST)
public @ResponseBody String updateReceiptMemo(@RequestParam(value = "data", required = true) Map<String, Object> data

 //화면에서 ajax로 전송한 jsonData(Map)을 string으로 변환하여 가져온다.
 String conversionData = data.get("data");
 
 //변환 한 데이터를 update하기
 orderReturnListWriteService.updateReceiptMemo(conversionData);

)

2. 데이터 전송 흐름

xml -> mapper -> service -> controller