Cara untuk menambah lajur butang tersuai dalam jadual LAYUI adalah untuk menentukan ID templat melalui harta bar alat dan mengendalikan butang klik tingkah laku melalui pendengaran acara. Langkah -langkah khusus termasuk: 1. Gunakan atribut bar alat untuk menentukan ID templat dalam konfigurasi jadual; 2. Tulis kandungan templat dan tentukan butang dan peristiwa mereka; 3. Gunakan mekanisme pendengaran acara untuk mengendalikan tingkah laku klik butang. Kelebihan kaedah ini adalah fleksibiliti yang tinggi, tetapi perlu diperhatikan bahawa terlalu banyak butang boleh menjejaskan prestasi.

Pengenalan

Dalam pembangunan web moden, jadual adalah komponen UI biasa yang kuat dan fleksibel. Terutama apabila menggunakan rangka kerja depan seperti LAYUI, keupayaan untuk menyesuaikan jadual telah menjadi topik perbincangan di kalangan pemaju. Hari ini kami akan meneroka cara menambah lajur butang tersuai ke jadual LAYUI untuk membantu semua orang memanipulasi data lebih fleksibel dalam projek.

Melalui artikel ini, anda akan belajar bagaimana untuk menambah lajur butang ke meja Loaui anda dan mendapatkan wawasan tentang kebaikan dan keburukan pendekatan ini dan cabaran yang mungkin anda hadapi.

Semak pengetahuan asas

Layui adalah rangka kerja UI depan ringan yang menyediakan komponen yang kaya, di mana jadual biasanya digunakan dan komponen yang kuat. Jadual Layui menyokong pelbagai kaedah manipulasi dan persembahan data, sementara penambahan lajur tersuai mengambil fungsi jadual ke tahap yang lebih tinggi.

Sebelum anda memulakan, pastikan anda sudah biasa dengan penggunaan asas LAYUI, termasuk cara memulakan jadual dan item konfigurasi asas.

Konsep teras atau analisis fungsi

Definisi dan fungsi lajur butang tersuai

Dalam jadual LoaD, menambah lajur butang tersuai membolehkan kami membenamkan butang tindakan dalam setiap baris jadual, seperti penyuntingan, memadam, melihat butiran, dan lain -lain. Butang ini boleh mencetuskan tindakan tertentu untuk meningkatkan interaksi pengguna dengan data.

Contoh:

 <Table ID = "Demo" Lay-filter = "Test"> </Table>

<script>
    Layui.use (&#39;Table&#39;, Function () {
        var Table = Layui.Table;

        table.render ({
            Elem: &#39;#demo&#39;
            , URL: &#39;/data.json&#39;
            , cols: [[
                {field: &#39;id&#39;, tajuk: &#39;id&#39;, lebar: 80, sort: true}
                , {field: &#39;nama pengguna&#39;, tajuk: &#39;nama pengguna&#39;, lebar: 120}
                , {field: &#39;pengalaman&#39;, tajuk: &#39;mata&#39;, lebar: 120, sort: true}
                , {Field: &#39;Sign&#39;, Title: &#39;Sign&#39;}
                , {Tajuk: &#39;Operasi&#39;, Toolbar: &#39;#Bardemo&#39;, Lebar: 150}
            ]]
            , Halaman: Benar
        });

        // toolbar event table.on (&#39;tool (test)&#39;, function (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 ();
                    lapisan.close (indeks);
                });
            } else if (obj.event === &#39;edit&#39;) {
                Layer.Prompt ({
                    Formtype: 2
                    , nilai: data.email
                }, fungsi (nilai, indeks) {
                    obj.update ({
                        E -mel: Nilai
                    });
                    lapisan.close (indeks);
                });
            }
        });
    });
</script>

<!-Templat Toolbar->
<script type = "text/html" id = "bardemo">
    <a class = "Layui-BTN LAYUI-BTN-XS" LAY-EVENT = "EDIT"> EDIT </a>
    <a class = "Layui-btn Layui-btn-Danger Layui-BTN-XS" Lay-Event = "Del"> DELETE </a>
</script>

Dalam contoh ini, kami menentukan ID template #barDemo melalui harta toolbar dan memohon templat ini ke lajur操作apabila jadual diberikan. Dengan cara ini, kami berjaya menambah lajur butang tersuai ke meja.

Bagaimana ia berfungsi

