[Javascript] jQuery TableDnD를 이용하여 테이블 순번 바꾸기

● jQuery TableDnD(Table Drag and Drop)

  - HTML 테이블의 행을 Drag and Drop 하여 재정렬할 수 있게 하는 jQuery 플러그인

  - jquery.tablednd.js 스크립트 추가 필요

 

 ❗ 프론트단에서만 사용할 경우 "3-1. tableDnd 플러그인 적용 및 옵션 설정 "까지만 봐도 됨

 ❗ DB 상에서 테이블 순번을 바꿔야 하는 경우 끝까지 확인 필요(아래 예제는 Spring 사용)

 

 

● 사용방법

  1.  라이브러리 가져오기

      - 다운로드 : https://github.com/isocra/TableDnD 소스 다운로드 후 TableDnd/js/jquery.tablednd.js 파일 사용

 

<script src="/plugins/jquery-tablednd/jquery.tablednd.js"></script>

 

 

  2. HTML 테이블 생성

    - table 및 각 row 마다 id 필요 

 

<table id="dndTable">
  <tr id="list_1"><td>Row 1</td></tr>
  <tr id="list_2"><td>Row 2</td></tr>
  <tr id="list_3"><td>Row 3</td></tr>
  <tr id="list_4"><td>Row 4</td></tr>
  <tr id="list_5"><td>Row 5</td></tr>
  <tr id="list_6"><td>Row 6</td></tr>
  <tr id="list_7"><td>Row 7</td></tr>
</table>

 

 

  3-1. tableDnd 플러그인 적용 및 옵션 설정

    - tablDnD 플러그인 적용 스크립트 이후 동적으로 생성한 row에는 옵션이 작동하지 않음

    - 동적으로 생성한 row는 생성 후 플러그인 적용 스크립트 적용해야 함

    - tableDnd 옵션

onDragStyle	드래그 중인 항목에 적용되는 스타일
onDropStyle	드롭 대상 항목에 적용되는 스타일
onDragClass	드래그 중인 항목에 추가되는 클래스
onDrop	드롭이 발생했을 때 호출되는 콜백 함수
onDragStart	드래그가 시작될 때 호출되는 콜백 함수
onDragStop	드래그가 멈추었을 때 호출되는 콜백 함수
dragHandle	드래그를 시작할 핸들 요소의 선택자
scrollAmount	드래그 중에 테이블을 자동으로 스크롤할 때 사용하는 옵션
scrollAmountOnEdge	드래그 중에 테이블 가장자리에 도달했을 때 스크롤 속도를 조절
serializeRegexp	ID 시리얼라이제이션을 위한 정규식
serializeParamName	ID 시리얼라이제이션에 사용될 파라미터 이름
serializeTableId	시리얼라이제이션에 사용되는 테이블의 ID
onDropAccepted	드롭이 허용되는 조건을 정의하는 콜백 함수

 

// 선언만 할 경우
$("#dndTable").tableDnD();

// 옵션 사용할 경우
$("#dndTable").tableDnD({
    onDrop: function(table, row) {
    	console.log(table.tBodies[0].rows); // 순번이 바뀐 테이블의 rows element 출력
    }
});

 

  3-2. DB에서 실제 table row 순번을 바꾸는 경우

      - Javascript

 

$("#dndTable").tableDnD({
    onDrop : function(table, row){
        const rows = table.tBodies[0].rows;
        const arrId = new Array();

        for(let i = 0; i < rows.length; i++) {
            // 순번 재정렬
            $("#" + rows[i].id + " td").html("Row " + (i + 1));
            arrId[i] = Number(rows[i].id.split("_")[1]);
        }

        const formData = new FormData();

        formData.append("data", arrId);

        axios.patch("/seq", formData
        ).catch(error => {
            CustomAlert.error("순서 변경을 실패하였습니다.");
            console.log(error);
        });
    }
});

 

      - Controller

 

@PatchMapping("/seq")
@ResponseBody
public ResponseEntity<?> updateSeq(@RequestParam(value = "data", required = false) List<Integer> data
        , HttpServletRequest request) throws Exception {

    try {
        HashMap<String, Object> map = new HashMap<>();

        testService.updateSeq(data);

        return ResponseEntity.status(HttpStatus.OK).body(map);
    } catch (Exception e) {
        LOGGER.info(e.getMessage());
    }
}

 

      - Service

 

void updateSeq(List<Integer> data) throws Exception;

 

      - ServiceImpl

 

public void updateSeq(List<Integer> data) throws Exception{
        TestTable testTable = new TestTable();

        for(int i = 0; i < data.size(); i++){
            testTable.setTestId(Long.valueOf(data.get(i)));
            testTable.setSeq(i + 1);

            TestMapper.updateSeq(testTable);
        }
    }

 

      - Mapper(java)

 

void updateSeq(TestTable testTable) throws Exception;

 

      - Mapper(xml)

 

<update id="updateSeq" parameterType="TestTable">
    UPDATE TEST_TABLE
    SET SEQ = #{seq}
    WHERE TEST_ID = #{testId}
</update>