Layui事件監(jiān)聽的實(shí)現(xiàn)(表單和數(shù)據(jù)表格)

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

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

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

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

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

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

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

  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)來查看有哪些數(shù)據(jù)！！
  })

 table.on('toolbar(table)',function(obj){//我給表格設(shè)置的lay-filter叫table
    var checkStatus = table.checkStatus('demo')//表格id，獲取選中行
    //嘿嘿，到了這，我好像說復(fù)選框怎么打了，很簡單的，{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;
      
    }
    
  });

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

table.render({
        elem: ''
        , url: ''
        , cols: [[
        ………………
          { toolbar: '#tool', title: '操作' }
        ]]
      });

table.on('tool(table2)', function (obj) {
        switch (obj.event) {
          case 'particulars':
            location.href = "/JD/Particulars?productID=" + obj.data.ProductID;
            break;//獲取id跳轉(zhuǎn)到詳情頁
          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("功能暫未開放，你沒有權(quán)限");
            //嘿嘿，修改和刪除差不多啦
            break;
        }