Пользовательский интерфейс jQuery с возможностью сортировки с фиксированными строками

Я использую пользовательский интерфейс jQuery, сортируемый с таблицей (отлично работает). Я хотел бы сделать заголовок и последнюю строку фиксированными (неподвижными).

В документах пользовательского интерфейса jQuery указано, что это можно сделать с помощью селектора элементов, но я не понимаю синтаксис.

Вот соответствующий код:

<script type="text/javascript">
    $(function () {
    $("#response_options tbody.content").sortable();
    $("#response_options tbody.content").disableSelection();
});
</script>

<table id="response_options" class="data-table">
    <tbody class="content">
        <tr>
            <th>Links</th><th>Response</th>
        </tr>
        <tr class="sortable-row">
           <td>Edit</td>
           <td>Item 1</td>
        </tr>
        <tr class="sortable-row">
            <td>Edit</td>
            <td>Item 2</td>
        </tr>
        <tr class="sortable-row">
            <td>Edit</td>
            <td>Item 3</td>
        </tr>
        <tr class="sortable-row">
            <td>Edit</td>
            <td>Item 4</td>
        </tr>
        <tr class="sortable-row">
            <td>Edit</td>
            <td>Item 5</td>
        </tr>
        <tr>
            <td>Edit</td>
            <td>Item 1</td>
        </tr>
    </tbody>
</table>

Селектор находится внутри .sortable(...):

$("#response_options tbody.content").sortable();

as

$("#response_options tbody.content").sortable( items: ??? );

и должна быть возможность выбирать только элементы с class="sortable-row"; но опять же, я в недоумении для синтаксиса.


jquery-ui jquery-selectors jquery-ui-sortable
person Robert Altman    schedule 14.05.2011    source источник

Ответы (3)


arrow_upward
11
arrow_downward

Это должно работать:

$("#response_options tbody.content").sortable({items: 'tr.sortable-row'});
person Xnake    schedule 14.05.2011

arrow_upward
8
arrow_downward

Это сработало для меня:

        jQuery(".sortable tbody").sortable({
            items: 'tr:not(:first)'
        });
person Dieter Gribnitz    schedule 13.03.2013

arrow_upward
4
arrow_downward

Для этой разметки:

<table id="tableid">
    <thead>
        <tr>    
            <th>namr</th>
            <th>id</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>jagadeesh</td>
            <td>1</td>
        </tr>
        <tr>
            <td>jagadeesh</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

Используйте этот jQuery:

$('#tableid tbody').sortable();

Он будет перемещать только содержимое тела таблицы, вы не можете перемещать часть заголовка.

person jagadeesh    schedule 22.06.2011