Buat jadual dinamik dalam beberapa saat dari mana -mana data JSON

Mudah untuk membuat jadual interaktif dinamik dengan tabulator plugin JQuery UI ringan! Artikel ini akan membimbing anda bagaimana untuk menukar data JSON ke dalam jadual dinamik, interaktif dengan kod JavaScript yang sangat sedikit.

mata teras:

• Tetapan cepat: Plugin Tabulator membolehkan anda menukar data JSON ke dalam jadual dinamik, interaktif dengan hanya sedikit kod JavaScript.
• Lajur Custom: Anda boleh menentukan dan menyesuaikan lajur jadual melalui parameter seperti tajuk, medan, penyortiran, lebar dan formatter untuk memenuhi keperluan khusus anda.
• Pemuatan data yang fleksibel: Tabulator menyokong pelbagai kaedah pemuatan data, termasuk susunan JavaScript, permintaan AJAX, dan penukaran jadual HTML yang ada.
• Interaktiviti yang dipertingkatkan: Penyortiran, penapisan dan penyuntingan terbina untuk pengalaman pengguna yang lebih baik. Ciri -ciri Lanjutan:
Terokai ciri -ciri yang lebih canggih seperti penyusun tersuai dan formatters, kumpulan baris, lajur bergerak dan paging untuk membuat jadual yang kuat.
• Artikel ini dikaji semula oleh Stephan Max dan Simon Codrington. Terima kasih kepada semua pengulas rakan sebaya di SitePoint untuk membuat kandungan SitePoint sempurna!

Jadual HTML standard sangat mudah untuk susun atur data asas, tetapi bagaimana jika anda memerlukan ciri jadual yang lebih kuat? Sebagai contoh, mendapatkan data dari API luaran, membuat jadual disusun atau boleh diedit, anda memerlukan alat yang lebih berkuasa.

Jika ini terdengar biasa, maka Tabulator adalah pilihan yang sempurna untuk anda. Tabulator adalah plugin UI jquery ringan yang direka untuk memudahkan pembinaan jadual interaktif yang kompleks. Dengan hanya beberapa baris kod JavaScript, anda boleh menukar hampir mana -mana sumber data ke dalam jadual interaktif yang indah.

Tutorial ini membimbing anda melalui langkah -langkah asas untuk membuat tabulator pertama, kemudian memperluaskan beberapa pilihan yang tersedia untuk menambah fungsi tambahan ke meja anda.

Buat tabulator pertama anda

mari kita mulakan dengan membuat jadual yang sangat mudah. Sejak Tabulator adalah widget jQuery, anda perlu memasukkan perpustakaan jQuery dan jQuery UI, sama ada dari sumber tempatan atau CDN pilihan anda.

