建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹LayUI中switch開關(guān)監(jiān)聽如何獲取屬性值、更改狀態(tài)，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)建站是一家專業(yè)提供東洲企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站建設(shè)、成都做網(wǎng)站、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為東洲眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。
使用方法
場景： 后臺商品列表頁，進(jìn)行上下架狀態(tài)的修改
①. html 代碼參考
著重注意 我設(shè)置的兩個屬性值 lay-filter,switch_goods_id
②. js 核心代碼參考
以我的設(shè)計思路，需要獲取當(dāng)前需要更改狀態(tài)的商品ID,然后通過ajax回調(diào)數(shù)據(jù)，判斷是否執(zhí)行 “確定” 按鈕后的狀態(tài)改變即可
layui.use(['form'], function () {
var form = layui.form;
form.on('switch(switchGoodsID)',function (data) {
//開關(guān)是否開啟，true或者false
var checked = data.elem.checked;
//獲取所需屬性值
var switch_goods_id = data.elem.attributes['switch_goods_id'].nodeValue;
console.log(checked);
console.log(switch_goods_id);
layer.msg('合理搭配，展示不一樣的風(fēng)格', {
time: 5000, //5s后自動關(guān)閉
btn: ['確定', '取消']
,yes: function(index){
//TODO 此時進(jìn)行ajax的服務(wù)器訪問，如果返回數(shù)據(jù)正常，則進(jìn)行后面代碼的調(diào)用
data.elem.checked = checked;
form.render();
layer.close(index);
//按鈕【按鈕一】的回調(diào)
}
,btn2: function(index){
//按鈕【按鈕二】的回調(diào)
data.elem.checked=!checked;
form.render();
layer.close(index);
//return false; //開啟該代碼可禁止點擊該按鈕關(guān)閉
}
});
});
});簡化后的代碼如下（不需要彈出選擇界面）：
layui.use(['form'], function () {
var form = layui.form;
form.on('switch(switchGoodsID)',function (data) {
//開關(guān)是否開啟，true或者false
var checked = data.elem.checked;
//獲取所需屬性值
var switch_goods_id = data.elem.attributes['switch_goods_id'].nodeValue;
console.log(checked);
console.log(switch_goods_id);
//TODO 此時進(jìn)行ajax的服務(wù)器訪問，如果返回數(shù)據(jù)正常，則進(jìn)行后面代碼的調(diào)用
var serverStatus = 1;
if(serverStatus){
data.elem.checked = checked;
}else {
data.elem.checked = !checked;
}
form.render();
});
});附錄：
注意：
當(dāng)進(jìn)行表格數(shù)據(jù)分頁顯示等需求時，注意完成代碼替換后，進(jìn)行再次渲染：
form.render(); //更新全部 也可以使用：layui.form.render()
form.render('select'); //刷新select選擇框渲染
layui是什么
layui是一款采用自身模塊規(guī)范編寫的前端UI框架，它遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，適合新手，并且它還提供了豐富的內(nèi)置模塊，他們皆可通過模塊化的方式按需加載，從核心代碼到API的每一處細(xì)節(jié)都經(jīng)過精心雕琢，非常適合界面的快速開發(fā)，能夠作為PC網(wǎng)頁端后臺系統(tǒng)與前臺界面的速成開發(fā)方案。
以上是“LayUI中switch開關(guān)監(jiān)聽如何獲取屬性值、更改狀態(tài)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)頁標(biāo)題：LayUI中switch開關(guān)監(jiān)聽如何獲取屬性值、更改狀態(tài)
標(biāo)題路徑：http://www.ef60e0e.cn/article/jdjjjd.html
