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

zz__zz13

已于 2022-08-30 20:43:02 修改

阅读量3.1k

点赞数 3

分类专栏： layui 文章标签： javascript 前端 jquery

于 2022-08-30 20:40:38 首次发布

本文链接：https://blog.csdn.net/qq_34802936/article/details/126610394

版权

layui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

自定义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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../public/static/public/layui/css/layui.css">
		<title></title>
	</head>
	<body>
		<script src="../public/static/public/layui/layui.js"></script>
		<script src="../public/static/jquery/2.0.0/jquery.min.js"></script>
		<table class="layui-hide" id="testLeft" lay-filter='testLeft1'></table>
	</body>
	<script>
		layui.use('table',function(){
			var $=layui.jquery,
			table=layui.table;
			var cols= [[ //表头
					{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
					,{field: 'username', title: '用户名', width:80}
					,{field: 'sex', title: '性别', width:80, sort: true}
					,{field: 'city', title: '城市', width:80} 
					,{field: 'sign', title: '签名', width: 177}
					,{field: 'experience', title: '积分', width: 80, sort: true}
					,{field: 'score', title: '评分', width: 80, sort: true}
					,{field: 'classify', title: '职业', width: 80}
					,{field: 'wealth', title: '财富', width: 135, sort: true}
					]];
			var tableIns1=table.render({
				id:'tab',
			    elem: '#testLeft',
			    url: '',
			    page: true,
			    even: false,
			    toolbar:false,
			    height: 'full',
			    limit: 99999,
			   
			    cols: cols,
			    parseData: function(res){ //res 即为原始返回的数据
			    	 
			       console.log('res',res);
			    },
			    done:function(res,curr,count){
					console.log('res1',res);
					console.log('curr',curr);
					console.log('count',count);
				}
			})
		});
	</script>
</html>

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='<form class="layui-form" style="" onsubmit="return false;"><div class="layui-input-inline" style="width: 100px;"><select name="fdhStatus" lay-filter="fdhStatus1">'
						+'<option value="">性别</option>'
						+'<option value="1">男</option>'
						+'<option value="0">女</option>'
						selHtml+='</select></div></form>';
						
						
						$(this).find('th[data-field="sex"]').find('div').css('overflow','unset');
						$(this).find('th[data-field="sex"]').find('div').append(selHtml);
				
						form.render('select');

样式：

<style>
			th .layui-table-cell{
				text-align: center;
			}
			.layui-table-header{
				overflow: visible;
			}
		</style>

在这里插入图片描述

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<userArr.length;x++){
					  if(userArr[x].sex==xingbie1){
						  lastData1.push(userArr[x]);
					  }
					}
					lastData=lastData1;
				}else{
					lastData=data;
				}
				
				tableIns1.reload({
					id:'tab',
					elem: '#testLeft',
					url: './tabletest.json',
					page: true,
					even: false,
					toolbar:false,
					height: 'full',
					limit: 9999,
								   
					cols: cols,
					parseData: function(res){ //res 即为原始返回的数据
						 
					   console.log('res',res);
					   if(res.code==1){
						  
					   }
					   return {
						   "code":res.code,
						   "msg":res.msg,
						   "count":res.count,
						   "data":lastData
					   };
					   
					},
					done:function(res,curr,count){
						console.log('res1',res);
						console.log('curr',curr);
						console.log('count',count);
						$('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();
							
							
							var selHtml='<form class="layui-form" style="" onsubmit="return false;"><div class="layui-input-inline" style="width: 100px;"><select name="xingbie" lay-filter="xingbie1">'
							+'<option value="">性别</option>';
							if(sexvalue==""){
								selHtml+='<option value="男">男</option>'
								+'<option value="女">女</option>'
							}else if(sexvalue=='女'){
								selHtml+='<option value="男">男</option>'
								+'<option value="女" selected>女</option>'
							}else if(sexvalue=='男'){
								selHtml+='<option value="男" selected>男</option>'
								+'<option value="女">女</option>'
							}
							
							selHtml+='</select></div></form>';
							
							
							$(this).find('th[data-field="sex"]').find('div').css('overflow','unset')
							$(this).find('th[data-field="sex"]').find('div').append(selHtml);
							
							form.render('select'); 
							
						});
					}
				});
			}

在这里插入图片描述