Question

我正在使用jQuery UI对表进行排序（工作正常）。我想把标题和最后一行固定（不可移动）。

jQuery UI文档表明这可以使用项目的选择器来完成，但我对语法感到茫然。

以下是相关代码：

<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();

作为

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

应该可以只选择class =“sortable-row”的项目;但同样，我对语法感到茫然。

Answer 1

这应该有效：

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

Answer 2

这对我有用：

        jQuery(".sortable tbody").sortable({
            items: 'tr:not(:first)'
        });

Answer 3

对于此标记：

<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();

它只会移动表格的主体内容，不能移动标题部分。

jQuery UI可以使用固定行进行排序

3 个答案: