So verwenden Sie die Jtable-Methode in JQuery

In jquery wird die jtable-Methode zum Erstellen einer CRUD-Tabelle auf Basis von Ajax verwendet. Es handelt sich um ein Tabellenerweiterungs-Plug-in und erfordert keine HTML- und JavaScript-Codierung. Die Syntax lautet „".

Die Betriebsumgebung dieses Tutorials: Windows 10-System, JQuery-Version 3.6.0, Dell G3-Computer.

So verwenden Sie die jtable-Methode in jquery

jTable ist ein jQuery-Plug-in, das zum Erstellen von Ajax-basierten CRUD-Tabellen ohne HTML- und JavaScript-Codierung verwendet wird.

Nach dem Herunterladen hinzugefügt:

Fügen Sie diese Zeilen zum HEAD-Bereich Ihres HTML-Dokuments hinzu:

<!-- 包括其中一种 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>

Sie können im Themenordner ein beliebiges Design und einen beliebigen Farbmodus auswählen.

Hinweis: Sie müssen außerdem die erforderlichen jQuery- und jQueryUI-JavaScript- und CSS-Dateien hinzufügen, bevor Sie die jTable-Datei importieren.

Erstellen eines Containers

jTable erfordert nur ein Containerelement für die Tabelle.

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

Erstellen Sie eine jTable-Instanz

Fügen Sie diesen JavaScript-Code zu Ihrer Seite hinzu:

<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;，
                    创建：假，
                    编辑：假
                } 
            } 
        }）；
    }); 
</脚本>

Video-Tutorial-Empfehlung: jQuery-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Jtable-Methode in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!