layui按钮开关checkbox实战

摘要

	上一篇分享了layui美化按钮开关checkbox,具体可以到我的主页阅览

但是很遗憾的是我没有用table.on或者是form.on，因为渲染的问题我不想纠结了,毕竟保护头发才是重要的事情,那接下来我就展示我是如何解决监听按钮修改用户账号状态
先声明：业务、思考方向、代码等,大家认为可以改进的,留言版见 [手动滑稽]

业务场景

可以看到下方是一个用户管理界面,点击按钮去实现用户账号的启用和禁用,并且状态保存到数据库

表格字段代码

如果没有耐心看完代码,就往下看我写的思路吧

		table.render({
			elem:....
			, cols: [
			[....
			{field: 'status', title: '账号状态', sort: true, align: 'center', minWidth: 130, templet: function (d) {
			   return d.status === 0 ? 
			   '<input name="status" value="'+ d.status +'" type="checkbox" checked="checked" lay-event="checkedStatus" lay-skin="switch" lay-filter="switchStatus" lay-text="启用|禁用">' 
			   : '<input name="status" value="'+d.status+'" type="checkbox"  lay-event="checkedStatus" lay-skin="switch" lay-filter="switchStatus" lay-text="启用|禁用">';
			  }
			}
			..
			]], done: function (res, curr, count) {
				//启用禁用监听
			    let arr = $("[data-field='status']");
			    for (let i = 1; i < arr.length; i++) {
			       $(arr[i]).on('click',function () {
			          let userId = $(this).parent("tr").children('td').eq(1).text();
			          let checked = true;
			          if ('禁用'=== this.innerText){
			               checked = false
			          }
			          switchStatus(userId,checked);
			       })
			    }
			    //form.render();这里不加也不影响按钮渲染
		};
		/*禁用启用账号*/
        function switchStatus(userId,checked) {
            let param = {
                userId: userId
            };
            //监听指定开关
            if (checked) {
                param.status = '0';
                layer.msg('启用', {
                    offset: '6px', time: 1000
                });
            } else {
                param.status = '1';
                layer.msg('禁用', {
                    offset: '6px', time: 1000
                });
            }
            $.ajax({
                url: '..写自己的url',
                type: 'get',
                data: param,
                dataType: 'JSON',
                headers: {"token": layui.data(layui.setter.tableName)['token']},
                success: function (res) {
                    if (res.code == '0') {
                        layer.msg(res.msg, {offset: '6px'});
                    } else {
                        layer.msg(res.msg, {offset: '15px', icon: 2, time: 2000})
                    }
                },
                error: function (res) {
                    layer.msg(res.msg, {offset: '15px', icon: 2, time: 2000})
                }
            });
            return false;
        }

参考思路

 1. 首先通过jQuery获取$("[data-field='status']"); 字段名字为"status"的 td 数组,再遍历,
    当然我这里用for循环只是为了更直观,当然用jQuery中的each遍历也行,只不过对应的arr[i]
    就要换成$("[data-field='status']").each(function(){....}),然后调用监听事件
 2. 改变用户账号状态,必要两个字段值,一个是“userId”一个是改变的状态值“status”，所以使用jQuery获取
 3. 点击了那个按钮就获取对应按钮中的this.innerText值,进行判断,之后就把获取到的值传过去搞定了

官方操作（简便方法）

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

1. 三个关键点：
   checkbox中value值存当前行id字段值,后面要用;
   lay-filte必须要写;
   {{ d.status == ‘0’ ? ‘checked’ : ‘’ }}服务端返回状态值判断是选择还是未选中状态

<script type="text/html" id="switchStatus">
	 <input name="status" value="{{d.userId}}" type="checkbox" lay-skin="switch" lay-text="启用|禁用" lay-filter="checkedStatus" {{ d.status == '0' ? 'checked' : '' }}>
</script>

2、字段

{field: 'status', title: '账号状态', sort: true, align: 'center', minWidth: 130, templet: '#switchStatus', unresize: true}

3、调用

	/*监听禁用启用账号开关*/
	form.on('switch(checkedStatus)', function(obj){
	    switchStatus(this.value,obj.elem.checked);//方法在上面有
	});

小结

遇到问题不要慌，这个问题解决还有下一个问题。头发才是重要的,换个思路解决掉就好,哈哈哈
ps：这张图忘记是从哪个大哥哪里拿来的