Layui事件監聽（表單和數據表格）

時間 2019-11-06

標籤 layui 事件監聽表單數據表格欄目 HTML 简体版

原文原文鏈接

1、表單的事件監聽

先介紹一下幾個屬性的用法ajax

一、lay-filter 事件過濾器

至關於選擇器，layui的專屬選擇器bash

二、lay-verify 驗證屬性

屬性值能夠是：required必填項， phone手機號，email郵箱，url網址，number數字，date日期，identity身份證。這個至關於正則判斷，固然你也能夠定義本身的正則，作一些複雜的判斷，例如：ide

<input type="text" lay-verify="required">
    //這裏寫required就是必填項的意思，相反phone就是手機號，
    若是是多個判斷能夠這樣：ay-verify="required|phone",手機號必填。
複製代碼

若是說我要複雜的判斷怎麼弄呢？咱們須要先引用form模塊工具

layui.use('form',function()
    {
        var form = layui.form;
        //自定義一個驗證器
        form.verify({
            account:[
            '正則'
            ,'提示語句'
            ]
            ，pass:[
            '正則'
            ,'提示語句'
            ]
            
        });
        
    })
複製代碼

當咱們，寫完驗證規則後，只須要把本身定義的名字，如上面的account寫到lay-verify="account"裏面就行了，那麼對這個規則驗證就弄完了。ui

三、lay-submit 綁定觸發提交的元素

在input的submit按鈕標籤裏，添加這麼一個屬性，那layui表單的驗證效果纔會出來。url

四、form.on事件

form.on('event(lay-filter)',function(){
    
})
複製代碼

其中，event能夠是radio，checkbox，submit等元素，其中的lay-filter就是咱們加的事件過濾器屬性值，好比：spa

<input type="submit" lay-filter="go" lay-submit value="提交"/>
複製代碼

對就是這個lay-filter=" "裏面的值，好了就只須要這倆個屬性，就能夠執行咱們相應的事件了。code

2、表單事件監聽

在開始介紹前，咱們能夠從這張圖中，捋一捋思路。（本身畫的，有點醜，嘿嘿）orm

好了好了，咱們來解決問題！！首先創建一個table標籤

<table id="demo" lay-filter="table"></table>
複製代碼

一、表頭工具欄

這個layui的表頭工具欄是獨立於表格的，是附加上去的，就是把一個盒子放到表格上面，這樣通俗易懂了吧！
第一步，因此咱們先創建一個盒子，可是這是一個特殊的盒子，咱們須要對其隱藏
cdn

<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>
複製代碼

思考問題
其中有三個屬性須要注意，layui-hide隱藏屬性，layui-btn-group組按鈕，lay-event事件的名稱。
如何去辨別咱們的操做呢，就是對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: '/JD/ShopDelAll?strid=' + strid
                                , type: 'Delete'
                                , success: function (d) {
                                    layer.msg("刪除了" + num + "條數據");
                                    location.href = '/JD/ShopList';
                                }
                            })
                        }
                        else {
                            layer.msg("至少選擇一個！")
                        }
                        break;
                break;
            
        }
        
    });
複製代碼

看完有沒有以爲很簡單啊，頭部工具欄的事件就完了，對於行工具欄的事件還不簡單嗎？觸類旁通啊！我推薦你不用看下面了，看看官方文檔，本身去試試吧！固然了，不明白的仍是能夠看看下面的嘞！

二、表格的行工具欄

其實道理都差很少啦，也是把一個盒子附加到表格裏，只不過是每行都有，因此把咱們添加的代碼，寫道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>
複製代碼

好了，好了，沒什麼特別介紹的，屬性都同樣！開始js代碼

table.render({
                elem: ''
                , url: ''
                , cols: [[
                ………………
                    { toolbar: '#tool', title: '操做' }
                ]]
            });
複製代碼

哎呦，省略了，省略了。
事件監聽
這個就簡單了哈，咋們前面獲取選中狀態是否是用了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;
                }
複製代碼