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

1、展示switch 开关效果

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'>"
                                    }
                                }
                            },

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、打印参数

接下来就可以调用后台接口修改参数了

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