Lajur butang tersuai jadual LAYUI dilaksanakan melalui enjin templat. Apabila membuat jadual, ia akan menghuraikan dan menjadikan kandungan HTML yang sepadan ke dalam sel jadual berdasarkan ID templat yang ditentukan oleh harta toolbar . Apabila pengguna mengklik butang ini, LAYUI akan mencetuskan operasi yang sama melalui mekanisme pendengaran acara.

Kelebihan pendekatan ini adalah fleksibiliti dan skalabiliti, dan anda boleh menyesuaikan gaya dan tingkah laku butang yang anda mahukan. Walau bagaimanapun, perlu diperhatikan bahawa terlalu banyak butang tersuai boleh menjejaskan kelajuan pemuatan dan pengalaman pengguna jadual.

Contoh penggunaan

Penggunaan asas

Dalam contoh di atas, kami telah menunjukkan cara menambah butang Edit dan Padam. Penggunaan asas adalah untuk menentukan atribut toolbar dalam konfigurasi jadual dan mengendalikan tingkah laku klik butang melalui pendengaran acara.

Penggunaan lanjutan

Jika anda ingin menambah lebih banyak fungsi ke lajur butang, seperti melihat butiran, operasi batch, dan lain -lain, anda boleh mencapainya dengan memperluaskan kandungan templat dan logik pemprosesan acara.

Contoh:

 <!-Templat Toolbar Extended->
<script type = "text/html" id = "BardemoadVanced">
    <a class = "Layui-BTN LAYUI-BTN-XS" Lay-Event = "Detail"> Lihat </a>
    <a class = "Layui-BTN LAYUI-BTN-XS" LAY-EVENT = "EDIT"> EDIT </a>
    <a class = "Layui-btn Layui-btn-Danger Layui-BTN-XS" Lay-Event = "Del"> DELETE </a>
    <a class = "Layui-BTN LAYUI-BTN-XS" Lay-Event = "Batch"> Operasi batch </a>
</script>

<script>
    Layui.use (&#39;Table&#39;, Function () {
        var Table = Layui.Table;

        table.render ({
            Elem: &#39;#demo&#39;
            , URL: &#39;/data.json&#39;
            , cols: [[
                {field: &#39;id&#39;, tajuk: &#39;id&#39;, lebar: 80, sort: true}
                , {field: &#39;nama pengguna&#39;, tajuk: &#39;nama pengguna&#39;, lebar: 120}
                , {field: &#39;pengalaman&#39;, tajuk: &#39;mata&#39;, lebar: 120, sort: true}
                , {Field: &#39;Sign&#39;, Title: &#39;Sign&#39;}
                , {Tajuk: &#39;Operasi&#39;, Toolbar: &#39;#BardemoadVanced&#39;, Lebar: 250}
            ]]
            , Halaman: Benar
        });

        // toolbar event table.on (&#39;tool (test)&#39;, function (obj) {
            var data = obj.data;
            jika (obj.event === &#39;detail&#39;) {
                // Lihat lapisan logik.Open ({
                    Jenis: 1,
                    Tajuk: &#39;Butiran Pengguna&#39;,
                    Kandungan: &#39;<div> Nama pengguna:&#39; data.username &#39;</div> <div> mata:&#39; data.experience &#39;</div>&#39;
                });
            } else if (obj.event === &#39;edit&#39;) {
                // Edit Logic Layer.Prompt ({
                    Formtype: 2
                    , nilai: data.email
                }, fungsi (nilai, indeks) {
                    obj.update ({
                        E -mel: Nilai
                    });
                    lapisan.close (indeks);
                });
            } else if (obj.event === &#39;del&#39;) {
                // Padam lapisan logik.confirm (&#39;adakah ia benar -benar memadam garis&#39;, fungsi (indeks) {
                    obj.del ();
                    lapisan.close (indeks);
                });
            } else if (obj.event === &#39;batch&#39;) {
                // Operasi logik Operasi Layer.Open ({{
                    Jenis: 1,
                    Tajuk: &#39;Operasi Batch&#39;,
                    Kandungan: &#39;<div> Pilih operasi batch yang akan dilakukan </div>&#39;
                });
            }
        });
    });
</script>

Dalam penggunaan lanjutan ini, kami telah menambah butang untuk melihat butiran dan operasi batch dan mengendalikan ciri -ciri baru ini melalui mendengar acara.

