欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

LayUI switch 開(kāi)關(guān)監(jiān)聽(tīng) 獲取屬性值、更改狀態(tài)的方法

 更新時(shí)間:2019年09月21日 08:47:20   作者:moTzxx  
今天小編就為大家分享一篇LayUI switch 開(kāi)關(guān)監(jiān)聽(tīng) 獲取屬性值、更改狀態(tài)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lá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介紹

    本文向大家介紹了開(kāi)源的javascript項(xiàng)目Kissy,是taobao UED小組推的一款js框架,我們來(lái)簡(jiǎn)單研究下,為什么taobao這么推崇他呢。
    2014-11-11
  • Safari5中alert的無(wú)限循環(huán)BUG

    Safari5中alert的無(wú)限循環(huán)BUG

    猜測(cè)Safari5中將點(diǎn)擊alert框的確定按鈕也當(dāng)成點(diǎn)擊body了。事件一直冒泡到彈出框上。
    2011-04-04
  • JS中${}什么意思有什么作用

    JS中${}什么意思有什么作用

    在JavaScript中,${}用于模板文字(template?literals),為ES6中新增的字符串方法,其作用是配合反單引號(hào)實(shí)現(xiàn)字符串拼,代替以前傳統(tǒng)復(fù)雜的引號(hào)雙引號(hào)與+的拼接,簡(jiǎn)介明了,非常好用,本文給大家介紹JS中‘${}‘什么意思有什么作用,感興趣的朋友一起看看吧
    2023-08-08
  • JS性能優(yōu)化筆記搜索整理

    JS性能優(yōu)化筆記搜索整理

    在網(wǎng)上搜索了下關(guān)于性能優(yōu)化方面的內(nèi)容,現(xiàn)簡(jiǎn)單整理可供大家在優(yōu)化過(guò)程中使用,感興趣的額朋友可以了解下
    2013-08-08
  • express+mockjs實(shí)現(xiàn)模擬后臺(tái)數(shù)據(jù)發(fā)送功能

    express+mockjs實(shí)現(xiàn)模擬后臺(tái)數(shù)據(jù)發(fā)送功能

    這篇文章主要介紹了express+mockjs實(shí)現(xiàn)模擬后臺(tái)數(shù)據(jù)發(fā)送功能,需要的朋友可以參考下
    2018-01-01
  • JS把年月日轉(zhuǎn)為時(shí)間戳的操作方法

    JS把年月日轉(zhuǎn)為時(shí)間戳的操作方法

    在JavaScript中,將年月日轉(zhuǎn)換為時(shí)間戳可以通過(guò)多種方式實(shí)現(xiàn),下面給大家分享JS把年月日轉(zhuǎn)為時(shí)間戳的操作方法,感興趣的朋友跟隨小編一起看看吧
    2024-08-08
  • js密碼強(qiáng)度實(shí)時(shí)檢測(cè)代碼

    js密碼強(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
  • javascript局部自定義鼠標(biāo)右鍵菜單

    javascript局部自定義鼠標(biāo)右鍵菜單

    這篇文章主要為大家詳細(xì)介紹了javascript局部自定義鼠標(biāo)右鍵菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-12-12
  • JS字符串拼接的幾種方式(最新推薦)

    JS字符串拼接的幾種方式(最新推薦)

    在 JavaScript 中,使用字符串連接有 幾 種方式:連接符(+)、反引號(hào)(`)、join()、concat(),這篇文章主要介紹了JS字符串拼接的幾種方式,需要的朋友可以參考下
    2023-01-01
  • JavaScript中常用的數(shù)組過(guò)濾方法例子

    JavaScript中常用的數(shù)組過(guò)濾方法例子

    這篇文章主要給大家介紹了關(guān)于JavaScript中常用的數(shù)組過(guò)濾方法的相關(guān)資料,數(shù)組過(guò)濾器方法是JavaScript中使用最廣泛的方法之一,它允許我們快速過(guò)濾出具有特定條件的數(shù)組中的元素,需要的朋友可以參考下
    2023-11-11

最新評(píng)論