时间戳

首页 > 解决方案 > 如何使用可排序的 jquery UI 禁用表中的特定列？

php - 如何使用可排序的 jquery UI 禁用表中的特定列？

问题描述

我有一个带有 jquery 可排序插件的表。您可以拖放项目，然后保存新订单。我的问题是，我如何禁用表格的列，以便我可以通过名称列拖放？

HTML 代码 

<table class="table table-bordered" id="users" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>Name</th>
            <th>Image</th>
            <th>Spotify</th>
            <th>Instagram</th>
            <th>Soundcloud</th>
            <th>Facebook</th>
            <th>Website</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody id="sortable">
        @if(count($rows) > 0)
            @foreach($rows as $value)
                <tr id="{{ $value->id }}">
                    <td>{{ $value->name }}</td>
                    <td>
                        <img src="{{ $value->getImage('s') }}" >
                    </td>
                    <td>{{ $value->spotify_username }}</td>
                    <td>{{ $value->instagram_username }}</td>
                    <td>{{ $value->soundcloud_username }}</td>
                    <td>{{ $value->facebook_username }}</td>
                    <td>{{ $value->website_url }}</td>
                    <td class="text-center text-white">
                        <a data-placement="bottom" title='Additional info about {{ $value->name }}' href='{{ route("artists.view", ["artist" => $value->id]) }}' class="btn btn-sm btn-info tooltip-custom">{{ __('Info') }}</a>
                        <a data-placement="bottom" title='Edit {{ $value->name }}' href='{{ route("artists.edit", ["artist" => $value->id]) }}' class="btn btn-sm btn-primary tooltip-custom">{{ __('Edit') }}</a>
                        <a data-placement="bottom" title='Delete {{ $value->name }}' data-name='{{ $value->name }}' data-toggle="modal" data-target="#deleteModal" data-href='{{ route("artists.delete", ["artist" => $value->id]) }}' class="btn btn-sm btn-danger tooltip-custom">{{ __('Delete') }}</a>
                    </td>
                </tr>
            @endforeach
        @endif
    </tbody>
</table>

脚本代码 

$( function() {
    $( "#sortable" ).sortable({
        update: function (event, ui){
            $("#input-new-order-state").val($('#sortable').sortable("toArray"));
            $("#form-state").removeClass('d-none');
        }
    });
    $( "#sortable" ).disableSelection();
});

标签： phpjqueryhtmljquery-ui-sortable

解决方案

如果有人需要这个，我解决了。我添加"handle": ".enable-drag",到脚本中，并添加到class="enable-drag"第一个td. 现在您只能拖放第一列。

$( function() {
    $( "#sortable" ).sortable({
        "handle": ".enable-drag",
        update: function (event, ui){
            $("#input-new-order-state").val($('#sortable').sortable("toArray"));
            $("#form-state").removeClass('d-none');
            
        }
    });
    $( "#sortable" ).disableSelection();
} );
<div class="table-responsive">
            <table class="table table-bordered" id="users" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Image</th>
                        <th>Spotify</th>
                        <th>Instagram</th>
                        <th>Soundcloud</th>
                        <th>Facebook</th>
                        <th>Website</th>
                        <th>Options</th>
                    </tr>
                </thead>
                <tbody id="sortable">
                    @if(count($rows) > 0)
                        @foreach($rows as $value)
                            <tr id="{{ $value->id }}">
                                <td class="enable-drag">{{ $value->name }}</td>
                                <td>
                                    <img src="{{ $value->getImage('s') }}" >
                                </td>
                                <td>{{ $value->spotify_username }}</td>
                                <td>{{ $value->instagram_username }}</td>
                                <td>{{ $value->soundcloud_username }}</td>
                                <td>{{ $value->facebook_username }}</td>
                                <td>{{ $value->website_url }}</td>
                                <td class="text-center text-white">
                                    <a data-placement="bottom" title='Additional info about {{ $value->name }}' href='{{ route("artists.view", ["artist" => $value->id]) }}' class="btn btn-sm btn-info tooltip-custom">{{ __('Info') }}</a>
                                    <a data-placement="bottom" title='Edit {{ $value->name }}' href='{{ route("artists.edit", ["artist" => $value->id]) }}' class="btn btn-sm btn-primary tooltip-custom">{{ __('Edit') }}</a>
                                    <a data-placement="bottom" title='Delete {{ $value->name }}' data-name='{{ $value->name }}' data-toggle="modal" data-target="#deleteModal" data-href='{{ route("artists.delete", ["artist" => $value->id]) }}' class="btn btn-sm btn-danger tooltip-custom">{{ __('Delete') }}</a>
                                </td>
                            </tr>
                        @endforeach
                    @endif
                </tbody>
            </table>
        </div>

推荐阅读