Layui 이벤트 모니터링 소개

1. 양식의 이벤트 모니터링

1.lay-filter 이벤트 필터

는layui의 전용 선택기

2와 동일합니다. 속성 값은

입니다. be: 필수필수항목, 전화번호, 이메일, URL, 번호, 날짜, 신원. 이는 일반적인 판단과 동일합니다. 물론 자신만의 일반적인 규칙을 정의하고 다음과 같은 복잡한 판단을 내릴 수도 있습니다.

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

복잡한 판단을 원하면 어떻게 하나요? 먼저 양식 모듈을 참조해야 합니다

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

확인 규칙 작성이 끝나면lay-verify="account"에 위의 계정과 같이 정의한 이름만 적고 이 규칙을 확인하면 됩니다.

3. Lay-submit 제출을 유발하는 요소를 바인딩합니다.

입력의 제출 버튼 라벨에 이러한 속성을 추가하면 Layui 양식의 검증 효과가 나옵니다.

4.form.on event

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

그 중 event는 radio, checkbox, submit 등의 요소가 될 수 있으며,lay-filter는 우리가 추가한 이벤트 필터 속성 값입니다. 예:

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

맞습니다. -filter =" "내부 값, 이제 해당 이벤트를 실행하려면 이 두 속성만 필요합니다.

2. 폼 이벤트 모니터링

소개를 시작하기 전에 이 그림에서 몇 가지 아이디어를 얻을 수 있습니다.

알았어 문제를 해결해 보자! ! 먼저 테이블 태그를 생성하세요

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

1.헤더 툴바

레이유 헤더 툴바는 테이블과 별개로 붙어있는 형태로, 테이블 위에 상자를 놓는다는 뜻입니다.
첫 번째 단계이므로 먼저 상자를 생성하는데 이건 특수 상자이므로 숨겨야 합니다

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

문제 생각해보기

주의해야 할 속성은 3가지가 있는데, 레이유-숨겨진 속성 숨기기, 레이유- btn-group 그룹 버튼, 레이 이벤트 이벤트 이름.

작업을 식별하는 방법은layui-event가 다른 동작을 수행하도록 다른 값을 설정하는 것입니다.

두 번째 단계에서는 테이블 모듈에 헤더 박스를 소개하고, 이벤트를 들어보겠습니다.

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

이제 테이블 렌더링이 완료되었으니 이벤트를 시작하겠습니다!

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

이제 형식 소개가 거의 끝났으니 위의 입력을 계속하겠습니다

    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. 테이블의 행 도구 모음

사실 테이블에 상자를 붙이는 것도 원리는 비슷하지만. 이는 각 행에 존재합니다. 따라서 cols 속성에 추가한 코드를 작성하세요! !
상자 만들기

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

이벤트 모니터링

이것은 쉽습니다. checkStats를 사용하여 선택한 상태를 더 일찍 얻었습니까? ! !

여기서는 필요 없습니다. 하하, 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;
                }

에서 직접 데이터를 얻을 수 있습니다

rrreee layui에 대한 자세한 내용은 PHP 중국어 웹사이트layui 튜토리얼

column🎜을 참고하세요.

위 내용은 Layui 이벤트 모니터링 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!