LayUI switch 開關(guān)監(jiān)聽 獲取屬性值、更改狀態(tài)的方法
更新時間：2019年09月21日 08:47:20 作者：moTzxx
今天小編就為大家分享一篇LayUI switch 開關(guān)監(jiān)聽 獲取屬性值、更改狀態(tài)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
背景
今天在設(shè)計頁面時，想使用一下 LayUI 的 switch 控件，在需要更改狀態(tài)的時候進行 ajax請求傳輸
需要獲取其中的自定義屬性值，同時根據(jù)服務(wù)器返回數(shù)據(jù)進行狀態(tài)的更改
通過參考文檔及網(wǎng)友的經(jīng)驗，在此整理一番
使用方法
場景： 后臺商品列表頁，進行上下架狀態(tài)的修改
①. html 代碼參考
著重注意 我設(shè)置的兩個屬性值 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è)計思路，需要獲取當(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 此時進行ajax的服務(wù)器訪問，如果返回數(shù)據(jù)正常，則進行后面代碼的調(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 此時進行ajax的服務(wù)器訪問，如果返回數(shù)據(jù)正常，則進行后面代碼的調(diào)用
var serverStatus = 1;
if(serverStatus){
data.elem.checked = checked;
}else {
data.elem.checked = !checked;
}
form.render();
});
});
附錄：
注意：
當(dāng)進行表格數(shù)據(jù)分頁顯示等需求時，注意完成代碼替換后，進行再次渲染：
form.render(); //更新全部 也可以使用：layui.form.render()
form.render('select'); //刷新select選擇框渲染
以上這篇LayUI switch 開關(guān)監(jiān)聽 獲取屬性值、更改狀態(tài)的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文向大家介紹了開源的javascript項目Kissy，是taobao UED小組推的一款js框架，我們來簡單研究下，為什么taobao這么推崇他呢。2014-11-11
猜測Safari5中將點擊alert框的確定按鈕也當(dāng)成點擊body了。事件一直冒泡到彈出框上。2011-04-04
在JavaScript中,${}用于模板文字（template?literals）,為ES6中新增的字符串方法,其作用是配合反單引號實現(xiàn)字符串拼,代替以前傳統(tǒng)復(fù)雜的引號雙引號與+的拼接,簡介明了,非常好用,本文給大家介紹JS中‘${}‘什么意思有什么作用,感興趣的朋友一起看看吧2023-08-08
在網(wǎng)上搜索了下關(guān)于性能優(yōu)化方面的內(nèi)容，現(xiàn)簡單整理可供大家在優(yōu)化過程中使用，感興趣的額朋友可以了解下2013-08-08
express+mockjs實現(xiàn)模擬后臺數(shù)據(jù)發(fā)送功能
這篇文章主要介紹了express+mockjs實現(xiàn)模擬后臺數(shù)據(jù)發(fā)送功能,需要的朋友可以參考下2018-01-01
在JavaScript中,將年月日轉(zhuǎn)換為時間戳可以通過多種方式實現(xiàn),下面給大家分享JS把年月日轉(zhuǎn)為時間戳的操作方法,感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要為大家詳細介紹了js密碼強度實時檢測代碼，密碼強度的判斷, 在注冊網(wǎng)站用戶的時候, 是一個必須要做的事情，如何實現(xiàn)js密碼強度檢測，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要為大家詳細介紹了javascript局部自定義鼠標右鍵菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
在 JavaScript 中，使用字符串連接有 幾 種方式：連接符（+）、反引號（`）、join()、concat()，這篇文章主要介紹了JS字符串拼接的幾種方式,需要的朋友可以參考下2023-01-01
這篇文章主要給大家介紹了關(guān)于JavaScript中常用的數(shù)組過濾方法的相關(guān)資料,數(shù)組過濾器方法是JavaScript中使用最廣泛的方法之一,它允許我們快速過濾出具有特定條件的數(shù)組中的元素,需要的朋友可以參考下2023-11-11