LayUI switch 開(kāi)關(guān)監(jiān)聽(tīng) 獲取屬性值、更改狀態(tài)的方法
背景
今天在設(shè)計(jì)頁(yè)面時(shí),想使用一下 LayUI 的 switch 控件,在需要更改狀態(tài)的時(shí)候進(jìn)行 ajax請(qǐng)求傳輸
需要獲取其中的自定義屬性值,同時(shí)根據(jù)服務(wù)器返回?cái)?shù)據(jù)進(jìn)行狀態(tài)的更改
通過(guò)參考文檔及網(wǎng)友的經(jīng)驗(yàn),在此整理一番
使用方法

場(chǎng)景: 后臺(tái)商品列表頁(yè),進(jìn)行上下架狀態(tài)的修改
①. html 代碼參考
著重注意 我設(shè)置的兩個(gè)屬性值 lay-filter,switch_goods_id
<input type="checkbox" class="switch_checked" lay-filter="switchGoodsID" switch_goods_id="{$vo['goods_id']}" lay-skin="switch" {$vo['status_checked']} lay-text="上架|下架">
②. js 核心代碼參考
以我的設(shè)計(jì)思路,需要獲取當(dāng)前需要更改狀態(tài)的商品ID,然后通過(guò)ajax回調(diào)數(shù)據(jù),判斷是否執(zhí)行 “確定” 按鈕后的狀態(tài)改變即可
layui.use(['form'], function () {
var form = layui.form;
form.on('switch(switchGoodsID)',function (data) {
//開(kāi)關(guān)是否開(kāi)啟,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后自動(dòng)關(guān)閉
btn: ['確定', '取消']
,yes: function(index){
//TODO 此時(shí)進(jìn)行ajax的服務(wù)器訪問(wèn),如果返回?cái)?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; //開(kāi)啟該代碼可禁止點(diǎn)擊該按鈕關(guān)閉
}
});
});
});
簡(jiǎn)化后的代碼如下(不需要彈出選擇界面):
layui.use(['form'], function () {
var form = layui.form;
form.on('switch(switchGoodsID)',function (data) {
//開(kāi)關(guān)是否開(kāi)啟,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 此時(shí)進(jìn)行ajax的服務(wù)器訪問(wèn),如果返回?cái)?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ù)分頁(yè)顯示等需求時(shí),注意完成代碼替換后,進(jìn)行再次渲染:
form.render(); //更新全部 也可以使用:layui.form.render()
form.render('select'); //刷新select選擇框渲染

以上這篇LayUI switch 開(kāi)關(guān)監(jiān)聽(tīng) 獲取屬性值、更改狀態(tài)的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
跨瀏覽器開(kāi)發(fā)經(jīng)驗(yàn)總結(jié)(三) 警惕“IE依賴綜合癥”
跨瀏覽器開(kāi)發(fā)經(jīng)驗(yàn)總結(jié)(三) 警惕“IE依賴綜合癥”2010-05-05
JavaScript跨平臺(tái)的開(kāi)源框架NativeScript
本文給大家分享的是一款使用javascript來(lái)構(gòu)建跨平臺(tái)原生移動(dòng)應(yīng)用的開(kāi)源框架--NativeScript,可以使用JavaScript開(kāi)發(fā)跨平臺(tái)、真正原生的iOS, Android 和 Windows 移動(dòng)App。開(kāi)發(fā)人員使用NativeScript提供的庫(kù)來(lái)構(gòu)建應(yīng)用UI,其抽象了各種原生平臺(tái)之間的不同。2015-03-03
escape編碼與unescape解碼漢字出現(xiàn)亂碼的解決方法
這篇文章主要介紹了escape編碼與unescape解碼漢字出現(xiàn)亂碼的解決方法,需要的朋友可以參考下2014-07-07
談?wù)勎覍?duì)JavaScript原型和閉包系列理解(隨手筆記8)
這篇文章主要介紹了談?wù)勎覍?duì)JavaScript原型和閉包系列理解(隨手筆記8)的相關(guān)資料,需要的朋友可以參考下2015-12-12
webpack4與babel配合使es6代碼可運(yùn)行于低版本瀏覽器的方法
這篇文章主要介紹了webpack4與babel配合使es6代碼可運(yùn)行于低版本瀏覽器的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
js實(shí)現(xiàn)文本框只允許輸入數(shù)字并限制數(shù)字大小的方法
這篇文章主要介紹了js實(shí)現(xiàn)文本框只允許輸入數(shù)字并限制數(shù)字大小的方法,涉及javascript對(duì)字符串正則判斷及數(shù)值大小判斷的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
微信小程序?qū)崿F(xiàn)animation動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)animation動(dòng)畫(huà)的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01

