Introduction à la surveillance des événements Layui

1. Surveillance des événements de formulaire

1. Le filtre d'événements lay-filter

est équivalent au sélecteur, layui Exclusive. sélecteur

2. Attribut de vérification Lay-verify

la valeur de l'attribut peut être : obligatoire, numéro de téléphone, adresse e-mail, URL, numéro, date, carte d'identité. Cela équivaut à un jugement régulier. Bien sûr, vous pouvez également définir vos propres règles régulières et porter des jugements complexes, tels que :

    <input type="text" lay-verify="required">
    //这里写required就是必填项的意思，相反phone就是手机号，
    如果是多个判断可以这样：ay-verify="required|phone",手机号必填。

Et si je veux porter un jugement compliqué ? Nous devons d'abord référencer le module de formulaire

    layui.use('form',function()
    {
        var form = layui.form;
        //自定义一个验证器
        form.verify({
            account:[
            '正则'
            ,'提示语句'
            ]
            ，pass:[
            '正则'
            ,'提示语句'
            ]
            
        });
        
    })

Lorsque nous avons fini d'écrire les règles de vérification, il nous suffit d'écrire le nom que nous avons défini, comme le compte ci-dessus, dans lay-verify="account", puis pour Cette vérification des règles est terminée.

3. Lay-submit lie l'élément qui déclenche la soumission

Dans l'étiquette du bouton de soumission de l'entrée, ajoutez un tel attribut, puis l'effet de vérification du formulaire layui apparaîtra.

4. événement form.on

form.on('event(lay-filter)',function(){
    
})

Parmi eux, l'événement peut être une radio, une case à cocher, une soumission et d'autres éléments, et le lay-filter est la valeur d'attribut de filtre d'événement que nous avons ajoutée, telle que :

<input type="submit" lay-filter="go" lay-submit value="提交"/>

Oui, c'est la valeur dans ce lay-filter=" ". Nous n'avons plus besoin que de ces deux attributs pour exécuter nos événements correspondants.

2. Surveillance des événements de formulaire

Avant de commencer l'introduction, nous pouvons tirer quelques idées de cette image.

D'accord, d'accord, résolvons le problème ! ! Créez d'abord une balise de tableau

<table id="demo" lay-filter="table"></table>

1. Barre d'outils d'en-tête

Cette barre d'outils d'en-tête layui est indépendante du tableau et y est attachée, ce qui signifie placer une boîte au-dessus du tableau, c'est donc facile à comprendre!
La première étape, donc nous construisons d'abord une boîte, mais c'est une boîte spéciale, nous devons la cacher

<div class="layui-hide layui-btn-group" id="toolbar">
    <button class="layui-btn " lay-event="getall">查看所选数据</button>
    <button class="layui-btn " lay-event="getnum">查看所选数量</button>
    <button class="layui-btn  layui-btn-danger" lay-event="delall">批量删除</button>
</div>

Réfléchir au problème

Il y a trois attributs qui doivent faites attention, layui -hide les attributs cachés, le bouton de groupe layui-btn-group, le nom de l'événement lay-event.

Comment identifier nos opérations consiste à définir différentes valeurs​​pour que layui-event effectue différents comportements.

Dans la deuxième étape, nous introduisons notre boîte d'en-tête dans le module table, puis écoutons l'événement. Jetons un coup d'œil à notre code !

    layui.use('table',function(){
       var table = layui.table;
       table.render({
           elem:'#demo'//表格ID
           ,url:'数据接口'
           ,toolbar:'#toolbar'//开启头部栏，写入我们的盒子id
           ,cols[[…………]]
       });
    });

À ce stade, le rendu de notre table est terminé, commençons l'événement !

    table.on('event(lay-filter)',function(obj){ 
    //这是格式，event有toolbar头部栏事件，tool行标签事件，edit编辑事件，等等，
    括号里的当然就是我们给表格设置的lay-filter属性啦！
    obj是这个表格里所有的数据，我们可以console.log(obj)来查看有哪些数据！！
    })

D'accord, le format est presque terminé, commençons à taper ci-dessus

    table.on('toolbar(table)',function(obj){//我给表格设置的lay-filter叫table
        var checkStatus = table.checkStatus('demo')//表格id，获取选中行
        //嘿嘿，到了这，我好像说复选框怎么打了，很简单的，{type:'checkbox',fixed:'left'},写到cols里
        switch(obj.event)//对lay-event的值，进行不同的判断
        {
            case 'getall':
                 layer.msg(JSON.stringify(checkStatus.data));
                break;
            case 'getnum':
                layer.msg(JSON.stringify(checkStatus.data.length));
                break;
            case 'delall':
            //这是我自己打的一个批删，道理都差不多，遍历拿到id传到后台处理！
                var a = [];
                        for (var i = 0; i < checkStatus.data.length; i++) {
                            a.push(checkStatus.data[i].ProductID)
                        }
                        console.log(checkStatus)
                        let strid = a.toString();
                        let num = checkStatus.data.length;
                        if (num != 0) {
                            $.ajax({
                                url: &#39;/JD/ShopDelAll?strid=&#39; + strid
                                , type: &#39;Delete&#39;
                                , success: function (d) {
                                    layer.msg("删除了" + num + "条数据");
                                    location.href = &#39;/JD/ShopList&#39;;
                                }
                            })
                        }
                        else {
                            layer.msg("至少选择一个！")
                        }
                        break;
                break;
            
        }
        
    });

2. Barre d'outils des lignes du tableau

En fait, les principes sont similaires, et elle attache également un box Dans le tableau, il existe dans chaque ligne, alors écrivez simplement le code que nous avons ajouté dans l'attribut cols ! !
Créer une boîte

<div class="layui-hide layui-btn-group" id="tool">
    <a class="layui-btn layui-btn-warm" lay-event="particulars">查看</a>
    <a class="layui-btn layui-btn-normal" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger" lay-event="delid">删除</a>
</div>

Surveillance des événements

C'est facile Avez-vous utilisé checkStats pour obtenir le statut sélectionné plus tôt Oui ? ! !

Nous n'en avons pas besoin ici, haha, vous pouvez obtenir les données directement depuis obj.data

table.on('tool(table2)', function (obj) {
                switch (obj.event) {
                    case 'particulars':
                        location.href = "/JD/Particulars?productID=" + obj.data.ProductID;
                        break;//获取id跳转到详情页
                    case 'delid':
                        $.ajax({
                            url: '/JD/ShopDelAll?strid=' +  obj.data.ProductID
                            , type: 'Delete'
                            , success: function (d) {
                                obj.del();
                                layer.msg("删除成功");
                            }
                        })
                        break;//这是我的一个ajax删除方法了，记得删除后要有obj.del()哦，否则数据是不会更新的！
                    case 'edit':
                        layer.msg("功能暂未开放，你没有权限");
                        //嘿嘿，修改和删除差不多啦
                        break;
                }

Pour plus de connaissances sur layui, veuillez faire attention au Site Web PHP chinoistutoriel layuiColonne

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!