Question

所以我使用jQuery sortable（）函数来允许用户拖放表的行。表本身非常标准，如下所示：

<table>
    <tr>
        <th>Name</th>
        <th>Surname</th>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
    </tr>
</table>

在Javascript文件中我有：

$('table tbody').sortable()

效果很好，除了它使标题可拖动这一事实，我可以将它与其他行一样排序。如何解决此问题并使标头静态？

Answer 1

只需从插件中排除标题：

为标题tr

添加一个类

<table>
    <tr class="header-tr">
        <th>Name</th>
        <th>Surname</th>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
    </tr>
</table>

然后：

$('table tr').sortable({items: 'tr:not(.header-tr)'});

Answer 2

只需将此属性添加到您的可排序

即可

$(table).sortable({

            helper: "clone",
            axis: "x",

            revert: 100,
            distance: 0,
            forceHelperSize: true,
            forcePlaceholderSize: true,
            scrollSensitivity: 0,
            start: function(event, ui){
                ui.placeholder.width(ui.helper.width());
            },
            stop: function (event, ui) {

            },
             cancel: '.nondraggable',

            change: function (e, ui) { 
                console.log("sort called");
            },
            tolerance: "pointer"
        });

Answer 3

这里html不好

<thead> <tbody>

看thead

这项工作

<table>
    <thead>
    <tr>
        <th>Name</th>
        <th>Surname</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>John</td>
        <td>Doe</td>
    </tr>
    <tr>
        <td>John1</td>
        <td>Doe1</td>
    </tr>
    </tbody>
</table>

jquery sortable（）允许拖放标题

3 个答案: