Comment implémenter Infinity Selector basé sur layui (avec code)

Le contenu de cet article explique comment implémenter le sélecteur Infinity (avec code) basé sur layui. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

élément HTML

<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>

référence js

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);
        }
    });
});

description du paramètre cascade

1. elem : conteneur d'entrée
2. Données statiques requises, le type est un tableau,
3. url : données obtenues de manière asynchrone, le type est un tableau, (choisissez l'un des deux paramètres data et url)
4. type : méthode d'acquisition asynchrone, get par défaut, peut être. omis
5. où : passé de manière asynchrone dans les paramètres, peut être omis
6. triggerType : méthode de déclenchement, laissez-le vide ou tous les autres sont cliqués, paramètre facultatif "changer", c'est-à-dire que la souris est déplacée dans le trigger
7. showLastLevels : si la zone de saisie affiche uniquement le dernier niveau, la valeur par défaut est false, c'est-à-dire que tous affichent
8. value : la valeur initiale transmise, le type est un tableau, la valeur est la valeur des données
9. succès : fonction de rappel, sélectionnez la fonction de rappel une fois terminé, la valeur de retour est le tableau de valeurs

Démo en ligne
Code source de github

Recommandations associées :

Analyse détaillée de l'optimisation du projet layui et de l'optimisation non intrusive

Le rendu dynamique du formulaire layui et vue.js Résolution des conflits (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!