Java Script : jQueryUI를 사용해 고정 너비 정렬 가능한 테이블 행 만들기 : 구현, 예제, 방법

Java Script : jQueryUI를 사용해 고정 너비 정렬 가능한 테이블 행 만들기 : 구현, 예제, 방법

 

테이블에서 jQuery UI 정렬 가능 함수를 사용하면 드래그하는 행의 너비가 축소되어 이상한 사용자 경험이 발생할 수 있습니다. 도우미 함수를 사용하여 행을 원래 너비로 끌어 오는 너비를 변경하는 방법을 살펴 보겠습니다.

jQuery Sortable은 아래에서 찾을 수있는 jQuery UI 라이브러리의 일부입니다. jQuery Sortable 정렬 가능한 행을 갖도록 테이블을 정의하려면 정렬 가능한 메소드를 행의 부모 element에 적용하면됩니다. 일반적으로 테이블 자체 또는 이상적으로는 테이블 본문이 됩니다.

 

<table>
    <thead>
        <tr>
            <th>Film</th>
            <th>Date</th>
            <th>Rating</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>The Shawshank Redemption</td>
            <td>1994</td>
            <td>9.2</td>
        </tr>
    </tbody>
</table>

 

 

 

그런 다음 다음 jQuery 코드를 사용하여 테이블 본문 행을 정렬 가능하게 만들 수 있습니다.

 

$('table tbody').sortable();

 

 

 

정렬 가능한 메소드에서 사용할 수 있는 옵션 중 하나는 화면을 끌 때 실행할 함수를 정의 할 수 있는 도우미 특성입니다. 따라서 아래 함수를 사용하여 테이블 행의 너비를 재설정하는 함수를 만들면 됩니다.

 

 

$('table tbody').sortable({
    helper: fixWidthHelper
}).disableSelection();

function fixWidthHelper(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
}