DCAT Admin Custom Jadual: Klik untuk menambah fungsi data untuk menerangkannya secara terperinci

Artikel ini menerangkan cara melaksanakan jadual tersuai dalam admin dcat (berdasarkan Admin Laravel), yang membolehkan pengguna mengklik butang untuk menambah data, dan memasukkan medan input tersuai (contohnya: ID, kuantiti, pemilihan warna).

Keperluan senario

Jadual terbina dalam DCAT adalah kuat, tetapi kadang-kadang memerlukan ciri penyesuaian yang lebih fleksibel, seperti menambahkan baris jadual secara dinamik dan menambah kotak input tertentu dan pemilih untuk setiap baris.

Pelan pelaksanaan

Kami akan melaksanakannya dengan menggabungkan javascript depan dan pengawal Laravel back-end.

1. Struktur meja depan (templat bilah)

Pertama, buat struktur meja dalam paparan admin dcat anda, termasuk kotak input ID, butang Tambah, dan jadual itu sendiri. Adalah disyorkan untuk menggunakan rangka kerja CSS yang sesuai untuk mencantikkan antara muka.

<div class="box">
    <div>
        Id:<input type="text" id="idInput">
        <button id="addButton">Tambah ke</button>
    </div>
    <table id="dataTable">
        <thead>
            <tr>
                <th>Id</th>
                <th>kuantiti</th>
                <th>warna</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

2. Pemprosesan acara JavaScript depan

Gunakan JavaScript untuk memproses peristiwa klik butang, hantar permintaan AJAX ke backend untuk mendapatkan data, dan secara dinamik menambahnya ke meja.

 document.getElementById ('AddButton'). AddEventListener ('klik', fungsi () {
    const id = document.getElementById ('IdInput'). Nilai;
    jika (id) {
        AXIOS.GET ('/your-api-endpoint/' id)
            .tua (respons => {
                addRowToTable (response.data);
            })
            .catch (error => {
                Console.error ('Ralat:', Ralat);
                // mengendalikan kesilapan, seperti memaparkan maklumat prompt ralat});
    }
});

fungsi addRowToTable (data) {
    const tablody = document.getElementById ('DataTable'). QuerySelector ('tbody');
    const newRow = tablody.inserTrow ();

    const idCell = newRow.InsertCell ();
    const QuantityCell = newRow.InsertCell ();
    const colorcell = newRow.InsertCell ();

    idCell.TextContent = data.id; // Anggapkan bahawa data yang dikembalikan oleh backend mengandungi medan ID QuantityCell.innerHtml = `<input type="number" value="1"> `; // Tambah kotak input kuantiti colorcell.innerHtml = `<select><option value="red"> Merah</option>
<option value="blue"> Biru</option></select> `; // Tambah pemilih warna}

3. Backend Laravel Controller

Buat kaedah pengawal Laravel untuk memproses permintaan AJAX dan mengembalikan data.

  Php

Namespace App \ http \ controllers \ admin;

Gunakan App \ Http \ Controllers \ Controller;
Gunakan Illuminate \ http \ request;
Gunakan App \ Model \ YourModel; // Gantikan dengan kelas model data anda, anda akan meluaskan pengawal
{
    fungsi awam getData (permintaan $ permintaan, $ id)
    {
        $ data = yourModel :: cari ($ id); // Dapatkan data dari pangkalan data dan laraskannya mengikut model anda jika ($ data) {
            tindak balas kembali ()-> json ($ data);
        } else {
            tindak balas kembali ()-> json (['error' => 'data tidak dijumpai'], 404);
        }
    }
}

4. Pendaftaran Routing dan Pengawal Admin DCAT

Daftar laluan API di fail laluan pentadbir DCAT anda:

 Route :: Get ('/your-api-endpoint/{id}', [\ app \ http \ controllers \ admin \ yourcontroller :: class, 'getdata']);

5. Bersepadu ke pentadbir dcat

Dalam pengawal admin DCAT anda, gunakan kaedah view() untuk menjadikan templat bilah yang mengandungi kod di atas.

Melalui langkah-langkah di atas, anda boleh melaksanakan fungsi jadual data klik-tambah tersuai dalam admin dcat. Ingatlah untuk menggantikan /your-api-endpoint dan YourModel untuk model akhir dan data API sebenar anda. Untuk pengalaman pengguna yang lebih baik, disyorkan untuk menambah pengendalian ralat dan mekanisme pengesahan data.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi jadual tersuai untuk mengklik untuk menambah data dalam admin dcat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!