데이터베이스 업데이트에 jQuery UI Sortable의 'serialize' 메서드를 어떻게 사용할 수 있나요?

jQuery UI Sortable을 활용하여 순서 및 데이터베이스 업데이트를 관리하는 방법

jQuery UI의 정렬 기능을 사용하면 사용자가 순서를 설정하고 수정할 수 있습니다. 강요. 이로 인해 이러한 변경 사항을 데이터베이스 업데이트로 변환하는 방법에 대한 의문이 제기되었습니다.

해결책:

jQuery UI는 이러한 목적을 위해 귀중한 직렬화 방법을 제공합니다. 각각 ID로 표시되는 요소 배열을 쉽게 생성합니다.

다음은 요소 재배열 시 지정된 URL로 데이터를 전달하는 포괄적인 예입니다.

$('#element').sortable({
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');

        // Communicate with the server using $.post or $.ajax
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

이 코드는 정렬 가능한 목록을 작성하고, 요소의 위치가 변경되면 업데이트 이벤트를 트리거하고, 정렬된 ID를 배열로 수집합니다.

일반적으로 요소는 해당 속성에 데이터베이스 ID가 포함되어 있습니다. 직렬화 함수는 item[]=1&item[]=2와 유사한 POST 쿼리 문자열을 생성하며 이러한 ID를 사용하여 주문을 인코딩합니다.

PHP 도메인에서 간단한 루프는 수신된 배열을 순회하고 데이터베이스 업데이트를 실행할 수 있습니다. 따라서:

$i = 0;

foreach ($_POST['item'] as $value) {
    // Execute statement:
    // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
    $i++;
}

이 프로세스가 실제로 작동하는 모습을 시각화하려면 jsFiddle의 예를 살펴보세요.

위 내용은 데이터베이스 업데이트에 jQuery UI Sortable의 'serialize' 메서드를 어떻게 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!