layui事件監(jiān)聽(tīng)的介紹和使用-創(chuàng)新互聯(lián)

一、表單的事件監(jiān)聽(tīng)

成都創(chuàng)新互聯(lián)公司是一家業(yè)務(wù)范圍包括IDC托管業(yè)務(wù),虛擬主機(jī)、主機(jī)租用、主機(jī)托管，四川、重慶、廣東電信服務(wù)器租用,西云機(jī)房，成都網(wǎng)通服務(wù)器托管,成都服務(wù)器租用,業(yè)務(wù)范圍遍及中國(guó)大陸、港澳臺(tái)以及歐美等多個(gè)國(guó)家及地區(qū)的互聯(lián)網(wǎng)數(shù)據(jù)服務(wù)公司。

1、lay-filter 事件過(guò)濾器

相當(dāng)于選擇器，layui的專屬選擇器

2、lay-verify 驗(yàn)證屬性

屬性值可以是：required必填項(xiàng)， phone手機(jī)號(hào)，email郵箱，url網(wǎng)址，number數(shù)字，date日期，identity身份證。這個(gè)相當(dāng)于正則判斷，當(dāng)然你也可以定義自己的正則，做一些復(fù)雜的判斷，例如：

    <input type="text" lay-verify="required">
    //這里寫required就是必填項(xiàng)的意思，相反phone就是手機(jī)號(hào)，
    如果是多個(gè)判斷可以這樣：ay-verify="required|phone",手機(jī)號(hào)必填。

如果說(shuō)我要復(fù)雜的判斷怎么弄呢？我們需要先引用form模塊

    layui.use('form',function()
    {
        var form = layui.form;
        //自定義一個(gè)驗(yàn)證器
        form.verify({
            account:[
            '正則'
            ,'提示語(yǔ)句'
            ]
            ，pass:[
            '正則'
            ,'提示語(yǔ)句'
            ]
            
        });
        
    })

當(dāng)我們，寫完驗(yàn)證規(guī)則后，只需要把自己定義的名字，如上面的account寫到lay-verify="account"里面就好了，那么對(duì)這個(gè)規(guī)則驗(yàn)證就弄完了。

3、lay-submit 綁定觸發(fā)提交的元素

在input的submit按鈕標(biāo)簽里，添加這么一個(gè)屬性，那layui表單的驗(yàn)證效果才會(huì)出來(lái)。

4、form.on事件

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

其中，event可以是radio，checkbox，submit等元素，其中的lay-filter就是我們加的事件過(guò)濾器屬性值，比如：

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

對(duì)就是這個(gè)lay-filter=" "里面的值，好了就只需要這倆個(gè)屬性，就可以執(zhí)行我們相應(yīng)的事件了。

二、表單事件監(jiān)聽(tīng)

在開(kāi)始介紹前，我們可以從這張圖中，捋一捋思路。

layui事件監(jiān)聽(tīng)的介紹和使用

好了好了，我們來(lái)解決問(wèn)題??！首先建立一個(gè)table標(biāo)簽

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

1、表頭工具欄

這個(gè)layui的表頭工具欄是獨(dú)立于表格的，是附加上去的，就是把一個(gè)盒子放到表格上面，這樣通俗易懂了吧！
第一步，所以我們先建立一個(gè)盒子，但是這是一個(gè)特殊的盒子，我們需要對(duì)其隱藏

<div class="layui-hide layui-btn-group" id="toolbar">
    <button class="layui-btn " lay-event="getall">查看所選數(shù)據(jù)</button>
    <button class="layui-btn " lay-event="getnum">查看所選數(shù)量</button>
    <button class="layui-btn  layui-btn-danger" lay-event="delall">批量刪除</button>
</div>

思考問(wèn)題

其中有三個(gè)屬性需要注意，layui-hide隱藏屬性，layui-btn-group組按鈕，lay-event事件的名稱。

如何去辨別我們的操作呢，就是對(duì)layui-event設(shè)置的不同的值，來(lái)進(jìn)行不同的行為。

