自定义layui-table表头，表头添加下拉框

注意事项

1.layui-table中表头和表内容是两个table

2.layui-table中定义表头是使用[[ ]]而不是[],不然无法整整显示

3.select控件需要放在form中，并且要对form进行render渲染后才能正常显示

4.table表头和表内容没对齐，检查一下col中是否有多余的逗号

5.具体操作

1.导入layui.js和layui.css

2.引入layui-table

3. 使用假数据

layui-table官方示例数据下载

4.展示结果

5.给性别这一列添加一个下拉选择的功能

5.1 找到“性别”这一列的表头

$('body').find('.layui-table').eq(0).find("tr").each(function(index,val){
						console.log('$(this)',$(this).find('th[data-field="sex"]'));
})

5.2 把这个表头的样式清空

$('body').find('.layui-table').eq(0).find("tr").each(function(index,val){
						console.log('$(this)',$(this).find('th[data-field="sex"]'))
						$(this).find('th[data-field="sex"]').find('div').eq(0).empty();
})

5.3 将下拉控件添加到表头

var selHtml='
'
						+'性别'
						+'男'
						+'女'
						selHtml+='
';
						
						
						$(this).find('th[data-field="sex"]').find('div').css('overflow','unset');
						$(this).find('th[data-field="sex"]').find('div').append(selHtml);
				
						form.render('select'); 

样式：

5.4 添加监听事件

var sexvalue='';//获取选中的值
			form.on('select(xingbie1)', function(data){
				sexvalue=data.value;
				console.log('sexvalue',sexvalue);
				updateTable(userArr);
			});

刷新函数

			function updateTable(data){
				var checkOldarr=[];
				if(sexvalue!=''){
					checkOldarr.push(sexvalue);
				}
				var lastData=[];
				if(checkOldarr.length==1){
					var xingbie1=checkOldarr[0];
					console.log('xingbie1',xingbie1);
					var lastData1=[];
					for(var x=0;x性别';
							if(sexvalue==""){
								selHtml+='男'
								+'女'
							}else if(sexvalue=='女'){
								selHtml+='男'
								+'女'
							}else if(sexvalue=='男'){
								selHtml+='男'
								+'女'
							}
							
							selHtml+='

'; $(this).find('th[data-field="sex"]').find('div').css('overflow','unset') $(this).find('th[data-field="sex"]').find('div').append(selHtml); form.render('select'); }); } }); }