Блог

Я использую accordion, в котором я использую table. В таблице я получаю разные местоположения в ней. Я пишу скрипт для изменения порядка расположения. В некоторых аккордеонах местоположения одинаковы, поэтому, если я изменю порядок расположения в одном аккордеоне, это изменит все аккордеоны, которые имеют одинаковые местоположения. я хочу, чтобы, если я изменю порядок расположения в одном аккордеоне, это изменилось только в этом аккордеоне, а не в другом аккордеоне, в котором есть те же местоположения. Пожалуйста, помогите мне. Вот мой код.

Вот код скрипта:

 <script>
    var fixHelperModified = function(e, tr) {
                var $originals = tr.children();
                var $helper = tr.clone();
                // console.log($helper)
                $helper.children().each(function(index) {
                    $(this).width($originals.eq(index).width())
                });
                return $helper;
            },
            updateIndex = function(e, ui) {
                $('td.index', ui.item.parent()).each(function (i) {
                    $(this).html(i   1);
                });
            };

    $("#sort tbody").sortable({
        helper: fixHelperModified,
        stop: updateIndex,
        update: function(event, ui) {
            var list_sortable = $(this).sortable('toArray').toString();
            // change order in the database using Ajax
            $.ajax({
                url: '{{url('admin/locations/updateOrder')}}',
                type: 'POST',
                data: {list_order:list_sortable,_token:'{{csrf_token()}}'},
                success: function(data) {
                    //finished
                }
            });
        }
    });
</script>
  

Вот код моего index.blade.php

    @extends('admin.layout')

   @section('css')
 <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3- 
 editable/css/bootstrap-editable.css" rel="stylesheet"/>
 <link rel="stylesheet" href 
 ="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
  <link rel="stylesheet" href ="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css ">
@endsection

@section('content')
<h1 class="page-header">Locations page</h1>

<div class="clearfix">
    <div class="pull-right" style="margin-bottom: 5px">
        <a href="{{ route('locations.create') }}" class="btn btn-success"><i class="fa fa-plus" aria-hidden="true"></i> Create Location</a>
    </div>
</div>

@if(count($trails) > 0)
<div class="panel-group" id="accordion" style="margin-top: 10px;">
    <?php $count = 0;?>
    @foreach($trails as $getTrail)
    <div class="panel panel-default">
        <div class="panel-heading">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{$getTrail->trail_id}}" style="text-decoration: none !important;">
                <h4 class="panel-title">
                    <span>
                       {{  $count}}:
                    </span>
                    {{ucwords($getTrail->trail_title)}}
                    <span class="label bg-primary pull-right" style="padding-top: 3px;">
                        Total Locations: {{count($getTrail->location)}}
                    </span>
                </h4>
            </a>
        </div>
        <div id="collapse{{$getTrail->trail_id}}" class="panel-collapse collapse @if($count == 1) in @endif">
            <div class="panel-body">
                <div class="table-responsive">
                    <table id="sort" class="example table table-striped dt-responsive" cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <th>Id</th>
                            <th>Title</th>
                            <th>Rewards Points</th>
                            <th>Map options</th>
                            <th>Created At</th>
                            <th>Updated At</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($getTrail->location as $location)
                            <tr id="{{ $location->id }}" style="cursor: move;">
                                <td>{{ $location->id }}</td>
                                <td>
                                    {{ $location->title }}<br>
                                    <a href="{{ route('locations.hints', ['id' => $location->id]) }}" class="btn btn-primary" style="margin-top: 5px">Location Hints</a>
                                </td>
                                <td>{{ $location->rewards_points }}</td>
                                <td>{{ $location->latitude }} {{ $location->longitude }},<br/>radius: {{ $location->radius }}</td>
                                <td>{{ $location->created_at->date }}</td>
  {{--                                     <td> {{ $location->location_order }}</td>--}}
                                <td>{{ $location->updated_at->date }}</td>
                                <td>
                                    <a title="{{ $location->title }}" href="{{ route('locations.show', ['id' => $location->id]) }}">
                                        <i class="fa fa-eye" aria-hidden="true"></i>
                                    </a>
                                    <a title="{{ $location->title }}" href="{{ route('locations.edit', ['id' => $location->id]) }}">
                                        <i class="fa fa-pencil" aria-hidden="true"></i>
                                    </a>
                                    <a href="#" data-toggle="modal" data-target="#mySmallModalLabel{{ $location->id }}" data-location="{{ $location->id }}">
                                        <i class="fa fa-trash" aria-hidden="true"></i>
                                    </a>
                                    <div class="modal fade small_modal_delete" tabindex="-1" role="dialog" id="mySmallModalLabel{{ $location->id }}">
                                        <div class="modal-dialog modal-sm">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">amp;times;</span></button>
                                                    <h4 class="modal-title" id="myModalLabel">Deleting the location</h4>
                                                </div>
                                                <div class="modal-body">
                                                    Are you sure want to delete this location?
                                                    <form action="{{url('admin/locations/'.$location->id)}}" method="POST">
                                                        <input name="_method" type="hidden" value="DELETE" />
                                                        {{ csrf_field() }}
                                                        <button class="btn btn-default" type="submit">Delete</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>
@else
    <div class="col-lg-12 alert alert-warning" style="margin-top: 10px;">
        No Locations found
    </div>
@endif
  

Вот код контроллера

 public function updateOrder(){
    // get the list of items id separated by cama (,)
    $list_order = $_POST['list_order'];

    // convert the string list to an array
    $list = explode(',' , $list_order);
    $i = 1 ;
    foreach($list as $id) {
        Location::whereId($id)->update(['location_order'=>$i]);
        $i   ;
    }
}