Bagaimana cara menyesuaikan fungsi jadual mengklik untuk menambah data dalam admin dcat?

Jadual adat admin dcat: Klik untuk menambah data dan masukkan maklumat

Artikel ini menerangkan cara membina jadual tersuai dalam admin dcat (Laravel-Admin), yang membolehkan pengguna mengklik butang untuk menambah baris baru, dan masukkan nombor dan pilih warna dalam baris baru. Ini melampaui fungsi langsung jadual terbina dalam DCAT Admin dan memerlukan gabungan JavaScript dan API belakang.

Pertama, tambahkan butang dan kotak input ID di atas jadual untuk mencetuskan proses penambahan data. Kita boleh menggunakan fungsi bar alat admin dcat untuk melaksanakan:

1. Masukkan butang dan kotak input:

 $ grid-> alat (fungsi ($ alat) {
    $ tools-> append (Tambah data
        <input type="text" id="input-id" placeholder="输入ID">
Html
    );
});

2. Acara Klik Butang Bind (JavaScript):

Gunakan butang mengikat jQuery untuk mengklik acara. Selepas mengklik butang, dapatkan ID dalam kotak input dan dapatkan data melalui AJAX Request Backend API.

 $ ('#add-data-btn'). Klik (fungsi () {
    biarkan id = $ ('#input-id'). val ();
    jika (id) {
        $ .ajax ({
            URL: '/your-napi-endpoint', // gantikan dengan jenis API backend anda: 'GET',
            data: {id: id},
            Kejayaan: Fungsi (Response) {
                addRowToTable (respons);
            },
            ralat: fungsi (ralat) {
                Alert ('Tambah data gagal!');
                console.error (ralat);
            }
        });
    } else {
        amaran ('Sila masukkan id');
    }
});

3. Tambahkan baris baru ke meja (JavaScript):

Fungsi addRowToTable bertanggungjawab untuk menambah data yang dikembalikan oleh backend ke meja dan mengandungi kotak input kuantiti dan pemilih warna. Anggapkan bahawa data yang dikembalikan oleh backend mengandungi medan name .

 fungsi addRowToTable (data) {
    Biarkan NewRow = $ ('<tr> ');
    newrow.append ('<td> 'Data.Name'</td> '); // Nama paparan newrow.append ('<td><input type="number" name="quantity"></td> '); // Kotak input kuantiti newrow.append ('<td><select name="color"><option value="red"> Merah</option>
<option value="blue"> Biru</option>
<option value="green"> Hijau</option></select></td> '); // pemilih warna $ ('#your-table-id tbody'). Append (newRow); // Ganti dengan id meja anda
}<p> Ingat untuk menggantikan <code>/your-api-endpoint</code> dan <code>#your-table-id</code> untuk alamat API sebenar dan ID jadual anda. API backend perlu mengembalikan data yang sepadan berdasarkan id input, contohnya: <code>{'name': 'ProductName'}</code> . Contoh ini menyediakan rangka asas di mana anda boleh menyesuaikan bidang dan fungsi mengikut keperluan sebenar. Sebagai contoh, anda boleh menggunakan komponen UI yang lebih maju untuk meningkatkan pengalaman pengguna.</p>
</tr>

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