Introduction à l'utilisation des éléments de formulaire Form tels que Select

Concernant les éléments de formulaire tels que Select, certaines fonctionnalités deviendront invalides lorsqu'elles seront utilisées

Par exemple, la fonction Rechercher fournie avec select :

En fait, lorsque vous utilisez l'élément de formulaire Form, si vous avez besoin de certaines des fonctions fournies avec layui (recherche, vérification, etc.), veuillez le joindre avec le < ;Form> et doivent être initialisés comme objet de formulaire pour que le rendu puisse prendre effet. De même, l'onglet doit initialiser l'objet élément

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

À propos de l'événement de soumission automatique du bouton d'annulation

Layui soumettra automatiquement le formulaire lors de l'utilisation du bouton, non peu importe. Le type de bouton n'est pas soumis.

Solution :

1. Tant que vous le placez dans la balise

, il sera automatiquement soumis. Pour un usage général, veuillez le placer en dehors du formulaire.

2. La valeur de retour de l'événement de clic sur le bouton doit renvoyer false et la soumission du formulaire peut également être organisée.

Notez qu'il y a un petit détail ici, à savoir les éléments du formulaire entourés par le formulaire Form. Vous pouvez utiliser la méthode Seriliaze de Jquery pour encapsuler rapidement le jeu de résultats du formulaire : (j'encapsule un objet JSON)

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

Ou générez une chaîne avec key=value&key1=value2 (en utilisant Serialize())

Mais si vous obtenez l'option de sélection du formulaire de layui ici, cela masquera votre sélection d'origine et la restituera .Une sélection Pour le moment, vous ne pouvez pas obtenir la valeur de la sélection via la méthode ci-dessus. Vous pouvez toujours utiliser $().value L'option par défaut doit être affectée à value='', sinon lorsque la valeur est. rendu, la valeur text() sera copiée par défaut.

La valeur par défaut de laydate est initialisée :

Veuillez activer isInitValue, personnellement Je pense que le document écrit que ce n'est pas exact et que cela ressemble à une configuration inutile. Quoi qu'il en soit, isInitValue doit être explicitement signalé avant que la valeur par défaut puisse être initialisée.

À propos des paramètres de chargement asynchrone de la table de données DataTable :

Concernant la requête, lors d'une requête layui, les paramètres incluent pageIndex et pageSize par défaut. Vous pouvez transmettre le paramètre de requête. Allez configurer vos propres noms pageIndex et pageSize. Les paramètres de requête supplémentaires doivent être encapsulés dans où, et enfin layui les assemblera et les enverra en arrière-plan.

Concernant la configuration des paramètres de réponse, quatre éléments doivent être soulignés lors du tracé des lignes. Vous pouvez transférer d'autres paramètres avec désinvolture en arrière-plan et les récupérer une fois terminé.

À propos de la liaison province-ville (rendu local au niveau du contrôle)

Parce que layui n'a pas le concept de liaison bidirectionnelle, ce qui est fait ici ne peut que être répété à chaque fois Récupérez les données, puis restituez et actualisez le contrôle. Par conséquent, ce qui est généralement adopté est : événement d'écoute de formulaire + rendu partiel du formulaire

Ici, si vous avez plus de choix et que la quantité de données dans la liste déroulante est relativement importante, vous pouvez utiliser un div ( la classe doit contenir les attributs layui-form et lay-filter) entourez la sélection, puis exécutez form.select('select', le div contenant la valeur de l'attribut select: filter), afin que vous n'ayez pas besoin d'actualiser tout le formulaire sélectionne, mais restitue une certaine sélection, mais la surveillance des événements peut aller au niveau de contrôle (c'est-à-dire que le filtre lay est marqué sur le contrôle).

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

rrree

Mise en œuvre de colonnes auto-croissantes de liste de données (deux types)

1 Utilisez le

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

du moteur de modèle. in col type:numbers (notez que ce paramètre est nouveau dans layui2.2.0)

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

Je recommande la deuxième méthode. La deuxième méthode consiste à trier avec pagination. La deuxième page est un index qui augmente par rapport à la page précédente. , et Le numéro de série ne changera pas lors du tri. Dans le premier type, lors du tri, le numéro de série passera de 10-1

Enfin, il est légèrement plus facile de voyez comment le personnel back-end écrit le code front-end. Quelques suggestions pour les pages (la plupart sont des formulaires)

Mes suggestions sont :

1. la mise en page en premier, et utilisez essentiellement des frameworks faciles à utiliser. Tous ont des mises en page.

2. Modifiez le style de l'élément via Chrome, puis copiez vous-même le style modifié, puis encapsulez-le dans un CSS

3. Lorsque vous utilisez des composants, examinez attentivement la structure et ne le faites pas. t La destruction de la structure originale peut facilement conduire à un échec.

4. Ne copiez pas complètement la démo, car les démos ont toujours un grand impact, c'est-à-dire que les éléments sont imbriqués avant, alors assurez-vous de lire clairement les règles. Pour notre équipe backend, connaître ces quelques points est presque suffisant, et nous pouvons déjà gérer la plupart des applications.

Pour plus de connaissances sur Layui, veuillez faire attention à la colonne Tutoriel d'utilisation de Layui.

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!