Heim > Web-Frontend > Front-End-Fragen und Antworten > So verwenden Sie die Jtable-Methode in JQuery

So verwenden Sie die Jtable-Methode in JQuery

WBOY
Freigeben: 2022-06-24 16:08:38
Original
1843 Leute haben es durchsucht

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 „".

So verwenden Sie die Jtable-Methode in JQuery

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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;,
                    创建:假,
                    编辑:假
                } 
            } 
        });
    }); 
</脚本>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage