介绍 layui.use((& # 39;形式# 39;],,function (), {
,var form =, layui.form;
,form.on(& # 39;开关(switchGoodsID) & # 39;, function (数据),{//开才能关是否开启,真实或者错误的
var 才能;checked =, data.elem.checked;//才能获取所需属性值
var 才能;switch_goods_id =, data.elem.attributes [& # 39; switch_goods_id& # 39;] .nodeValue;
console.log才能(检查);
console.log才能(switch_goods_id);
layer.msg才能(& # 39;合理搭配,展示不一样的风格& # 39;,,{
,,时间:5000年,,//5 s后自动关闭
btn才能:[& # 39;确定& # 39;,,& # 39;取消& # 39;】
,,,是的:函数(指数){
,,//TODO 此时进行ajax的服务器访问,如果返回数据正常,则进行后面代码的调用
,,data.elem.checked =,检查;
,,form.render ();
,,layer.close(指数);
,,//按钮【按钮一】的回调
,,}
,,,这里:函数(指数){
,,//按钮【按钮二】的回调
,,data.elem.checked=!检查;
,,form.render ();
,,layer.close(指数);
,,//return 假,,//开启该代码可禁止点击该按钮关闭
,,}
,,});
,});
以前,}); , layui.use((& # 39;形式# 39;],,function (), {
,var form =, layui.form;
,form.on(& # 39;开关(switchGoodsID) & # 39;, function (数据),{//开才能关是否开启,真实或者错误的
var 才能;checked =, data.elem.checked;//才能获取所需属性值
var 才能;switch_goods_id =, data.elem.attributes [& # 39; switch_goods_id& # 39;] .nodeValue;
console.log才能(检查);
console.log才能(switch_goods_id);//才能TODO 此时进行ajax的服务器访问,如果返回数据正常,则进行后面代码的调用
var 才能;serverStatus =, 1;
如果才能(serverStatus) {
data.elem.checked =,才能检查;
}else {才能
data.elem.checked =, !才能检查;
,,}
form.render才能();
,});
以前,}); form.render();,//更新全部,也可以使用:layui.form.render ()
form.render(& # 39;选择# 39;);,//刷新选择选择框渲染 LayUI是什么
这篇文章主要介绍LayUI中转换开关监听如何获取属性值,更改状态,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>使用方法
场景:后台商品列表页,进行上下架状态的修改
<强>①。html代码参考
着重注意我设置的两个属性值lay-filter, switch_goods_id
& lt;输入类型=癱heckbox"类=皊witch_checked"lay-filter=皊witchGoodsID"switch_goods_id=皗$ vo (& # 39; goods_id& # 39;]}“;lay-skin=皊witch"{$ vo (& # 39; status_checked& # 39;]} lay-text=吧霞軀下架“在
<强>②。js核心代码参考
以我的设计思路,需要获取当前需要更改状态的商品ID,然后通过ajax回调数据,判断是否执行”确定”按钮后的状态改变即可
简化后的代码如下(不需要弹出选择界面):
附录:
<强>注意:
当进行表格数据分页显示等需求时,注意完成代码替换后,进行再次渲染:
LayUI是一款采用自身模块规范编写的前端UI框架,它遵循原生HTML/CSS/javascript的书写与组织形式,门槛极低,适合新手,并且它还提供了丰富的内置模块,他们皆可通过模块化的方式按需加载,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发,能够作为电脑网页端后台系统与前台界面的速成开发方案。
以上是“LayUI中转换开关监听如何获取属性值,更改状态”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