Kesilapan biasa dan tip debugging

• Acara butang tidak dipecat : Pastikan harta lay-filter anda selaras dengan lay-filter , jika tidak, peristiwa itu tidak akan dicetuskan dengan betul.
• Ralat Parsing Templat : Periksa sama ada ID templat anda betul dan sama ada kandungan templat memenuhi keperluan Layui.
• Isu Prestasi : Jika data jadual adalah besar, terlalu banyak butang tersuai boleh menyebabkan pemuatan perlahan, pertimbangkan pemuatan atas permintaan atau paging.

Pengoptimuman prestasi dan amalan terbaik

Dalam aplikasi praktikal, sangat penting untuk mengoptimumkan prestasi jadual LAYUI dan mengikuti amalan terbaik. Berikut adalah beberapa cadangan:

• Memuatkan permintaan : Untuk jumlah data yang besar, pertimbangkan untuk menggunakan fungsi paging Layui untuk mengelakkan memuat semua data sekaligus.
• Memudahkan templat : Cuba memudahkan kandungan templat, mengurangkan operasi DOM yang tidak perlu, dan meningkatkan kelajuan rendering.
• Pengoptimuman Mendengarkan Acara : Untuk operasi meja kompleks, anda boleh mempertimbangkan menggunakan perwakilan acara untuk mengurangkan bilangan pendengar acara.

Contoh:

 <Table ID = "Demo" Lay-filter = "Test"> </Table>

<script>
    Layui.use (&#39;Table&#39;, Function () {
        var Table = Layui.Table;

        table.render ({
            Elem: &#39;#demo&#39;
            , URL: &#39;/data.json&#39;
            , cols: [[
                {field: &#39;id&#39;, tajuk: &#39;id&#39;, lebar: 80, sort: true}
                , {field: &#39;nama pengguna&#39;, tajuk: &#39;nama pengguna&#39;, lebar: 120}
                , {field: &#39;pengalaman&#39;, tajuk: &#39;mata&#39;, lebar: 120, sort: true}
                , {Field: &#39;Sign&#39;, Title: &#39;Sign&#39;}
                , {Tajuk: &#39;Operasi&#39;, Toolbar: &#39;#Bardemo&#39;, Lebar: 150}
            ]]
            , Halaman: Benar
            , had: 10/10 keping data dipaparkan pada setiap halaman, Had: [10, 20, 30] // Nombor paparan pilihan kepingan per halaman});

        // toolbar event table.on (&#39;tool (test)&#39;, function (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 ();
                    lapisan.close (indeks);
                });
            } else if (obj.event === &#39;edit&#39;) {
                Layer.Prompt ({
                    Formtype: 2
                    , nilai: data.email
                }, fungsi (nilai, indeks) {
                    obj.update ({
                        E -mel: Nilai
                    });
                    lapisan.close (indeks);
                });
            }
        });
    });
</script>

<!-Templat Toolbar yang dipermudahkan->
<script type = "text/html" id = "bardemo">
    <a class = "Layui-BTN LAYUI-BTN-XS" LAY-EVENT = "EDIT"> EDIT </a>
    <a class = "Layui-btn Layui-btn-Danger Layui-BTN-XS" Lay-Event = "Del"> DELETE </a>
</script>

Dengan pengoptimuman dan amalan terbaik ini, anda boleh fleksibel menambah lajur butang tersuai dalam jadual LAYUI anda sambil mengekalkan prestasi dan pengalaman pengguna yang baik.

Dalam projek-projek sebenar, saya pernah menemui satu kes yang menarik: Dalam sistem pengurusan backend platform e-dagang yang besar, kita perlu menambah banyak butang operasi ke senarai produk, termasuk penyenaraian, penyuntingan, pemadaman, dan lain-lain. Oleh kerana jumlah data yang besar, kami mengadopsi pemuatan penomboran dan penyerahan atas permintaan, yang meningkatkan kelajuan respons dan pengguna yang sangat baik. Kes ini membuat saya sangat menyedari bahawa pengoptimuman prestasi dan pengalaman pengguna sama pentingnya semasa proses pembangunan.

Semoga artikel ini membantu anda menambah lajur butang tersuai secara fleksibel dalam jadual LAYUI dan selesa dalam projek sebenar.

Atas ialah kandungan terperinci Cara menambah lajur butang tersuai dalam jadual LAYUI. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!