不得不说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');
}