Posisikan Pemesanan Ulang dengan Drag/Drop – Panel Admin Cepat

Salah satu fitur yang diminta di QuickAdminPanel kami, adalah pengurutan ulang entri di Datatables secara drag’n’drop. Untuk saat ini, kami memutuskan untuk membuat proyek demo cepat yang akan menunjukkan kepada Anda cara menambahkan fungsi ini.

---

Inilah hasil yang akan kami buat – dalam format video.

---

Dalam tutorial ini, kami akan berasumsi bahwa Model Anda memiliki bidang bilangan bulat posisi.

Langkah 1. Mengatur posisi entri baru

kalau sudah app/Currency.php model dan ingin menambahkan mata uang baru, berikut kode yang harus ditambahkan:

class Currency extends Model
{
    // ...

    protected static function boot()
    {
        parent::boot();

        Currency::creating(function ($model) {
            $model->position = Currency::max('position') + 1;
        });
    }
}

---

Langkah 2. Susun Ulang Metode di Pengontrol

Di Controller kami, kami akan menambahkan fungsi khusus yang akan menyimpan semua posisi untuk semua entri.

app/Http/Controllers/Admin/CurrenciesController.php:

class CurrenciesController extends Controller
{

    // ...

    public function reorder(Request $request)
    {
        foreach($request->input('rows', []) as $row)
        {
            Currency::find($row['id'])->update([
                'position' => $row['position']
            ]);
        }

        return response()->noContent();
    }
}

Bagaimana kita menyebut metode itu? Di dalam rute/web.php:

Route::post('currencies/reorder', 'CurrenciesController@reorder')->name('currencies.reorder');

---

Langkah 3. Blade & JavaScript: Sembunyikan Posisi dan Susun Ulang

Di generator QuickAdminPanel kami, kami memiliki tabel data sumber daya/tampilan/admin/mata uang/index.blade.phpjadi inilah kode JavaScript untuk datatables:

<table class=" table table-bordered table-striped table-hover datatable datatable-Currency">
    ...
</table>

@section('scripts')
@parent
<script>
    $(function () {
      let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)

      $.extend(true, $.fn.dataTable.defaults, {
        order: [[ 2, 'asc' ]],
        pageLength: 100,
        columnDefs: [
            ...$.fn.dataTable.defaults.columnDefs,
            {
                visible: false,
                searchable: false,
                targets: 2
            }
        ],
        rowReorder: {
            selector: 'tr td:not(:first-of-type,:last-of-type)',
            dataSrc: '2'
        },
      });

      let datatable = $('.datatable-Currency:not(.ajaxTable)').DataTable({ buttons: dtButtons })

        datatable.on('row-reorder', function (e, details) {
            if(details.length) {
                let rows = [];
                details.forEach(element => {
                    rows.push({
                        id: $(element.node).data('entry-id'),
                        position: element.newData
                    });
                });

                $.ajax({
                    headers: {'x-csrf-token': _token},
                    method: 'POST',
                    url: "{{ route('admin.currencies.reorder') }}",
                    data: { rows }
                }).done(function () { location.reload() });
            }

        });
})

</script>
@endsection

Dalam hal ini, kami berasumsi demikian posisi adalah kolom nomor 2 (yaitu kolom ketiga, angka dimulai dari 0), jadi kami menyembunyikannya secara visual, tetapi menjadikannya sumber penataan ulang.

---

Langkah 3b. Tabel Data AJAX

Kodenya sedikit berbeda untuk modul AJAX Datatables dengan rendering sisi server. Berikut ini contoh dari hal serupa sumber daya/tampilan/admin/negara/index.blade.php dari:

<table class=" table table-bordered table-striped table-hover ajaxTable datatable datatable-Country">
...
</table>

...

<script>
$(function () {
  let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)

  let dtOverrideGlobals = {
    buttons: dtButtons,
    processing: true,
    serverSide: true,
    retrieve: true,
    aaSorting: [],
    ajax: "{{ route('admin.countries.index') }}",
    columns: [
        { data: 'placeholder', name: 'placeholder' },
        { data: 'id', name: 'id' },
        { data: 'position', name: 'position', visible: false, searchable: false },
        { data: 'name', name: 'name' },
        { data: 'short_code', name: 'short_code' },
        { data: 'actions', name: '{{ trans('global.actions') }}' }
    ],
    order: [[ 2, 'asc' ]],
    pageLength: 100,
    rowReorder: {
        selector: 'tr td:not(:first-of-type,:last-of-type)',
        dataSrc: 'position'
    },
  };

  let datatable = $('.datatable-Country').DataTable(dtOverrideGlobals);
    datatable.on('row-reorder', function (e, details) {
        if(details.length) {
            let rows = [];
            details.forEach(element => {
                rows.push({
                    id: datatable.row(element.node).data().id,
                    position: element.newData
                });
            });

            $.ajax({
                headers: {'x-csrf-token': _token},
                method: 'POST',
                url: "{{ route('admin.countries.reorder') }}",
                data: { rows }
            }).done(function () { datatable.ajax.reload() });
        }
    });
});

</script>

Itu saja! Repositori publik tersedia di sini di Github.