layui表格数据复选框回显设置

layui2.3版本,本身并不带有复选框回显功能,那么需要从源头解决此事,F12代码调试,找到与复选框关联的地方发现:
在这里插入图片描述

我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显。
layui这里有一个坑,设置class属性后会造成二次点击效果,千万不要手动修改class属性,那么应该怎么办呢?

每次**点击**其中一个复选框时都会增加一个class属性,第二次点击又会给删除:

table.render({
	elem: '#LAY_table_topic',
	url: '/admin/topicHandle/getTopicList',
	height: 600,
	done:function(result,currPage,count){//数据回调方法
		var data = result.data;
	
		data.forEach(function(value, key) {
			//这里必须选择点击方法,不知为何添加layui-form-checked class属性会造成二次点击(即下次点击必须点击两下才能生效)bug,
			//所有类似的手动修改class貌似都会造成二次效果
			if(value.read_total > 10){
				$("div[lay-id='topicList'] td .layui-form-checkbox").eq(key).click();
			}
		})
	},
	cols: [[
		{ type:'checkbox'},
		{ field:'id', title: '话题ID', width: 80 },
		{ field:'image_url', title: '图片', width: 100 , templet:"#showPic"},
		{ field:'content', title: '话题内容', width: 260 },
		{ field:'read_total', title: '阅读次数', width: 100 , sort:true},
	]],
	id: 'topicList',
	page: true
});

猜你喜欢

转载自blog.csdn.net/qq_38529889/article/details/84104028