마우스로 순서 정렬 | Sorting 테이블 행

https://jqueryui.com/sortable/ 

Sortable | jQuery UI

마우스로 순서 변경해주기

 

제이쿼리-UI 링크 footer 에 추가 (제이쿼리 다음)

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

​

 

<table class="table sorting" id="pages">
  <tr class="home">
    <th>제 목</th>
    <th>슬러그</th>
    <th>수 정</th>
    <th>삭 제</th>
  </tr>
  <tr th:each="page : ${pages}" th:class="${page.slug}" th:id="'id_'+${page.id}"> <!--AdminPageController 의 pages-->
    <td th:text="${page.title}"></td>
    <td th:text="${page.slug}"></td>
    <td><a th:href="@{'/admin/pages/edit/' + ${page.id}}">수정</a></td>
    <td><a th:if="${page.slug != 'home'}" th:href="@{'/admin/pages/delete/' + ${page.id}}" class="deleteConfirm">삭제</a></td> <!--home빼고 삭제, class는 제이쿼리 사용-->
  </tr>
</table>

 

table에 class추가

tr에 class,id추가

 

 

<script>
    $('table#pages').sortable({
        items: 'tr:not(.home)', //클래스 home만 제외하고 sortable
    });
</script>

 

 

---

제이쿼리 오류!?

 

오류위치가 script안에 sorting을 가르키지만 코드는 문제가 없다..

 

 

 

제이쿼리를 바꿔보자!!

jquery cdnjs 에 들어가서 최신 제이쿼리로 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

오 류 해 결.

 

 

---

그러나

순서를 옮겼는데 새로고침을 하니 바뀐 순서가 원래대로 돌아감

DB에 저장해야 안돌아간다!!

 

 

sorting이 크면 아래로 설정하기.

 

update : 순서가 바뀌었을 때 함수 실행

<script>
    $('table#pages').sortable({
        items: 'tr:not(.home)',  //클래스 home만 제외하고 sortable
        update: function(){     //순서가 바뀌었을때 함수 실행
            let ids = $('table#pages').sortable("serialize"); 
            console.log(ids);
            let url = "/admin/pages/reorder"; 
        }
    });
</script>

 let ids = $('table#pages').sortable("serialize");  이 부분이

 <tr th:id="'id_' + ${page.id}" 를 시리얼라이즈

id_1

id_2

 

 

 

 

serialize 시리얼라이즈?

id를 옮긴 순서대로 시리얼라이즈 해준다

• console.log(ids) 

이렇게 시리얼라이즈가 됨.

 

---

제이쿼리 AJAX 추가

$.post('주소','데이터',function(res) {
    //성공시 동작
}

<script>
    $('table#pages').sortable({
        items: 'tr:not(.home)',  //클래스 home만 제외하고 sortable
        update: function(){     //순서가 바뀌었을때 함수 실행
            let ids = $('table#pages').sortable("serialize"); 
            console.log(ids);
            let url = "/admin/pages/reorder"; 
        }
        
        $.post(url,ids,function(data){
    	console.log(data);
		})
    });
</script>

AJAX post로 url주소로 ids를 전송하고 결과를 data로 받기.

 

 

 let url = "/admin/pages/reorder"; 

controller에 reorder로 Post매핑 만들기

//sorting 
//AJAX에서 요청을 한다. 
@PostMapping("/reorder")
public @ResponseBody String reorder(@RequestParam("id[]") int[] id) { //파라미터이름 id[], 정수형 배열

    int count = 1;
    Page page;

    for(int pageId : id) {
        page = pageRepo.getById(pageId); //db에서 id로 page객체 검색
        page.setSorting(count); //sorting 값에 1을 넣고
        pageRepo.save(page); 	//DB에 저장
        count++;			//그 다음은 2
    }

    return "ok";
}

@ResponseBody

view대신 데이터(문자열 "ok")만 가게하기 위해 

 

 

DB의 sorting도 바꿔줌

sorting에 넣을 int count = 1; 설정해주고 count++

입력받은 id배열들을 반복문 for로

아이디로만 찾아 setSorting(count)해주고 1을 넣어줌

마지막으로 save(page) 저장

 

 

DB에 sorting을 다시 가져와야 새로고침할때 안돌아감 그러기 위해

findAll() -> id순으로 가져오기 때문에 다른 메소드이름으로 바꿔야한다!
findAllByOrderBySortingAsc() -> sorting을 오름차순으로 정렬

 

@GetMapping
public String index(Model model) {

    List<Page> pages = pageRepo.findAllByOrderBySortingAsc(); 
    model.addAttribute("pages", pages);

    return "admin/pages/index";
}