Bagaimana cara menyesuaikan jadual dengan klik untuk menambah data dalam admin dcat?

Sesuaikan jadual di mana klik untuk menambah data dalam admin dcat

Artikel ini menerangkan cara membuat jadual tersuai dalam admin dcat (Laravel-Admin), yang membolehkan pengguna mengklik butang untuk menambah data, dan menyokong kuantiti dan warna penyuntingan dalam jadual. Angka berikut menunjukkan fungsi sasaran:

Langkah pelaksanaan

1. Buat jadual dan tambahkan butang:

Dalam admin DCAT, buat jadual menggunakan grid dan tambahkan butang ke bar alat jadual untuk mencetuskan tindakan Tambah Data. Coretan kod berikut menunjukkan cara membuat jadual dan menambah butang:

 Gunakan dcat \ admin \ grid;
Gunakan dcat \ admin \ susun atur \ content;

Indeks Fungsi Awam (Kandungan $ Kandungan)
{
    Kembalikan $ Kandungan
        -> Header ('Pengurusan Data')
        -> Keterangan ('Tambah Data')
        -> badan ($ this-> grid ());
}

grid fungsi dilindungi ()
{
    $ grid = grid baru (new YourModel ());

    $ grid-> alat (fungsi (grid \ tools $ tools) {
        $ tools-> append (new \ dcat \ admin \ grid \ tools \ button ('data iklan', 'btn-add-data')-> class ('btn btn-primary'));
    });

    // Definisi lajur jadual $ grid-> lajur ('id', 'id');
    $ grid-> lajur ('nama', 'nama');
    $ grid-> column ('kuantiti', 'kuantiti')-> disunting ();
    $ grid-> lajur ('warna', 'warna')-> pilih (['merah' => 'merah', 'biru' => 'biru', 'hijau' => 'hijau']);

    pulangan $ grid;
}

2. Kod JavaScript depan:

Gunakan butang pengikat jQuery untuk mengklik acara, dapatkan data melalui pelayan permintaan AJAX dan tambahkan data ke jadual. Ambil perhatian bahawa menggantikan /admin/your-endpoint untuk alamat antara muka pemprosesan backend anda, #your-grid-id untuk id jadual anda. Untuk pengalaman pengguna yang lebih baik, adalah disyorkan untuk menggunakan kaedah operasi jadual yang disediakan oleh admin DCAT dan bukannya mengendalikan DOM secara langsung.

 $ (dokumen) .on ('klik', '.btn-add-data', fungsi () {
    biarkan id = prompt ("Sila masukkan id");
    jika (id) {
        $ .ajax ({
            URL: '/Admin/Your-Endpoint',
            Jenis: 'Dapatkan',
            data: {id: id},
            Kejayaan: Fungsi (data) {
                jika (data) {
                    // Tambah baris menggunakan kaedah admin dcat dan bukannya memanipulasi DOM secara langsung
                    Dcat.grid.appendrow ('#your-grid-id', data); // Ganti #grid-grid-id sebagai id meja anda
                } else {
                    amaran ('tiada data yang dijumpai');
                }
            },
            ralat: fungsi (ralat) {
                Alert ('Permintaan gagal:' error.responsetext);
            }
        });
    }
});

3. Backend mengendalikan permintaan Ajax:

Kaedah pengawal backend memproses permintaan AJAX, data pertanyaan berdasarkan ID dan mengembalikan data JSON.

 Gunakan Illuminate \ http \ request;

fungsi awam getDatum (permintaan $ permintaan)
{
    $ id = $ request-> input ('id');
    $ data = yourModel :: cari ($ id);

    jika ($ data) {
        tindak balas kembali ()-> json ($ data);
    } else {
        tindak balas kembali ()-> json (null);
    }
}

4. Cadangan Penambahbaikan (menggunakan API Jadual DCAT Admin):

Untuk mengintegrasikan fungsi admin DCAT dengan lebih baik, disarankan untuk menggunakan API yang disediakan oleh admin DCAT untuk memanipulasi jadual dan bukannya memanipulasi DOM secara langsung. Ini memastikan bahawa kod anda serasi dengan kemas kini dari admin dcat dan mendapat penyelenggaraan yang lebih baik. Sebagai contoh, anda mungkin mempertimbangkan untuk menambah baris menggunakan Dcat.grid.addRow() atau serupa. Ini memerlukan rujukan kepada dokumentasi pentadbir DCAT untuk menentukan kaedah API yang paling sesuai.

Melalui langkah-langkah di atas, anda boleh membuat jadual data klik-tambah tersuai dalam admin dcat. Ingatlah untuk menggantikan YourModel dengan nama model anda dan laraskan kod mengikut situasi sebenar anda. Menggunakan API yang disediakan oleh Admin DCAT boleh menjadikan kod anda lebih ringkas, lebih mudah untuk mengekalkan, dan lebih baik diintegrasikan dengan rangka kerja.

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