LayUI switch 開關(guān)監(jiān)聽 獲取屬性值、更改狀態(tài)的方法
背景
今天在設(shè)計(jì)頁面時(shí),想使用一下 LayUI 的 switch 控件,在需要更改狀態(tài)的時(shí)候進(jìn)行 ajax請(qǐng)求傳輸
需要獲取其中的自定義屬性值,同時(shí)根據(jù)服務(wù)器返回?cái)?shù)據(jù)進(jìn)行狀態(tài)的更改
通過參考文檔及網(wǎng)友的經(jīng)驗(yàn),在此整理一番
使用方法
場(chǎng)景: 后臺(tái)商品列表頁,進(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,然后通過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后自動(dòng)關(guān)閉 btn: ['確定', '取消'] ,yes: function(index){ //TODO 此時(shí)進(jìn)行ajax的服務(wù)器訪問,如果返回?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; //開啟該代碼可禁止點(diǎn)擊該按鈕關(guān)閉 } }); }); });
簡(jiǎ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 此時(shí)進(jìn)行ajax的服務(wù)器訪問,如果返回?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ù)分頁顯示等需求時(shí),注意完成代碼替換后,進(jìn)行再次渲染:
form.render(); //更新全部 也可以使用:layui.form.render() form.render('select'); //刷新select選擇框渲染
以上這篇LayUI switch 開關(guān)監(jiān)聽 獲取屬性值、更改狀態(tài)的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
express+mockjs實(shí)現(xiàn)模擬后臺(tái)數(shù)據(jù)發(fā)送功能
這篇文章主要介紹了express+mockjs實(shí)現(xiàn)模擬后臺(tái)數(shù)據(jù)發(fā)送功能,需要的朋友可以參考下2018-01-01js密碼強(qiáng)度實(shí)時(shí)檢測(cè)代碼
這篇文章主要為大家詳細(xì)介紹了js密碼強(qiáng)度實(shí)時(shí)檢測(cè)代碼,密碼強(qiáng)度的判斷, 在注冊(cè)網(wǎng)站用戶的時(shí)候, 是一個(gè)必須要做的事情,如何實(shí)現(xiàn)js密碼強(qiáng)度檢測(cè),感興趣的小伙伴們可以參考一下2016-03-03