Anda perlu mendapatkan salinan perpustakaan Tabulator (boleh diklon dari repositori GitHub:

https://www.php.cn/link/f7eabb16f5527507fc1236f156c5b816

.

Buat elemen untuk memegang jadual:

<link rel="stylesheet" href="tabulator.css">
<🎜>

mari kita gunakan beberapa javascript untuk menukar elemen itu ke tabulator:

<div> itu sahaja, jadual berfungsi sepenuhnya! <pre class='brush:php;toolbar:false;'>&lt;div id=&quot;example-table&quot;&gt;&lt;/div&gt;</pre> <p> Baiklah, kami belum selesai sepenuhnya. Untuk melengkapkan jadual kami, kami perlu menentukan lajur dan memuatkan beberapa data. </p> <pre class='brush:php;toolbar:false;'>$(&quot;#example-table&quot;).tabulator();</pre> <p> lajur definisi </p> <p></p> <p> Untuk menentukan susun atur jadual, kita perlu memberikan beberapa maklumat mengenai setiap lajurnya. </p> <p> Kami melakukan ini dengan meluluskan pelbagai definisi lajur kepada pembina tabulator. Setiap objek dalam array mewakili lajur jadual dan mengandungi parameter tetapannya: </p> <pre class='brush:php;toolbar:false;'>&lt;link rel=&quot;stylesheet&quot; href=&quot;tabulator.css&quot;&gt; &lt;🎜&gt;</pre> <p> Terdapat banyak parameter lajur yang tersedia, dan dalam demonstrasi ini kita akan meliputi beberapa dari mereka: </p> <ul> <li> <code>title - diperlukan - tajuk yang akan dipaparkan dalam tajuk lajur

field - diperlukan - kunci lajur dalam array data

align - penjajaran teks lajur (kiri | pusat | kanan)

width - Lebar lajur (jika tidak ditetapkan, sistem akan menentukan saiz optimum)

sortable - Tukar sama ada pengguna boleh menyusun data mengikut lajur

sorter - Cara menyusun data dalam lajur (lalai adalah rentetan)

formatter - Cara memformat data dalam lajur (lalai adalah rentetan)

onClick - fungsi panggil balik apabila pengguna mengklik sel dalam lajur

editable - sama ada pengguna dibenarkan untuk mengedit data ini

editor - editor yang digunakan apabila sel dalam lajur boleh diedit

visible - Tunjukkan atau sembunyikan lajur

Muatkan data ke dalam jadual

Tahap akhir membina tabulator baru adalah untuk memuat beberapa data. Terdapat beberapa pilihan untuk ini, dan kami akan menutupi setiap satu di sini.

Array JavaScript

anda boleh menggunakan kaedah setData untuk lulus dalam array data. Ini memerlukan array, dan setiap baris jadual ditakrifkan oleh objek.

mari buat beberapa data sampel:

<div id="example-table"></div>

kemudian berikannya ke bentuk kami:

$("#example-table").tabulator();

permintaan AJAX

Untuk mendapatkan data dalam format JSON dari sumber terpencil, anda boleh lulus URL ke kaedah setData, yang akan melaksanakan permintaan AJAX untuk anda.

$("#example-table").tabulator({
  columns:[
    {title:"Name", field:"name", sortable:true, width:200},
    {title:"Progress", field:"progress", sortable:true, sorter:"number"},
    {title:"Gender", field:"gender", sortable:true},
    {title:"Favourite Color", field:"col", sortable:false},
    {title:"Date Of Birth", field:"dob"},
    {title:"Cheese Preference", field:"cheese"},
  ],
});

Parameter permintaan lain boleh diluluskan dalam objek yang mengandungi URL.

var sampleData = [
  {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"", car:1, lucky_no:5, cheese:"Cheader"},
  {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true, lucky_no:10, cheese:"Gouda"},
  {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true", lucky_no:12, cheese:"Manchego"},
  {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980", lucky_no:18, cheese:"Brie"},
  {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999", lucky_no:33, cheese:"Cheader"},
];

bentuk html

Anda juga boleh menukar jadual HTML sedia ada ke Tabulator.

Buat jadual HTML anda:

$("#example-table").tabulator("setData", sampleData);

kemudian panggil pembina tabulator pada elemen jadual untuk mengekstrak tajuk dan data secara automatik:

$("#example-table").tabulator("setData", "http://www.exampleurl.com/data");

Hasil akhir

Anda telah membina meja, menentukan lajur dan memuatkan data, dan sekarang anda mempunyai jadual interaktif yang berfungsi sepenuhnya. Tabulator kerja anda sepatutnya kelihatan seperti ini: (pautan codepen atau gambar sampel harus dimasukkan di sini)

fungsi dalam talian

Tetapi itu bukan semua! Mengapa menyelesaikan jadual berasaskan teks mudah apabila anda boleh berbuat lebih banyak untuk meningkatkan rupa, rasa, dan interaktiviti jadual? Dalam beberapa bahagian yang akan datang, kami akan merangkumi beberapa ciri tambahan yang boleh anda tambahkan untuk meningkatkan tabulator anda.

(Kandungan berikut adalah serupa dengan teks asal, tetapi bahasa perlu diselaraskan dan diselaraskan, elakkan duplikasi dan mengekalkan kelancaran. Pertimbangkan dengan menggunakan perenggan yang lebih mudah dan bahasa yang lebih halus untuk menggambarkan penyortiran, pemformatan, penapisan, dan penyuntingan, dan lain -lain Fungsi, dan tambah beberapa kod sampel dengan sewajarnya

(deskripsi fungsi seperti menyusun, memformat, penapisan, penyuntingan, dan lain -lain perlu diselaraskan dan disusun semula)

Contoh lengkap

Jika kita menggabungkan semua pelajaran yang kita pelajari di atas, kita boleh membuat bentuk yang kaya dan interaktif. (Pautan codepen atau gambar sampel hendaklah dimasukkan di sini)

ujung gunung es

kami telah meliputi cara membuat tabulator asas dan menambah ciri -ciri untuk meningkatkan penampilan dan kebolehgunaannya.

Artikel ini hanya memperkenalkan hujung gunung es ketika membuat dan menyesuaikan jadual. Perpustakaan ini mengandungi banyak ciri yang membantu memberi pengguna pengalaman yang lebih kaya:

Pengumpulan baris
baris mudah alih dan lajur
Pagination
Gaya dan Tema CSS
penampilan progresif dataset besar
susun atur lajur tetap
• (menyimpan keutamaan pengguna dalam kuki)
fungsi panggil balik semasa setiap peringkat rendering jadual dan setiap jenis interaksi pengguna

Saya harap artikel ini menunjukkan kepada anda bagaimana untuk mengambil jadual HTML asas anda ke peringkat seterusnya, menambah interaktiviti dan gaya ke data anda.

Saya mengucapkan selamat menggunakan tabulator!

(bahagian FAQ, yang perlu diselaraskan dan disusun semula)

(bahagian FAQ, yang perlu diselaraskan dan disusun semula) Bahagian ini dapat dikurangkan kepada beberapa soalan teras dan dijawab dalam bahasa ringkas. Sebagai contoh, anda boleh menggabungkan beberapa soalan tentang cara memproses data JSON menggunakan JavaScript dan menukarnya ke dalam jadual HTML dan memberikan jawapan yang umum. Elakkan pengulangan dan pastikan jawapannya tepat dan mudah difahami.