LayUI switch 開關監(jiān)聽 獲取屬性值、更改狀態(tài)的方法
背景
今天在設計頁面時，想使用一下 LayUI 的 switch 控件，在需要更改狀態(tài)的時候進行 ajax請求傳輸
需要獲取其中的自定義屬性值，同時根據(jù)服務器返回數(shù)據(jù)進行狀態(tài)的更改
通過參考文檔及網(wǎng)友的經(jīng)驗，在此整理一番
使用方法
場景： 后臺商品列表頁，進行上下架狀態(tài)的修改
①. html 代碼參考
著重注意 我設置的兩個屬性值 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 核心代碼參考
以我的設計思路，需要獲取當前需要更改狀態(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) {
//開關是否開啟，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('合理搭配，展示不一樣的風格', {
time: 5000, //5s后自動關閉
btn: ['確定', '取消']
,yes: function(index){
//TODO 此時進行ajax的服務器訪問，如果返回數(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; //開啟該代碼可禁止點擊該按鈕關閉
}
});
});
});
簡化后的代碼如下（不需要彈出選擇界面）：
layui.use(['form'], function () {
var form = layui.form;
form.on('switch(switchGoodsID)',function (data) {
//開關是否開啟，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的服務器訪問，如果返回數(shù)據(jù)正常，則進行后面代碼的調(diào)用
var serverStatus = 1;
if(serverStatus){
data.elem.checked = checked;
}else {
data.elem.checked = !checked;
}
form.render();
});
});
附錄：
注意：
當進行表格數(shù)據(jù)分頁顯示等需求時，注意完成代碼替換后，進行再次渲染：
form.render(); //更新全部 也可以使用：layui.form.render()
form.render('select'); //刷新select選擇框渲染
以上這篇LayUI switch 開關監(jiān)聽 獲取屬性值、更改狀態(tài)的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
跨瀏覽器開發(fā)經(jīng)驗總結（三） 警惕“IE依賴綜合癥”
跨瀏覽器開發(fā)經(jīng)驗總結（三） 警惕“IE依賴綜合癥”2010-05-05
JavaScript跨平臺的開源框架NativeScript
本文給大家分享的是一款使用javascript來構建跨平臺原生移動應用的開源框架--NativeScript，可以使用JavaScript開發(fā)跨平臺、真正原生的iOS, Android 和 Windows 移動App。開發(fā)人員使用NativeScript提供的庫來構建應用UI，其抽象了各種原生平臺之間的不同。2015-03-03
escape編碼與unescape解碼漢字出現(xiàn)亂碼的解決方法
這篇文章主要介紹了escape編碼與unescape解碼漢字出現(xiàn)亂碼的解決方法,需要的朋友可以參考下2014-07-07
js幾個不錯的函數(shù) $$()...2006-10-10
談談我對JavaScript原型和閉包系列理解(隨手筆記8)
這篇文章主要介紹了談談我對JavaScript原型和閉包系列理解(隨手筆記8)的相關資料,需要的朋友可以參考下2015-12-12
webpack4與babel配合使es6代碼可運行于低版本瀏覽器的方法
這篇文章主要介紹了webpack4與babel配合使es6代碼可運行于低版本瀏覽器的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
將HTML DOM中幾個容易常用的屬性做下記錄，需要的朋友可以參考下。2011-03-03
js實現(xiàn)文本框只允許輸入數(shù)字并限制數(shù)字大小的方法
這篇文章主要介紹了js實現(xiàn)文本框只允許輸入數(shù)字并限制數(shù)字大小的方法,涉及javascript對字符串正則判斷及數(shù)值大小判斷的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要源碼解讀了Bootstrap按鈕，介紹了Bootstrap各式各樣的按鈕,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)animation動畫的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01