通过拉远开关监控获取属性值和改变状态的方法

背景

今天，在设计页面时，我想在状态需要改变时，使用LayUI的switch控件来传输ajax请求。

您需要获取自定义属性值，并根据服务器返回的数据更改状态

通过参考文献和网友的经验，我在这里整理一下

施用方式

场景：后台商品列表页面用于修改装卸货状态

.html代码引用

注意我设置的两个属性值：lay-filter，switch_goods_id

输入类型=' checkbox ' class=' switch _ checked ' lay-filter=' switch good id ' switch _ good _ id=' { $ VO[' good _ id ']} ' lay-skin=' switch ' { $ VO[' status _ checked ']} lay-

.js核心代码参考

在我的设计思路中，需要获取当前状态需要更改的商品的ID，然后通过ajax回调数据，判断执行“确定”按钮后是否更改状态。

layui.use(['form']，function(){ var form=layui . form；form . on(' switch(switch good id)'，function (data) {//switch on，true或false varchecked=data . elem . checked；//获取所需的属性值varswitch _ goods _ id=data . elem . attributes[' switch _ goods _ id ']。nodevalueconsole.log(已选中)；console . log(switch _ goods _ id)；Layer.msg('匹配得当，展现不同风格'，{time: 5000，//5s后自动关闭BTN3360 '，' Cancel']，yes :函数(index) {//todo，此时访问ajax服务器，返回数据正常后调用data.elem。form . render()；layer.close(索引)；//按钮[1]的回调)}，btn2:函数(索引){ //按钮[2]的回调data.elem.checked=！已检查；form . render()；layer.close(索引)；//返回false//打开此代码禁止点击此按钮关闭} })；});});简化代码如下(无需弹出选择界面):

layui.use(['form']，function(){ var form=layui . form；form . on(' switch(switch good id)'，function (data) {//switch on，true或false varchecked=data . elem . checked；//获取所需的属性值varswitch _ goods _ id=data . elem . attributes[' switch _ goods _ id ']。nodevalueconsole.log(已选中)；console . log(switch _ goods _ id)；//TODO此时访问ajax服务器。如果返回的数据正常，调用下面的代码。var ServerStatus=1；if(ServerStatus){ data . elem . checked=checked；}else { data.elem.checked=！已检查；} form . render()；});});附录：

注意：

当需要表数据的页面显示时，注意代码替换后的重新呈现：

form . render()；//也可以使用update all:layui . form . render()form . render(' select ')；//刷新选择框渲染

以上监控属性值和改变拉远开关状态的方法都是边肖分享的内容。希望能给大家一个参考，多支持我们。