So implementieren Sie Infinity Selector basierend auf Laui (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Implementierung des Infinity Selector (mit Code) auf Basis von Laui. Ich hoffe, dass er für Sie hilfreich ist.

HTML-Element

<div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
        <input type="text" id="a" class="layui-input" readonly="readonly">
    </div>
</div>

js-Referenz

layui.use(['form',"jquery","cascader"], function(){
    var $ = layui.jquery;
    var cascader = layui.cascader;
    
    var data = [
        {
            value: 'A',
            label: 'a',
            children: [
                {
                    value: 'AA1',
                    label: 'aa1',
                },
                {
                    value: 'BB1',
                    label: 'bb1'
                }
            ]
        },
        {
            value: 'B',
            label: 'b',
        }
    ]
    cascader({
        elem: "#a",
        data: data,
        // url: "/aa",
        // type: "post",
        // triggerType: "change",
        // showLastLevels: true,
        // where: {
        //     a: "aaa"
        // },
        value: ["A", "AA1"],
        success: function (data) {
            console.log(data);
        }
    });
});

Cascader-Parameterbeschreibung

1. elem: Eingabecontainer
2. Typ ist Array,
3. URL: asynchron erhaltene Daten, Typ ist Array, (wählen Sie einen der beiden Parameter Daten und URL)
4. Typ: asynchrone Erfassungsmethode, Standardabruf, kann weggelassen werden
5. wobei: asynchron in Parametern übergeben, kann weggelassen werden
6. TriggerType: Trigger-Methode, leer lassen oder alle anderen klicken, optionaler Parameter „Änderung“, der ausgelöst wird, wenn sich die Maus in
7 bewegt. showLastLevels: Ob im Eingabefeld nur die letzte Ebene angezeigt wird, der Standardwert ist false, d 9. Erfolg: Callback-Funktion, wählen Sie aus. Die Callback-Funktion gibt nach Abschluss das Wertearray

Online-Demo

Github-Quellcode
Verwandte Empfehlungen:

Detaillierte Analyse der Projektoptimierung und nicht-invasiven Optimierung von Laui

Konfliktlösung zwischen dynamischer Darstellung der Laui-Form und Vue .js (Code beigefügt)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Infinity Selector basierend auf Laui (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!