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、打印參數

接下來就可以調用後臺接口修改參數了

本文到此結束，如果覺得有用，勞煩各位點贊關注一下唄，將不定時持續更新更多的內容…，感謝大家的觀看！