Einführung in die Verwendung von Form-Formularelementen wie Select

Bei Formularelementen wie „Auswählen“ werden einige Funktionen ungültig, wenn sie verwendet werden

Zum Beispiel die Suchfunktion, die mit „Auswählen“ geliefert wird:

Wenn Sie bei der Verwendung des Form-Formularelements einige der mit Lauii gelieferten Funktionen (Suche, Überprüfung usw.) benötigen, schließen Sie es bitte mit < ein ;Form>-Tag und müssen initialisiert werden, damit das Rendern wirksam werden kann. Ebenso muss die Registerkarte das Elementobjekt initialisieren

//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.config({
    base: '/Resources/Script/'
})
.use(['element', 'common', 'form'], function () {
    var element = layui.element;//tab选项卡类的功能才能实现
    var form = layui.form;//部分表单元素功能才能实现
});

Über das automatische Übermittlungsereignis der Schaltfläche „Abbrechen“

Layui sendet das Formular automatisch, wenn die Schaltfläche verwendet wird, nein Egal, ob der Buttontyp „Senden“ ist.

Lösung:

1. Solange Sie es in das

-Tag einfügen, wird es zur allgemeinen Verwendung bitte außerhalb des Formulars übermittelt.

2. Der Rückgabewert des Schaltflächenklickereignisses muss false zurückgeben, und die Formularübermittlung kann ebenfalls organisiert werden.

Beachten Sie, dass es hier ein kleines Detail gibt, nämlich die vom Formular eingeschlossenen Formularelemente. Sie können die Seriliaze-Methode von Jquery verwenden, um die Formularergebnismenge schnell zu kapseln: (Ich kapsele ein JSON-Objekt)

var formData = $("#infoForm").serializeArray();
           var data = {};
           $.each(formData, function (index, item) {
               data[item.name] = item.value;
           });

Oder generieren Sie eine Zeichenfolge mit key=value&key1=value2 (mithilfe von Serialize())

Aber wenn Sie hier die Auswahloption von Lauis Formular erhalten, wird Ihre ursprüngliche Auswahl ausgeblendet und neu gerendert . Eine Auswahl. Zu diesem Zeitpunkt können Sie den Wert der Auswahl nicht über die obige Methode abrufen. Andernfalls muss die Option „value=“ zugewiesen werden Beim Rendern wird der text()-Wert standardmäßig kopiert.

Der Standardwert von „laydate“ wird initialisiert:

Bitte aktivieren Sie isInitValue persönlich Ich denke, das Dokument schreibt: Es ist nicht korrekt und es fühlt sich wie eine nutzlose Konfiguration an. Auf isInitValue muss jedoch explizit hingewiesen werden, bevor der Standardwert initialisiert werden kann.

Über die asynchronen Ladeparameter der DataTable-Datentabelle:

In Bezug auf die Anfrage umfassen die Parameter bei einer Laui-Anfrage standardmäßig pageIndex und pageSize. Sie können den Anforderungsparameter Go übergeben und Ihre eigenen pageIndex- und pageSize-Namen konfigurieren. Zusätzliche Anforderungsparameter müssen in where gekapselt werden, und schließlich fügt Laui sie zusammen und sendet sie an den Hintergrund.

Bezüglich der Parameterkonfiguration der Antwort müssen beim Zeichnen von Linien vier Punkte hervorgehoben werden. Sie können andere Parameter nebenbei im Hintergrund übertragen und erhalten diese, wenn Sie fertig sind.

Über die Provinz- und Stadtverknüpfung (lokale Darstellung auf Kontrollebene)

Da Laui nicht über das Konzept der bidirektionalen Bindung verfügt, kann das, was hier getan wird, nur sein wird jedes Mal wiederholt. Rufen Sie die Daten ab, rendern und aktualisieren Sie dann das Steuerelement. Daher wird im Allgemeinen Folgendes verwendet: Formular-Listening-Ereignis + lokales Rendern des Formulars

Wenn Sie mehr Auswahlmöglichkeiten haben und die Datenmenge im Dropdown-Feld relativ groß ist, können Sie hier ein div ( Die Klasse muss die Attribute „layui-form“ und „lay-filter“ enthalten.) Schließen Sie die Auswahl ein und führen Sie dann form.select('select', das div mit dem Wert des Attributs select: filter) aus, sodass Sie die Auswahl nicht aktualisieren müssen Alle Formen, rendern aber eine bestimmte Auswahl, aber die Ereignisüberwachung kann auf die Steuerungsebene gehen (d. h. der Lay-Filter wird auf der Steuerung markiert).

<div class="layui-form" lay-filter="selLocation">
                            <label class="text_label">出发站:</label>
                            <div class="layui-input-inline">
                                <select id="selLocation" name="selLocation" class="text_input" lay-filter="selLocation" lay-verify="" lay-search></select>
                            </div>
                        </div>

rree

Implementierung von sich selbst erhöhenden Spalten der Datenliste (zwei Typen)

1. Verwenden Sie die

form.on("select(selLine)", function (data) {
                       var template1 = "<option value=&#39;&#39;>全部选项</option>";
                       for (var index in result.Data) {
                           if (result.Data[index].LineId == data.value) {
                               template1 += "<option value=&#39;" + result.Data[index].TimesId + "&#39;>" + result.Data[index].TimesName + "</option>";
                           }
                       }
                       $("#selTimes").html(template1);
                       form.render(&#39;select&#39;,&#39;selLlocation&#39;);
                   })

2 in col type:numbers (beachten Sie, dass dieser Parameter inlayui2.2.0 neu ist)

模板：
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
table的col参数：
cols: [[
            { title: &#39;序号&#39;, templet: &#39;#indexTpl&#39;, width: "6%" }
]]

Die zweite Möglichkeit ist die Sortierung mit Paging. Die zweite Seite ist ein Index, der gegenüber der vorherigen Seite ansteigt , und Die Seriennummer ändert sich während des Sortierens nicht. Beim ersten Typ ändert sich die Seriennummer von 10-1

Schließlich ist es etwas einfacher Sehen Sie, wie die Back-End-Mitarbeiter den Front-End-Code schreiben. Einige Vorschläge für die Seiten (die meisten davon sind Formulare)

Meine Vorschläge sind:

1. Verstehen Sie das Raster Zuerst das Layout verwenden und grundsätzlich einige benutzerfreundliche Frameworks verwenden. Alle verfügen über Layouts.

2. Ändern Sie den Elementstil über Chrome, kapseln Sie ihn dann selbst und kapseln Sie ihn in ein CSS.

3 Schauen Sie sich bei der Verwendung von Komponenten die Struktur genau an. t Die Zerstörung der ursprünglichen Struktur kann leicht zum Scheitern führen.

4. Kopieren Sie die Demo nicht vollständig, da die Demos immer noch eine große Wirkung haben, d. h. die Elemente sind vorher verschachtelt, also lesen Sie die Regeln unbedingt genau durch. Für unsere Backend-Mitarbeiter reicht es fast aus, diese wenigen Punkte zu kennen, und wir können die meisten Anwendungen bereits bewältigen.

Weitere Informationen zu Laui finden Sie in der Spalte Tutorial zur Verwendung von Laui.

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von Form-Formularelementen wie Select. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!