Bagaimanakah saya menggunakan komponen jadual LAYUI untuk memaparkan data?

Bagaimanakah saya menggunakan komponen jadual LAYUI untuk memaparkan data?

Komponen jadual Layui menyediakan cara yang mudah tetapi berkuasa untuk memaparkan data dalam format tabular. Inti menggunakannya melibatkan penubuhan struktur jadual menggunakan HTML dan kemudian memadamkannya dengan data menggunakan JavaScript. Inilah kerosakan:

Pertama, anda perlu memasukkan fail CSS dan JavaScript Layui di HTML anda:

 <code class="html"><link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script></code>

Seterusnya, anda membuat elemen table di HTML anda, yang akan berfungsi sebagai bekas untuk jadual anda. Elemen ini memerlukan atribut id untuk Layui untuk mensasarkannya. Anda juga boleh memasukkan beberapa struktur jadual asas:

 <code class="html"><table id="demo" lay-filter="test"></table></code>

Atribut lay-filter adalah penting; Ia digunakan untuk mengenal pasti contoh jadual untuk manipulasi kemudian.

Akhirnya, anda menggunakan JavaScript untuk menjadikan data jadual menggunakan layui.table.render() . Fungsi ini mengambil objek sebagai hujahnya, menentukan pelbagai pilihan seperti ID Elemen ( elem ), Data ( data ), Lajur ( cols ), dan konfigurasi lain. Inilah contoh:

 <code class="javascript">layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo' ,cols: [[ //标题栏{field: 'id', title: 'ID', width:80, sort: true} ,{field: 'username', title: '用户名', width:80} ,{field: 'email', title: '邮箱', width:120} ,{field: 'sex', title: '性别', width:80} ,{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '签名', width:170} ]] ,data: [ //假设数据{'id':'1','username':'张三','email':'zhangsan@gmail.com','sex':'男','city':'西安','sign':'hello'} ,{'id':'2','username':'李四','email':'lisi@gmail.com','sex':'女','city':'北京','sign':'hello world'} ] ,page: true //开启分页}); });</code>

Kod ini menjadikan jadual dengan lajur dan data yang ditentukan. Ingatlah untuk menggantikan data sampel dengan data sebenar anda. page: true membolehkan penomboran (dijelaskan lebih lanjut di bawah).

Bolehkah saya menyesuaikan lajur dalam komponen jadual LAYUI?

Ya, komponen meja Layui menawarkan penyesuaian lajur yang luas. Anda boleh mengawal pelbagai aspek setiap lajur, termasuk:

• field : Kunci data yang sepadan dengan lajur. Ini adalah bagaimana Layui memetakan data ke lajur.
• title : Teks tajuk lajur.
• width : Lebar lajur (dalam piksel atau peratusan).
• sort : Membolehkan penyortiran untuk lajur ini (benar/palsu).
• templet : Fungsi atau templat rentetan untuk menyesuaikan bagaimana data dipaparkan dalam sel. Ini membolehkan pemformatan kompleks, termasuk menggunakan ikon, pautan, atau elemen HTML yang lain. Sebagai contoh, anda boleh menggunakan templat untuk memaparkan status pengguna dengan ikon berwarna.
• toolbar : Membolehkan anda menambah butang atau tindakan tersuai dalam setiap sel baris. Ini berguna untuk membuat edit, memadam, atau operasi khusus baris lain.
• edit : Membolehkan penyuntingan sel di tempat. Ini membolehkan pengguna untuk mengubahsuai data secara langsung dalam jadual.
• type : Membolehkan anda menentukan jenis lajur yang berlainan seperti 'kotak semak' untuk menambah kotak semak ke setiap baris.

Berikut adalah contoh menunjukkan templet dan toolbar :

 <code class="javascript">cols: [[ {field: 'status', title: 'Status', templet: function(d){ return d.status === 1 ? '<span style="color:green;">Active</span>' : '<span style="color:red;">Inactive</span>'; }} ,{field: 'actions', title: 'Actions', toolbar: '#barDemo'} ]]</code>

Ini menambah lajur status dengan pewarna bersyarat dan lajur tindakan dengan butang tersuai yang ditakrifkan dalam templat dengan id barDemo .

Bagaimana saya mengendalikan penomboran dengan komponen meja Loai?

Komponen meja Layui memudahkan penomboran. Untuk mengaktifkan penomboran, hanya tetapkan pilihan page untuk true dalam table.render() fungsi:

 <code class="javascript">table.render({ // ... other options ... page: true });</code>

Ini secara automatik akan menambah kawalan penomboran ke bahagian bawah meja. Layui mengendalikan pengambilan dan paparan data untuk setiap halaman. Anda boleh menyesuaikan penomboran lagi dengan menentukan pilihan tambahan:

• limit : Bilangan baris setiap halaman.
• limits : Pelbagai pilihan untuk bilangan baris per halaman yang pengguna boleh pilih.
• layout : Kawalan unsur -unsur penomboran yang dipaparkan (misalnya, 'Count', 'Prev', 'Page', 'Next', 'Limit', 'Skip').
• curr : Menentukan nombor halaman semasa. Berguna apabila memuatkan halaman tertentu.

Untuk dataset yang lebih besar, anda biasanya ingin mengambil data dari API backend anda dalam ketulan berdasarkan nombor halaman dan limit semasa. Ini diliputi dalam bahagian seterusnya.

Bagaimanakah saya dapat mengintegrasikan komponen meja Look dengan API backend saya?

Mengintegrasikan jadual Loai dengan API backend melibatkan pengambilan data menggunakan AJAX (biasanya dengan JQuery's $.ajax() atau API terbina dalam pelayar fetch() API) dan kemudian lulus data tersebut ke fungsi table.render() . Anda biasanya perlu menyesuaikan panggilan API anda berdasarkan halaman dan had semasa.

Inilah contoh menggunakan fetch() :

 <code class="javascript">layui.use('table', function(){ var table = layui.table; let currentPage = 1; let pageSize = 10; function fetchData(page, limit) { return fetch(`/api/data?page=${page}&limit=${limit}`) .then(response => response.json()) .then(data => { return { data: data.items, // Assuming your API returns an object with 'items' property count: data.totalCount // Assuming your API returns total count }; }); } fetchData(currentPage, pageSize).then(data => { table.render({ elem: '#demo', cols: [[ /* ... your columns ... */ ]], data: data.data, page: { curr: currentPage, limit: pageSize, count: data.count } }); }); });</code>

Kod ini mengambil data dari /api/data , lulus nombor halaman dan had sebagai parameter pertanyaan. Sambutan kemudian digunakan untuk menjadikan jadual. Ingatlah untuk menyesuaikan titik akhir API dan struktur data untuk memadankan backend anda. Anda juga biasanya akan menambah pendengar acara untuk mengendalikan perubahan penomboran dan mengemas currentPage semasa, refetching data apabila halaman berubah. Pengendalian ralat dan penunjuk pemuatan juga merupakan pertimbangan penting untuk pelaksanaan siap pengeluaran.

Atas ialah kandungan terperinci Bagaimanakah saya menggunakan komponen jadual LAYUI untuk memaparkan data?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!