• 2024-12-14
宇哥博客 前端开发 table自定义表格,筛选列指定列显示/隐藏

table自定义表格,筛选列指定列显示/隐藏

之前发布过文章 xm-select下拉多选框,自定义按钮样式 http://www.ygbks.com/4017.html ,自定义按钮样式,下面继续加上自定义表格。

完整代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <!-- layui css -->
    <!--    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />-->
        <!-- layui js -->
 <!--       <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>-->
        <!-- 下载地址 https://gitee.com/maplemei/xm-select/attach_files/591517/download/xm-select-v1.2.2.zip -->
        <script src="https://maplemei.gitee.io/xm-select/xm-select.js" type="text/javascript" charset="utf-8"></script>
		<style>
			xm-select > .xm-icon{
				display: none;
			}
			xm-select > .xm-label{
				display: none;
			}
			
			.btn1{
				background-color: #E74A33;
				text-align: center;
				color: #fff;
				border-radius: 5px;

			}
		</style>
    </head>
    <body>
	<div style="margin: 50px;width: 400px;">
		<div>下拉框多选</div>

         <div id="demo1" style="width: 70px;float: right;"></div>


		<div>
			<table border="1px solid #ccc" cellspacing="0" cellpadding="0" id="table1">
				<tr id="table_title">
					<td data-s="1" data-v="" data-disabled="1">姓名</td>
					<td data-s="1" data-v="">年龄</td>
					<td data-s="1" data-v="">性别</td>
					<td data-s="1" data-v="" style="display: none;">出生日期</td>
				</tr>

				<tr>
					<td>张三</td>
					<td>13</td>
					<td>男</td>
					<td style="display: none;">1999-12-12</td>
				</tr>
				<tr>
					<td>李四</td>
					<td>16</td>
					<td>女</td>
					<td style="display: none;">1990-1-12</td>
				</tr>
				<tr>
					<td>王五</td>
					<td>11</td>
					<td>男</td>
					<td style="display: none;">1997-1-11</td>
				</tr>
			</table>
		</div>
	</div>
        	
	<script>
		
		 var options = {
				el: '#demo1',
				name: 'xmselectName',//表单的name属性
				//layVerify: 'required',//必填项
				//layVerType: 'tips',//提示类型 同layui
				tips: '',
				toolbar: {//工具条,全选,清空,反选,自定义
					show: false,
					list: [ 
						'ALL', 
						'CLEAR', 
						'REVERSE',
						{
							name: '自定义',
							icon: 'el-icon-star-off',
							method(data){
								alert('我是自定义的');
							}
						} 
					]
				},
				style: {
					//width: '50px',
					border: 'none'
				},
				theme: {
					color: '#E74A33',
				},
				data: [],
				//initValue: ['shuiguo','shucai'],//默认初始化,也可以数据中selected属性
				//language: 'zn',//语言包
				//filterable: true,//搜索功能
				//autoRow: true,//选项过多,自动换行
				// repeat: true,//是否支持重复选择
				//max: 2,//最多选择2个
				// template({ item, sels, name, value }){
				//    //template:自定义下拉框的模板
				//	//item.name  + 
				//     return '<span style="position: absolute; right: 10px; color: #8799a3">'+value+'</span>' 
				// },
				on: function(data){
					$('#table1').find('tr').find('td').hide();//先全部隐藏
					console.log('已选择=', data.arr);
					let arr = data.arr;
					for(var j=0;j<arr.length;j++){
						let v = arr[j].value;
						$('#table1').find('tr').find('td:eq('+v+')').show();
					}
				},
				done: function(){
					console.log('创建完成');
					$('#demo1 xm-select').append('<div class="btn1">筛选列</div>');
				}
		};
		var demo1 = xmSelect.render(options)
		setTimeout(function(){
			//假设data是ajax 异步获取的
			var data11 =[
				//selected属性可以初始化下拉框
				{name: '姓名', value: '1', selected:true},
				{name: '年龄', value: '2', disabled: true},
				{name: '性别', value: '3'},
				{name: '职位', value: '4'},
				{name: '出生日期', value: '5'},
			];

			//table表头给个序号
			$('#table_title td').each(function(index){
				$(this).attr('data-v', index);
			});
			
			let data=[];
			$('#table_title td').each(function(){
				let select_state = false;
				let disabled_state = false;
				if($(this).is(':visible')){
					select_state = true;
				}
				if($(this).attr('data-disabled') == '1'){
					disabled_state = true;
				}
				if($(this).attr('data-s') == '1'){
					data.push({
						name: $(this).html(),
						value: $(this).attr('data-v'),
						selected: select_state,
						disabled: disabled_state
					});
				}
			});

			//模拟通过ajax 获取json数据,异步更新多选下拉框的值
			demo1.update({data: data})
		},100);
	</script>  
    </body>
</html>

效果图:

筛选列-1
筛选列-2
本文来自网络,不代表本站立场,转载请注明出处。http://www.ygbks.com/4028.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

返回顶部