Layui 数据表格添加 switch 开关,并传递自定义值

雨点打透心脏的1/2处 2023-02-19 14:27 7阅读 0赞

### 1、展示switch 开关效果![在这里插入图片描述][20200621085135391.png] ###

### 2、添加 switch 开关代码 ###

{
                                    field: 'state', width: 90, title: '禁/启用', templet: function (res) {
                                        let menuId = res.id;
                                        if (res.state == 0) {
                                            return "   <input type='checkbox'  menuId = '" + menuId + "' lay-filter='state' lay-skin='switch' lay-text='ON|OFF' checked>"
                                        } else if (res.state == 1) {
                                            return "   <input type='checkbox'  menuId = '" + menuId + "'  lay-filter='state' lay-skin='switch' lay-text='ON|OFF'>"
                                        }
                                    }
                                },

![在这里插入图片描述][2020062108570637.png]

### 3、监听方法 ###

请注意是否存在layui 的 form ，我是定义在外面的了的

/**
                 * TODO 监听单选选中
                 * <p>
                 * switch(state) 对应 lay-filter='state'
                 */
                function xijiaEventSwitch() {
                    form.on('switch(state)', function (data) {
                        console.log(data.elem.attributes['menuId'].nodeValue);
                        console.log(data.elem.checked); // 开关是否开启，true或者false
                        console.log(data.value);        // 开关value值，也可以通过data.elem.value得到
    
                        // let menuId = data.elem.attributes['menuId'].nodeValue;
                        //console.log(data.elem);         // 得到checkbox原始DOM对象
                        //console.log(data.othis);        // 得到美化后的DOM对象
                    });
                }

### 4、打印参数 ###

![在这里插入图片描述][20200621090128374.png]  
接下来就可以调用后台接口修改参数了

***本文到此结束，如果觉得有用，劳烦各位点赞关注一下呗，将不定时持续更新更多的内容…，感谢大家的观看！***

[20200621085135391.png]: https://img-blog.csdnimg.cn/20200621085135391.png
[2020062108570637.png]: https://img-blog.csdnimg.cn/2020062108570637.png
[20200621090128374.png]: https://img-blog.csdnimg.cn/20200621090128374.png