第二步，我們?cè)诒砀衲K里引入我們的頭部盒子，然后監(jiān)聽(tīng)事件，來(lái)看我們的代碼吧！

    layui.use('table',function(){
       var table = layui.table;
       table.render({
           elem:'#demo'//表格ID
           ,url:'數(shù)據(jù)接口'
           ,toolbar:'#toolbar'//開(kāi)啟頭部欄，寫入我們的盒子id
           ,cols[[…………]]
       });
    });

到此為止我們的表格渲染就完畢了，開(kāi)始事件！

    table.on('event(lay-filter)',function(obj){ 
    //這是格式，event有toolbar頭部欄事件，tool行標(biāo)簽事件，edit編輯事件，等等，
    括號(hào)里的當(dāng)然就是我們給表格設(shè)置的lay-filter屬性啦！
    obj是這個(gè)表格里所有的數(shù)據(jù)，我們可以console.log(obj)來(lái)查看有哪些數(shù)據(jù)！！
    })

好了格式差不多介紹完了，開(kāi)始接著上面的打

    table.on('toolbar(table)',function(obj){//我給表格設(shè)置的lay-filter叫table
        var checkStatus = table.checkStatus('demo')//表格id，獲取選中行
        //嘿嘿，到了這，我好像說(shuō)復(fù)選框怎么打了，很簡(jiǎn)單的，{type:'checkbox',fixed:'left'},寫到cols里
        switch(obj.event)//對(duì)lay-event的值，進(jìn)行不同的判斷
        {
            case 'getall':
                 layer.msg(JSON.stringify(checkStatus.data));
                break;
            case 'getnum':
                layer.msg(JSON.stringify(checkStatus.data.length));
                break;
            case 'delall':
            //這是我自己打的一個(gè)批刪，道理都差不多，遍歷拿到id傳到后臺(tái)處理！
                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: '/JD/ShopDelAll?strid=' + strid
                                , type: 'Delete'
                                , success: function (d) {
                                    layer.msg("刪除了" + num + "條數(shù)據(jù)");
                                    location.href = '/JD/ShopList';
                                }
                            })
                        }
                        else {
                            layer.msg("至少選擇一個(gè)！")
                        }
                        break;
                break;
            
        }
        
    });

2、表格的行工具欄

其實(shí)道理都差不多啦，也是把一個(gè)盒子附加到表格里，只不過(guò)是每行都有，所以把我們添加的代碼，寫道cols屬性里就好了?。?br/>創(chuàng)建一個(gè)盒子

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

事件監(jiān)聽(tīng)

這個(gè)就簡(jiǎn)單了哈，咋們前面獲取選中狀態(tài)是不是用了checkStats,對(duì)！??！

我們這里不用了，哈哈，直接obj.data就能獲取數(shù)據(jù)

table.on('tool(table2)', function (obj) {
                switch (obj.event) {
                    case 'particulars':
                        location.href = "/JD/Particulars?productID=" + obj.data.ProductID;
                        break;//獲取id跳轉(zhuǎn)到詳情頁(yè)
                    case 'delid':
                        $.ajax({
                            url: '/JD/ShopDelAll?strid=' +  obj.data.ProductID
                            , type: 'Delete'
                            , success: function (d) {
                                obj.del();
                                layer.msg("刪除成功");
                            }
                        })
                        break;//這是我的一個(gè)ajax刪除方法了，記得刪除后要有obj.del()哦，否則數(shù)據(jù)是不會(huì)更新的！
                    case 'edit':
                        layer.msg("功能暫未開(kāi)放，你沒(méi)有權(quán)限");
                        //嘿嘿，修改和刪除差不多啦
                        break;
                }

以上就是layui事件監(jiān)聽(tīng)介紹的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司其它相關(guān)文章！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

標(biāo)題名稱：layui事件監(jiān)聽(tīng)的介紹和使用-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://bm7419.com/article4/gieie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、ChatGPT、商城網(wǎng)站、品牌網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容