一、表單的事件監(jiān)聽
公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出紅安免費(fèi)做網(wǎng)站回饋大家。
1、lay-filter 事件過濾器
相當(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ù)雜的判斷，例如：
重慶分公司
重慶分公司
//這里寫required就是必填項(xiàng)的意思，相反phone就是手機(jī)號(hào)，
如果是多個(gè)判斷可以這樣：ay-verify="required|phone",手機(jī)號(hào)必填。如果說我要復(fù)雜的判斷怎么弄呢？ 我們需要先引用form模塊
layui.use('form',function()
{
var form = layui.form;
//自定義一個(gè)驗(yàn)證器
form.verify({
account:[
'正則'
,'提示語句'
]
，pass:[
'正則'
,'提示語句'
]
});
})當(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ì)出來。
4、form.on事件
form.on('event(lay-filter)',function(){
})其中，event可以是radio，checkbox，submit等元素，其中的lay-filter就是我們加的事件過濾器屬性值，比如：
對(duì)就是這個(gè)lay-filter=" "里面的值，好了就只需要這倆個(gè)屬性，就可以執(zhí)行我們相應(yīng)的事件了。
二、表單事件監(jiān)聽
在開始介紹前，我們可以從這張圖中，捋一捋思路。
好了好了，我們來解決問題??！ 首先建立一個(gè)table標(biāo)簽
1、表頭工具欄
這個(gè)layui的表頭工具欄是獨(dú)立于表格的，是附加上去的，就是把一個(gè)盒子放到表格上面，這樣通俗易懂了吧！
第一步，所以我們先建立一個(gè)盒子，但是這是一個(gè)特殊的盒子，我們需要對(duì)其隱藏
思考問題
其中有三個(gè)屬性需要注意，layui-hide隱藏屬性，layui-btn-group組按鈕，lay-event事件的名稱。
如何去辨別我們的操作呢，就是對(duì)layui-event設(shè)置的不同的值，來進(jìn)行不同的行為。
第二步，我們?cè)诒砀衲K里引入我們的頭部盒子，然后監(jiān)聽事件，來看我們的代碼吧！
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ù)選框怎么打了，很簡(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è)盒子附加到表格里，只不過是每行都有，所以把我們添加的代碼，寫道cols屬性里就好了??！
創(chuàng)建一個(gè)盒子
事件監(jiān)聽
這個(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)到詳情頁
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;
}以上就是layui事件監(jiān)聽介紹的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！
