Die M?glichkeit zum Hinzufügen einer benutzerdefinierten Schaltfl?che in einer Layui -Tabelle besteht darin, die Vorlagen -ID über die Symbolleiste -Eigenschaft anzugeben und über das Verhalten des Ereignisses zu verhalten. Zu den spezifischen Schritten geh?ren: 1. Verwenden Sie das Symbolleistenattribut, um die Vorlagen -ID in der Tabellenkonfiguration anzugeben. 2. Schreiben Sie den Vorlageninhalt und definieren Sie die Schaltfl?chen und ihre Ereignisse. 3.. Verwenden Sie den Ereignish?rmechanismus, um das Schaltfl?chenklick -Verhalten zu behandeln. Der Vorteil dieser Methode ist ihre hohe Flexibilit?t, aber es ist zu beachten, dass zu viele Schaltfl?chen die Leistung beeinflussen k?nnen.

Einführung

In der modernen Webentwicklung sind Tabellen eine übliche UI -Komponente, die leistungsstark und flexibel ist. Insbesondere bei der Verwendung von Front-End-Frameworks wie Layui ist die F?higkeit, Tabellen anzupassen, zu einem Diskussionsthema unter Entwicklern geworden. Heute werden wir untersuchen, wie Sie der Layui -Tabelle benutzerdefinierte Schaltfl?chenspalten hinzufügen, um allen Daten flexibler im Projekt zu manipulieren.

In diesem Artikel erfahren Sie, wie Sie Ihrer Layui -Tabelle Schaltfl?chenspalten hinzufügen und Einblick in die Vor- und Nachteile dieses Ansatzes und die Herausforderungen erhalten, denen Sie begegnen k?nnen.

überprüfung des Grundwissens

Layui ist ein leichtes Front-End-UI-Framework, das reichhaltige Komponenten bietet, in denen h?ufig Tabellen verwendet werden und leistungsstarke Komponenten. Layui -Tabellen unterstützen eine Vielzahl von Datenmanipulations- und Pr?sentationsmethoden, w?hrend die Hinzufügung benutzerdefinierter Spalten die Funktionalit?t der Tabelle auf ein h?heres Niveau bringt.

Stellen Sie vor Beginn sicher, dass Sie mit der grundlegenden Verwendung von Layui vertraut sind, einschlie?lich der Initialisierung von Tabellen und grundlegenden Konfigurationselementen.

Kernkonzept oder Funktionsanalyse

Definition und Funktion der benutzerdefinierten Schaltfl?chenspalten

In der Tabelle Layui -Tabelle k?nnen wir eine Spalte für benutzerdefinierte Schaltfl?chen in jeder Zeile der Tabelle einbetten, z. B. Bearbeiten, L?schen, Anzeigen von Details usw. Diese Schaltfl?chen k?nnen spezifische Aktionen ausl?sen, um die Benutzerinteraktion mit Daten zu verbessern.

Beispiel:

 <table id = "Demo" lay-filter = "test"> </table>

