UISortableTable

Sortable Table

테이블에 속한 줄을 정렬할 수 있는 UI 패턴이다.

Basics

어떤 테이블에서 tbody 요소의 자식인 tr 요소의 순서를 변경할 수 있다. thead 요소 또는 tfoot 요소의 자식 요소는 정렬하지 않는다.

정렬 테이블을 자용하기 위해 필요한 규칙은 다음과 같다.

1. 정렬하려는 테이블은 반드시 sortable이라는 클래스 이름을 포함하고 있어야 한다.
2. 정렬할 테이블 줄(tr 요소)은 반드시 tbody 요소의 자식 요소이어야 한다.
3. 정렬할 테이블 줄의 셀(td 또는 th)은 드래그 핸들로 사용할 button 요소를 포함하고 있어야 한다.
4. 드래그 핸들 버튼은 반드시 dragBtn이라는 클래스 이름을 포함하고 있어야 한다.
5. 드래그 핸들은 줄의 첫 번째 셀에 포함되어야 하며 div.wrap을 부모 요소로 가진다.

다음은 위 규칙을 만족하는 정렬 테이블의 예시이다.

<div class="table even">
    <table id="sortable_table" width="100%" border="1" cellspacing="0" class="sortable">
        <thead>
        <tr>
            <th scope="col">Field</th>
            <th scope="col">Show</th>
            <th scope="col">Required/Optional</th>
        </thead>
        <tbody class="uDrag">
            <tr>
                <th scope="row">
                    <div class="wrap">
                        <button type="button" class="dragBtn">Move to</button>
                        E-mail
                    </div>
                </th>
                <td><input type="checkbox" title="Show" checked="checked" disabled="disabled" /></td>
                <td>
                    <input type="radio" name="email" id="email_re" checked="checked" disabled="disabled" /> <label for="email_re">Required</label>
                    <input type="radio" name="email" id="email_op" disabled="disabled" /> <label for="email_op">Optional</label>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="wrap">
                        <button type="button" class="dragBtn">Move to</button>
                        Nickname
                    </div>
                </th>
                <td><input type="checkbox" title="Show" /></td>
                <td>
                    <input type="radio" name="nickname" id="nickname_re" disabled="disabled" /> <label for="nickname_re">Required</label>
                    <input type="radio" name="nickname" id="nickname_op" disabled="disabled" /> <label for="nickname_op">Optional</label>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="wrap">
                        <button type="button" class="dragBtn">Move to</button>
                        Name
                    </div>
                </th>
                <td><input type="checkbox" title="Show" /></td>
                <td>
                    <input type="radio" name="name" id="name_re" disabled="disabled" /> <label for="name_re">Required</label>
                    <input type="radio" name="name" id="name_op" disabled="disabled" /> <label for="name_op">Optional</label>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="wrap">
                        <button type="button" class="dragBtn">Move to</button>
                        Blog
                    </div>
                </th>
                <td><input type="checkbox" title="Show" /></td>
                <td>
                    <input type="radio" name="blog" id="blog_re" disabled="disabled" /> <label for="blog_re">Required</label>
                    <input type="radio" name="blog" id="blog_op" disabled="disabled" /> <label for="blog_op">Optional</label>
                </td>
            </tr>
        </tbody>
    </table>
</div>

이 테이블을 작성한 후 웹 브라우저에서 열면 다음과 같이 보인다.

이제 테이블에 있는 드래그 핸들러를 드래그하면 줄의 순서를 변경할 수 있다.

Events

정렬 테이블에서 드래그를 시작하기 직전에 before-drag.st 이벤트가 발생하고 드래그를 마친 직후에 after-drag.st 이벤트가 발생한다. 또한 before-drag.st에서 기본 이벤트를 취소하면 드래그를 실행하지 않는다. 예를 들어, 위에서 설명한 테이블의 드래그가 전혀 동작하지 않게 하려면 다음과 같이 작성할 수 있다.

jQuery('#sortable_table').bind('before-drag.st', function(event){
    event.preventDefault(); // 기본 이벤트 취소
});

간단하게 false를 반환해도 똑같은 효과를 얻을 수 있다.

jQuery('#sortable_table').bind('before-drag.st', function(event){
    return false; // 기본 이벤트 취소
});

jQuery Plugin

이 패턴은 페이지를 읽어들일 때 자동으로 실행되기 때문에 페이지 요소를 동적으로 생성하는 경우에는 적용되지 않는 문제가 있다. 다음과 같이 table 요소를 선택한 후 xeSortableTable 메소드를 실행하면 페이지를 읽어들인 뒤에도 스크립트를 적용할 수 있다.

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