Dalam kerangka Loitui, data baris jadual yang dipadam secara dinamik dapat dicapai melalui langkah -langkah berikut: 1. Dengarkan acara Toolbar dan kotak pengesahan muncul apabila anda mengklik butang Padam; 2. Gunakan kaedah obj.del () untuk memadam struktur DOM selepas pengesahan; 3. Keluarkan data yang sepadan dari sumber data dan tentukan semula jadual menggunakan kaedah.Reload kaedah untuk memastikan konsistensi data dan struktur DOM.

Data baris jadual yang dipadam secara dinamik adalah keperluan umum apabila menggunakan rangka kerja LAYUI. Mari kita mulakan dari soalan ini dan meneroka bagaimana untuk melaksanakan ciri ini dan berkongsi beberapa pengalaman dan petua praktikal.

Di Layui, komponen jadual menyediakan API yang kaya untuk memanipulasi data jadual. Kunci untuk memadam data baris adalah untuk memahami struktur dan mekanisme pengendalian peristiwa jadual LAYUI. Mari kita mulakan dengan contoh mudah dan secara beransur -ansur menyelam ke dalam senario yang lebih kompleks.

Pertama, kita perlu memahami struktur asas jadual LAYUI. Jadual Layui biasanya diasaskan oleh table.render Kaedah, dan data boleh diluluskan melalui parameter data . Apabila memadam data baris, kita perlu mencari baris sasaran dan mengeluarkannya dari sumber data dan kemudian membuat semula jadual.

Mari lihat contoh mudah, katakan kami mempunyai jadual di mana pengguna boleh memadam baris yang dipilih dengan mengklik butang:

 // Inisialisasi jadual jadual.render ({{
    Elem: '#demo',
    cols: [[
        {field: 'id', tajuk: 'id', lebar: 80},
        {Field: 'Nama Pengguna', Tajuk: 'Nama Pengguna', Lebar: 120},
        {field: 'pengalaman', tajuk: 'mata', lebar: 80, sort: true},
        {Field: 'Sign', Title: 'Sign'},
        {Field: 'Operasi', Tajuk: 'Operasi', Lebar: 150, Temple: '#OperationTpl'}
    ]],
    Data: [
        {"id": "10001", "nama pengguna": "du fu", "pengalaman": "93", "tanda": "Saya akan berada di puncak gunung dan mengabaikan gunung -gunung kecil."},
        {"id": "10002", "nama pengguna": "li bai", "pengalaman": "88", "tanda": "Bagaimana saya boleh menundukkan kening saya dan berkhidmat yang kuat dan tidak berpuas hati!"},
        {"id": "10003", "nama pengguna": "wang bo", "pengalaman": "91", "tanda": "Terdapat kawan rapat di laut, dan dunia seperti jiran."}
    ],
    ID: 'TestReload'
});

// Tentukan templat operasi <skrip type = "text/html" id = "OperationTpl">
    <a class = "Layui-BTN LAYUI-BTN-XS" LAY-EVENT = "DEL"> DELETE </A>
</script>

// Dengarkan Table Table Table.on (&#39;Alat (Demo)&#39;, Fungsi (OBJ) {
    var data = obj.data;
    jika (obj.event === &#39;del&#39;) {
        Layer.confirm (&#39;Adakah ia benar -benar memadam garis&#39;, fungsi (indeks) {
            obj.del (); // Padam struktur DOM garis yang sama (TR) dan kemas kini lapisan cache.close (indeks);
            // hantar arahan padam ke pelayan});
    }
});

Dalam contoh ini, kami mendengar acara bar alat melalui kaedah table.on . Apabila pengguna mengklik butang Padam, kotak pengesahan muncul. Selepas pengesahan, kami memanggil kaedah obj.del() untuk memadamkan data baris.

