给Layui数据表格的开关按钮绑定事件

太过爱你忘了你带给我的痛 2023-03-02 07:54 88阅读 0赞

# 一. 问题背景 #

想要实现下面的效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]

# 二. 解决方案 #

**这里只给出最最最关键的代码**，如下：（注意代码中的注释）

table.render({ 
        ...
          ,cols: [[ //表头
            ...
            //使用自定义模板引入layui的开关
            ,{ field: 'isManager', title: '是否为管理员', align: 'center', templet: '#switchOnOff'}
          ]]
          ,...
        });

自定义开关模板：

<script type="text/html" id="switchOnOff">
        
        <input type="checkbox" mid={ { d.id}} { { d.isManager=="1"?"checked":""}} name="isManager"
               lay-skin="switch"
               lay-filter="switchTest"
               lay-text="是|否">
    </script>

**这里只给出最最最关键的代码**，如下：（注意代码中的注释）  
**一定要注意function中有obj参数，否则会失效**

//监听isManager开关按钮,更新isManager
     //下面的switchTest是开关的lay-filter值
     form.on('switch(switchTest)', function(obj){ 
         var id = $(this).attr('mid');//为了获取开关所在行的信息，需要绑定上所在行的id
         console.info('id:' + id);
         var isManager = obj.elem.checked?"1":"0";
         console.info('isManager:' + isManager);
     }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]: /images/20230208/153694d92eb84ba184ca803fc302f88f.png