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)源的javascript項(xiàng)目Kissy介紹
本文向大家介紹了開(kāi)源的javascript項(xiàng)目Kissy,是taobao UED小組推的一款js框架,我們來(lái)簡(jiǎn)單研究下,為什么taobao這么推崇他呢。2014-11-11Safari5中alert的無(wú)限循環(huán)BUG
猜測(cè)Safari5中將點(diǎn)擊alert框的確定按鈕也當(dāng)成點(diǎn)擊body了。事件一直冒泡到彈出框上。2011-04-04express+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-03JavaScript中常用的數(shù)組過(guò)濾方法例子
這篇文章主要給大家介紹了關(guān)于JavaScript中常用的數(shù)組過(guò)濾方法的相關(guān)資料,數(shù)組過(guò)濾器方法是JavaScript中使用最廣泛的方法之一,它允許我們快速過(guò)濾出具有特定條件的數(shù)組中的元素,需要的朋友可以參考下2023-11-11