Walau bagaimanapun, hanya memadam struktur DOM tidak mencukupi, kita juga perlu mengemas kini sumber data dan membuat semula jadual. Mari kita lihat contoh yang lebih lengkap tentang cara memadam data baris secara dinamik dan mengemas kini sumber data:

 // Katakan kita mempunyai pembolehubah global untuk menyimpan data jadual var tableedata = [
    {"id": "10001", "nama pengguna": "du fu", "pengalaman": "93", "tanda": "Saya akan berada di puncak gunung dan mengabaikan gunung -gunung kecil."},
    {"id": "10002", "nama pengguna": "li bai", "pengalaman": "88", "tanda": "Bagaimana saya boleh menundukkan kening saya dan berkhidmat yang kuat dan tidak berpuas hati!"},
    {"id": "10003", "nama pengguna": "wang bo", "pengalaman": "91", "tanda": "Terdapat kawan rapat di laut, dan dunia seperti jiran."}
];

// Inisialisasi jadual jadual.render ({{
    Elem: '#demo',
    cols: [[
        {field: 'id', tajuk: 'id', lebar: 80},
        {Field: 'Nama Pengguna', Tajuk: 'Nama Pengguna', Lebar: 120},
        {field: 'pengalaman', tajuk: 'mata', lebar: 80, sort: true},
        {Field: 'Sign', Title: 'Sign'},
        {Field: 'Operasi', Tajuk: 'Operasi', Lebar: 150, Temple: '#OperationTpl'}
    ]],
    Data: tableedata,
    ID: 'TestReload'
});

// Tentukan templat operasi <skrip type = "text/html" id = "OperationTpl">
    <a class = "Layui-BTN LAYUI-BTN-XS" LAY-EVENT = "DEL"> DELETE </A>
</script>

// Dengarkan Table Table Table.on (&#39;Alat (Demo)&#39;, Fungsi (OBJ) {
    var data = obj.data;
    jika (obj.event === &#39;del&#39;) {
        Layer.confirm (&#39;Adakah ia benar -benar memadam garis&#39;, fungsi (indeks) {
            // Padam baris data dari sumber data tableData = tableData.Filter (fungsi (item) {
                mengembalikan item.id! == data.id;
            });
            // Memberi semula jadual jadual.reload (&#39;testReload&#39;, {
                Data: TableData
            });
            lapisan.close (indeks);
            // Hantar arahan padam ke pelayan // Di sini anda boleh menambah permintaan AJAX untuk menyegerakkan operasi padam});
    }
});

Dalam contoh ini, kita bukan sahaja memadamkan struktur DOM, tetapi juga mengeluarkan data yang sepadan dari tableData dan membuat semula jadual melalui kaedah table.reload . Dengan cara ini, kedua -dua data tabular dan struktur DOM boleh konsisten.

Dalam aplikasi praktikal, kita perlu memberi perhatian kepada perkara berikut:

1. Penyegerakan data : Pastikan operasi penghapusan depan tetap disegerakkan dengan data back-end. Ia biasanya perlu menyegerakkan operasi padam ke pelayan melalui permintaan AJAX.

2. Pengalaman Pengguna : Sebelum memadam operasi, berikan arahan pengesahan untuk mengelakkan salah operasi. Ia boleh dilaksanakan menggunakan kaedah Layui's layer.confirm .

3. Pengoptimuman Prestasi : Jika data jadual adalah besar, kerapian semula boleh menjejaskan prestasi. Pertimbangkan menggunakan pemotongan maya atau pemuatan paging untuk pengoptimuman.

4. Pengendalian ralat : Semasa operasi penghapusan, anda mungkin menghadapi ralat rangkaian atau kesilapan pengembalian pelayan. Situasi ini perlu dikendalikan untuk memberikan maklum balas pengguna yang mesra.

Melalui kaedah dan teknik di atas, kita boleh secara fleksibel melaksanakan fungsi data baris yang dipadam secara dinamik dalam jadual LAYUI. Mudah -mudahan pengalaman dan sampel kod ini akan membantu anda menggunakan komponen jadual LAYUI dalam projek sebenar anda.

Atas ialah kandungan terperinci Cara memadam data baris secara dinamik dalam jadual LAYUI. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!