Bagaimana untuk menggunakan kaedah jtable dalam jquery

Dalam jquery, kaedah jtable digunakan untuk mencipta jadual CRUD berasaskan Ajax Ia adalah pemalam sambungan jadual dan tidak memerlukan pengekodan HTML dan JavaScript .jtable.min .js laluan "type="text/javascript">2cacc6d41bbb37262a98f745aa00fbf0".

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi jquery 3.6.0, komputer Dell G3.

Cara menggunakan kaedah jtable dalam jquery

jTable ialah pemalam jQuery yang digunakan untuk mencipta jadual CRUD berasaskan Ajax tanpa pengekodan HTML dan JavaScript.

Tambah selepas memuat turun:

Tambahkan baris ini pada bahagian HEAD dokumen HTML anda:

<!-- 包括其中一种 jTable 样式。-->
<link href="/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
<!-- 包含jTable脚本文件。-->
<script src="/jtable/jquery.jtable.min.js" type="text/javascript"></script>

Anda boleh memilih mana-mana mod tema dan warna dalam folder tema.

Nota: Anda juga mesti menambah fail jQuery dan jQueryUI JavaScript dan CSS yang diperlukan sebelum mengimport fail jTable.

Mencipta Bekas

jJadual hanya memerlukan elemen bekas untuk jadual.

<div id="PersonTableContainer"></div>

Buat contoh jTable

Tambahkan kod JavaScript ini pada halaman anda:

<script type="text/javascript"> 
    $(document).ready(function () { 
        $(&#39;#PersonTableContainer&#39;).jtable({ 
            title: &#39;人员表&#39;, 
            actions: { 
                listAction: &#39;/GettingStarted/PersonList &#39;，
                createAction：&#39;/GettingStarted/CreatePerson&#39;，
                updateAction：&#39;/GettingStarted/UpdatePerson&#39;，
                deleteAction：&#39;/GettingStarted/DeletePerson&#39; 
            }，
            字段：{ 
                PersonId：{
                    键：true，
                    列表：false 
                }，
                名称：{
                    标题：&#39;作者姓名&#39;，
                    宽度：&#39;40%&#39; 
                }，
                年龄：{
                    标题：&#39;年龄&#39;，
                    宽度：&#39;20%&#39; 
                }，记录日期
                ：{
                    标题：&#39;记录日期&#39;，
                    宽度：&#39;30%&#39;，
                    类型：&#39;日期&#39;，
                    创建：假，
                    编辑：假
                } 
            } 
        }）；
    }); 
</脚本>

Cadangan tutorial video: Tutorial video jQuery

Atas ialah kandungan terperinci Bagaimana untuk menggunakan kaedah jtable dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!