layui-checkbox ，遇到的问题

不得不说checkbox在layui里面真不好用，遇到的问题基本都是关于checkbox的渲染和监听的问题

<script type="text/javascript">
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
     top: 50%;
     transform: translateY(-50%);
}

</script>

在前面覆盖掉checkbox的属性就好了,上面是解决checkbox不居中问题

 

2.在使用layui.open中，调用jsp页面，弹出层中，checkbox，渲染可能出现渲染失败问题

而父页面要获得子页面对象，得通过

 var frameId = $(layero).find("iframe").attr('id'); //获得子页面的id
 var iframeWindow = layero.find('iframe')[0].contentWindow; //获得子页面的对象
 //给子页面赋值
 $(window.frames[frameId].document).find("#userId").val(data.userId);
                            $(window.frames[frameId].document).find("#userName").val(data.userName);
                            $(window.frames[frameId].document).find("#userNickname").val(data.userNickname);
                            $(window.frames[frameId].document).find("#userEmail").val(data.userEmail);
                            $(window.frames[frameId].document).find("#userAvatar").val(data.userAvatar);
                            $(window.frames[frameId].document).find("#demo1").attr("src",data.userAvatar);
                            $(window.frames[frameId].document).find("#userUrl").val(data.userUrl);
                            $(window.frames[frameId].document).find("#userStatus").val(data.userStatus);
                            $(window.frames[frameId].document).find("#userStatus").attr("checked",(data.userStatus == 1 ? 'checked' : ''));
                            $(window.frames[frameId].document).find("#userRegisterTime").val(layui.util.toDateString(data.userRegisterTime,'yyyy-MM-dd HH:mm:ss'));
                            
//重新渲染
 iframeWindow.layui.form.render();

而子页面也得使用layui.form ，即加载form.

而做完上面几步之后，

发现checkbox的值没有刷新过来，所以得使用

iframeWindow.layui.form.render();重新渲染

 

2.这里由于checkbox未选中的时候，$("#editForm").serialize()接收不到checkbox的值.

所以在后台得做处理，或者在前端做处理

 

3.在table中，使用checkbox的时候，如果想点击然后更新后台数据的时候，那么建议使用lay-event，然后在field的里面加event

然后在用局部更新的时候，要使用obj.update{ field: '值'} 更新完之后，可能会遇到checkbox没有渲染的问题，然后导致checkbox消失，这时候，在后面进行重新渲染，即 form.render('checkbox');

例子:

<script type="text/html" id="checkboxstatus">
        <input type="checkbox" name="status" value="{{d.userStatus}}" lay-event="openStatus" lay-skin="switch" lay-text="开启|关闭" onclick="editUserStatus()" {{d.userStatus == 1 ? 'checked' : ''}}>
    </script>

 {field:'userStatus',title:'状态',width:120,sort:true,templet:'#checkboxstatus',event:'openStatus'},

table.on('tool(demo)',function (obj) { 

 if(obj.event == 'openStatus'){ //监听状态
                    obj.data.userStatus = obj.data.userStatus == 1 ? 0 : 1;
                    layer.msg('用户'+(obj.data.userStatus == 1 ? '开启' : '关闭' + '~'));
                    //发送ajax
                    var formData={
                        userId: data.userId,
                        userStatus:data.userStatus
                    };
                    $.post('/admin/user/editUserStatus', formData, function (data1) {

                    });
                    //更新表格数据
                    obj.update({
                        userStatus:data.userStatus
                    });
                    form.render('checkbox');
}