1. 程式人生 > >layui表格資料複選框回顯設定

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