layui-checkbox ,遇到的问题

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

在前面覆盖掉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');

例子:



 {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');
}

 

你可能感兴趣的:(layui)