layui switch 开关根据传入值默认选中或不选

柔情只为你懂 2024-04-19 08:43 71阅读 0赞

参考:

[http://www.jiaochengku.net/ITjiaocheng/wangyezhizuo/4044.html][http_www.jiaochengku.net_ITjiaocheng_wangyezhizuo_4044.html]

### 动态修改switch开关值，改变开关默认存值，改变开关默认文本 ###

[https://blog.csdn.net/zzz\_\_\_bj/article/details/80324953][https_blog.csdn.net_zzz_bj_article_details_80324953]

**使用templet(模板)，将开关放到table里面**

,\{field:'state', title: '状态',align:'center',templet: statusTpl\}

模板有两种方式定义，根据自己喜好选择其中一种：

第一种 //是否启用模板 var statusTpl = function (d) \{ //名字需要和上面定义的名字对应上 var isCkecked = d.state == "1" ?"checked":""; return '<input type="checkbox" lay-skin="switch" lay-filter="enabledState" data-id="d.userid" lay-text="启用|禁用" '+ isCkecked +'> '; \};

参数 d 是当前行所有[数据][Link 1]  
我这里返回的[数据][Link 1]是，state:0 | 1 0禁用，1启用  
定义一个变量，使用三元进行计算，控制checked的动态添加

第二种 <script type="text/html" id="statusTpl"> <input type="checkbox" lay-skin="switch" lay-filter="enabledState" data-id="d.userid" lay-text="启用|禁用" \{ \{d.state == "1" ?"checked":"" \}\}> </script>

这里的d和上面的d是一样的， 写两个大括号，\{ \{ 在这里和上面一样进行三元计算 \}\}

两个模板放置的位置

动态修改 switch 开关的显示状态

[https://fly.layui.com/jie/49072/][https_fly.layui.com_jie_49072]

注意: form.render('checkbox');//  最后用组件类型, lay-filter  可能没用

layui 可能采用的 jquery 1.6 , 推荐用 $('元素').prop('checked','checked');

或者 dom 的 方法, document.get('').checked=true;

[http_www.jiaochengku.net_ITjiaocheng_wangyezhizuo_4044.html]: http://www.jiaochengku.net/ITjiaocheng/wangyezhizuo/4044.html
[https_blog.csdn.net_zzz_bj_article_details_80324953]: https://blog.csdn.net/zzz___bj/article/details/80324953
[Link 1]: http://www.jiaochengku.net/ITjiaocheng/ruanjianbiancheng/3049.html
[https_fly.layui.com_jie_49072]: https://fly.layui.com/jie/49072/