리스트 목록 마우스 드랍으로 순서 변경하기(Mybatis)

<tbody>
   <c:forEach var="item" items="${XXXList }" varStatus="i">
      <tr>
          ...... .생략.......
      </tr>
   </c:forEach>
</tbody>

 

->의 본문에서 리스트를 목록을 뿌려진다고 했을때 이 리스트를 마우스 드랍으로 순서를 변경하려고 한다.

먼저 필요한 라이브러리를 다음과 같이 추가하고 마우스 드랍으로 순서를 변경하고 나서 "순서변경" 버튼을 눌렀을 경우

순서 데이터 변경을 Ajax 비동기 방식으로 구현한다면 다음과 같이 할 수 있을 것이다.

 

 

 

 

$('#changeOrder').on('click', function(e) {  
    e.preventDefault();  

    let orderedPopupData = \[\];  

    $("table tbody tr").each(function(index) {  
        let popupId = $(this).find('a').attr('href').split('=')\[1\].split('&')\[0\];  
        let newOrder = originalPopupOrderList\[index\];   

        orderedPopupData.push({  
            popupId: parseInt(popupId),  
            newOrder: newOrder  
        });  
    });  

    $.ajax({  
        url: '/popup/changeOrder.do',  
        type: 'POST',  
        data: JSON.stringify(orderedPopupData),  
        contentType: "application/json; charset=utf-8",  
        dataType: 'json',  
        success: function(data) {  
            alert(data.message);  

            if (data.status === "success") {  
                originalPopupOrderList = data.updatedOrderList.map(item => item.popupOrder);   
                //location.reload();  
            }  
        },  
        error: function(xhr, status, error) {  
            let errorMessage = xhr.responseJSON ? xhr.responseJSON.message : '순서 변경 중 오류가 발생했습니다.';  
            alert(errorMessage);  
        }  
    });  
});  

---

그리고 컨트롤에서는 다음과 같이

ResponseEntity를 이용한다.

@RequestMapping("/???/???.do")
@ResponseBody
public ResponseEntity<Map<String, Object>> changeOrder(@RequestBody List orderedData) {
   Map<String, Object> result = new HashMap<>();
   try {
      List updatedOrderList = ???Service.updateOrder(orderedData);
      result.put("status", "success");
      result.put("message", "순서 변경이 완료되었습니다.");
      result.put("updatedOrderList", updatedOrderList);
      return new ResponseEntity<>(result, HttpStatus.OK);
   } catch(Exception e) {
      e.printStackTrace();
      result.put("status", "error");
      result.put("message", "순서 변경 중 오류가 발생했습니다.");
      return new ResponseEntity<>(result, HttpStatus.INTERNAL_SERVER_ERROR);
   }
}

 

다음은 service 부분의 코딩 소스이다. 

 

public List<PopupVO> updatePopupOrder(List<PopupVO> orderedPopupData) {

   // 현재 날짜 가져오기

   Date currentDateOrigin = new Date();

   SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");

   String currentDate = sdf.format(currentDateOrigin);

   PopupSearchVO searchVO = new PopupSearchVO();

   searchVO.setCurrentDate(currentDate);

   try {

      for (PopupVO data : orderedData) {

      mapper.update("Popup.updateOrder", data);

   }

   }catch (Exception e) {

      e.printStackTrace();

      System.out.println("오류 메세지 : " + e.getMessage());

   }

      return mapper.selectList("Popup.selectList", searchVO);

   }

그리고 마지막으로 마이바티스의 sql문이다

 

UPDATE XXXtable

SET P_ORDER = #{newOrder}

WHERE P_ID = #{pId}