layui switch事件监听，连接后端接口对性别的显示与修改

具体代码位置对应官方文档。

https://www.layui.com/demo/table/form.html

<script type="text/html" id="switchTpl">
　　<input type="checkbox" 
　　　　name="customerGender"  //按钮名称
　　　　value="{{d.id}}"   //该行id
　　　　lay-skin="switch"  
　　　　lay-text="女|男"    //按钮显示文字
　　　　lay-filter="genderSwitch"   //为此绑定监听事件
　　　　{{ d.customerGender== 1 ? '' : 'checked' }}>  
　　　　<!--说明：
　　　　　　　　后台数据库 1代表男，2代表女
　　　　　　　　三元运算 判断 “？”前的公式结果，如果为true，则取“：”前的值；如果为false，则选取“：”后的值
　　　　　　　　因此如果是1（男）的时候，为未选状态
　　　　-->
</script>

// 客户信息列表
table.render({
　　elem: '#custInfoTable'
　　, url: baseUrl + 'cust/listCustomer'
　　, height: 520
　　, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
　　, cols: [[
　　　　{
　　　　　　field: 'customerGender',
　　　　　　width: 90,
　　　　　　title: '客户性别',
          templet: '#switchTpl',
          align: 'center'
　　　　}
　　]]
})

 

到此已经可以实现页面按钮状态的显示，接下来监听按钮操作，调用后台接口方法进行修改（具体后台接口方法不在此展示了）

 

        //监听性别操作
        form.on('switch(genderSwitch)', function (obj) {
            var id = this.value;   //该行id值（对应第一部分代码中的value）
            var customerGender = '';   
            //如果 选中状态（true），向后台传递2（女）；未选中状态（false），向后台传递 1（男）
            obj.elem.checked ? customerGender = '2' : customerGender = '1';
　　　　　　　// 向后台传递的json对象
            var customer ={
                id: id,
                customerGender: customerGender
            };
            $.ajax({
                type: 'PUT',
                url: baseUrl + "cust/updateCustomer",
                data: JSON.stringify(customer),
                success: function (data) {
                    if (data.code == 200) {
                        layer.msg("修改成功");
                    }
                }
            })
        });

本人前端技术水平较弱，接触layui时间较短，有什么问题还望大家包容指正，感谢。