<Script>
    layui.use (&#39;table&#39;, function () {
        var table = layui.table;

        table.render ({{{
            Elem: &#39;#demo&#39;
            , URL: &#39;/data.json&#39; &#39;
            , cols: [[
                {Feld: &#39;ID&#39;, Titel: &#39;ID&#39;, Breite: 80, sort: true}
                , {Field: &#39;Benutzername&#39;, Titel: &#39;Benutzername&#39;, Breite: 120}
                , {Field: &#39;Experience&#39;, Titel: &#39;Punkte&#39;, Breite: 120, sort: true}
                , {field: &#39;sign&#39;, title: &#39;sign&#39;}
                , {Titel: &#39;Operation&#39;, Symbollbar: &#39;#Bardemo&#39;, Breite: 150}
            ]]]
            , Seite: Richtig
        });

        // Symbolleisteereignis Tabelle.on (&#39;Tool (Test)&#39;, Funktion (OBJ) {
            var data = obj.data;
            if (obj.event === &#39;del&#39;) {
                Layer.Confirm (&#39;L?scht es wirklich die Zeile&#39;, Funktion (index) {
                    obj.del ();
                    Layer.close (Index);
                });
            } else if (obj.event === &#39;bearbeiten&#39;) {
                Layer.prompt ({{
                    FormType: 2
                    , Wert: Data.Email
                }, Funktion (Wert, Index) {
                    obj.update ({{{
                        E -Mail: Wert
                    });
                    Layer.close (Index);
                });
            }
        });
    });
</script>

<!-Symbolleiste Vorlage->
<script type = "text/html" id = "bardemo">
    <a class = "layui-btn layui-btn-xs" lay-event = "bearbeiten"> bearbeiten </a>
    <a class = "layui-btn layui-btn-danger layui-btn-xs" lay-event = "del"> delete </a>
</script>

In diesem Beispiel geben wir eine Vorlagen -ID #barDemo über toolbar Symbolleisteeigenschaft an und wenden diese Vorlage auf操作Aktionsspalte an, wenn die Tabelle gerendert wird. Auf diese Weise haben wir der Tabelle erfolgreich eine benutzerdefinierte Tastespalte hinzugefügt.

Wie es funktioniert

Die benutzerdefinierten Schaltfl?chenspalten von Layui -Tabellen werden über die Template -Engine implementiert. Beim Rendern einer Tabelle wird der entsprechende HTML -Inhalt in der Zelle der Tabelle anhand der von toolbar Symbolleisteneigenschaft angegebenen Vorlagen -ID analysiert und gerendert. Wenn der Benutzer auf diese Schaltfl?chen klickt, l?st Layui den entsprechenden Betrieb über den Ereignish?rmechanismus aus.

Der Vorteil dieses Ansatzes ist Flexibilit?t und Skalierbarkeit. Es ist jedoch zu beachten, dass zu viele benutzerdefinierte Schaltfl?chen die Ladegeschwindigkeit und die Benutzererfahrung der Tabelle beeinflussen k?nnen.

Beispiel für die Nutzung

Grundnutzung

Im obigen Beispiel haben wir gezeigt, wie Sie Schaltfl?chen bearbeiten und l?schen k?nnen. Die grundlegende Nutzung besteht darin, toolbar Symbolleistenattribut in der Tabellenkonfiguration anzugeben und das Schaltfl?che Klicken zu verhalten.

Erweiterte Verwendung

Wenn Sie der Schaltfl?chenspalte weitere Funktionen hinzufügen m?chten, z. B. Details, Stapelvorg?nge usw., k?nnen Sie dies erreichen, indem Sie den Vorlageninhalt und die Ereignisverarbeitungslogik erweitern.

Beispiel:

 <!-Erweiterte Symbolleiste-Vorlage->
<script type = "text/html" id = "bardemoadvanced">
    <a class = "layui-btn layui-btn-XS" Lay-Event = "Detail"> Ansicht </a>
    <a class = "layui-btn layui-btn-xs" lay-event = "bearbeiten"> bearbeiten </a>
    <a class = "layui-btn layui-btn-danger layui-btn-xs" lay-event = "del"> delete </a>
    <a class = "layui-btn layui-btn-XS" Lay-Event = "Batch"> Batch-Operation </a>
</script>

<Script>
    layui.use (&#39;table&#39;, function () {
        var table = layui.table;

        table.render ({{{
            Elem: &#39;#demo&#39;
            , URL: &#39;/data.json&#39; &#39;
            , cols: [[
                {Feld: &#39;ID&#39;, Titel: &#39;ID&#39;, Breite: 80, sort: true}
                , {Field: &#39;Benutzername&#39;, Titel: &#39;Benutzername&#39;, Breite: 120}
                , {Field: &#39;Experience&#39;, Titel: &#39;Punkte&#39;, Breite: 120, sort: true}
                , {field: &#39;sign&#39;, title: &#39;sign&#39;}
                , {Titel: &#39;Operation&#39;, Symbollbar: &#39;#Bardemoadvanced&#39;, Breite: 250}
            ]]]
            , Seite: Richtig
        });

        // Symbolleisteereignis Tabelle.on (&#39;Tool (Test)&#39;, Funktion (OBJ) {
            var data = obj.data;
            if (obj.event === &#39;detail&#39;) {
                // Zeigen Sie die logische Layer.open an ({{{
                    Typ: 1,
                    Titel: &#39;Benutzerdetails&#39;,
                    Inhalt: &#39;<Div> Benutzername:&#39; Data.username &#39;</div> <div> Punkte:&#39; Data.Experience &#39;</div>&#39; &#39;
                });
            } else if (obj.event === &#39;bearbeiten&#39;) {
                // Logic Layer.prompt ({{{
                    FormType: 2
                    , Wert: Data.Email
                }, Funktion (Wert, Index) {
                    obj.update ({{{
                        E -Mail: Wert
                    });
                    Layer.close (Index);
                });
            } else if (obj.event === &#39;del&#39;) {
                // L?schen Sie die logische Ebene.Confirm (&#39;L?scht es wirklich die Zeile&#39;, Funktion (index) {
                    obj.del ();
                    Layer.close (Index);
                });
            } else if (obj.event === &#39;batch&#39;) {
                // Batch Operation Logic Layer.open ({{
                    Typ: 1,
                    Titel: &#39;Batch Operation&#39;,
                    Inhalt: &#39;<Div> W?hlen Sie den Stapelvorgang aus </div>&#39;
                });
            }
        });
    });
</script>

In dieser erweiterten Verwendung haben wir Schaltfl?chen hinzugefügt, um Details und Stapelvorg?nge anzuzeigen und diese neuen Funktionen über das H?ren von Event zu verarbeiten.

H?ufige Fehler und Debugging -Tipps

• Button-Ereignis nicht abgefeuert : Stellen Sie sicher, dass Ihre lay-filter -Eigenschaft mit lay-filter übereinstimmt, der angeh?rt wird. Andernfalls wird das Ereignis nicht korrekt ausgel?st.
• Vorlage Parsing -Fehler : überprüfen Sie, ob Ihre Vorlagen -ID korrekt ist und ob der Vorlageninhalt den Anforderungen von Layui erfüllt.
• Leistungsprobleme : Wenn die Tabellendaten gro? sind, k?nnen zu viele benutzerdefinierte Schaltfl?chen langsam geladen werden. Erw?gen Sie das Laden von Bedarf oder Paging.

Leistungsoptimierung und Best Practices

In praktischen Anwendungen ist es sehr wichtig, die Leistung von Layui -Tabellen zu optimieren und Best Practices zu befolgen. Hier sind einige Vorschl?ge:

• Ladeanfrage : Bei gro?en Datenvolumina sollten Sie die Paging -Funktion von Layui verwenden, um zu vermeiden, dass alle Daten gleichzeitig geladen werden.
• Vereinfachen Sie Vorlagen : Versuchen Sie, den Inhalt der Vorlagen zu vereinfachen, unn?tige DOM -Vorg?nge zu reduzieren und die Rendergeschwindigkeit zu verbessern.
• Event -H?roptimierung : Für komplexe Tischvorg?nge k?nnen Sie in Betracht ziehen, Ereignisdelegierte zu verwenden, um die Anzahl der Ereignish?rer zu reduzieren.

Beispiel:

 <table id = "Demo" lay-filter = "test"> </table>

<Script>
    layui.use (&#39;table&#39;, function () {
        var table = layui.table;

        table.render ({{{
            Elem: &#39;#demo&#39;
            , URL: &#39;/data.json&#39; &#39;
            , cols: [[
                {Feld: &#39;ID&#39;, Titel: &#39;ID&#39;, Breite: 80, sort: true}
                , {Field: &#39;Benutzername&#39;, Titel: &#39;Benutzername&#39;, Breite: 120}
                , {Field: &#39;Experience&#39;, Titel: &#39;Punkte&#39;, Breite: 120, sort: true}
                , {field: &#39;sign&#39;, title: &#39;sign&#39;}
                , {Titel: &#39;Operation&#39;, Symbollbar: &#39;#Bardemo&#39;, Breite: 150}
            ]]]
            , Seite: Richtig
            , Grenze: 10 // 10 Datenstücke werden auf jeder Seite angezeigt, Grenzen: [10, 20, 30] // Optionale Anzeigezahl der Teile pro Seite});

        // Symbolleisteereignis Tabelle.on (&#39;Tool (Test)&#39;, Funktion (OBJ) {
            var data = obj.data;
            if (obj.event === &#39;del&#39;) {
                Layer.Confirm (&#39;L?scht es wirklich die Zeile&#39;, Funktion (index) {
                    obj.del ();
                    Layer.close (Index);
                });
            } else if (obj.event === &#39;bearbeiten&#39;) {
                Layer.prompt ({{
                    FormType: 2
                    , Wert: Data.Email
                }, Funktion (Wert, Index) {
                    obj.update ({{{
                        E -Mail: Wert
                    });
                    Layer.close (Index);
                });
            }
        });
    });
</script>

<!-vereinfachte Symbolleistenvorlage->
<script type = "text/html" id = "bardemo">
    <a class = "layui-btn layui-btn-xs" lay-event = "bearbeiten"> bearbeiten </a>
    <a class = "layui-btn layui-btn-danger layui-btn-xs" lay-event = "del"> delete </a>
</script>

Mit diesen Optimierungen und Best Practices k?nnen Sie in Ihren Layui -Tabellen flexibel benutzerdefinierte Schaltfl?chenspalten hinzufügen und gleichzeitig eine gute Leistung und Benutzererfahrung beibehalten.

In den tats?chlichen Projekten habe ich einmal einen interessanten Fall gesto?en: Im Backend Management-System einer gro?en E-Commerce-Plattform müssen wir der Produktliste mehrere Betriebsschaltfl?chen hinzufügen, einschlie?lich Auflistung, Entfernen, Bearbeiten, L?schen usw. Aufgrund der gro?en Menge an Daten haben wir die Paginierungslade und das Rendering des Systems übernommen. Dieser Fall hat mich zutiefst erkennen, dass die Leistungsoptimierung und die Benutzererfahrung w?hrend des Entwicklungsprozesses gleicherma?en wichtig sind.

Ich hoffe, dieser Artikel hilft Ihnen, in Layui -Tabellen flexibel benutzerdefinierte Schaltfl?chen hinzuzufügen und sich in den tats?chlichen Projekten wohl zu fühlen.

Das obige ist der detaillierte Inhalt vonSo fügen Sie in der Layui -Tabelle benutzerdefinierte Schaltfl?chenspalten hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!