jquery 显示隐藏列

需求:展示到页面的数据列表可以让用户自己配置显示哪列

先去网上查了一些资料,实现这个效果可以用jquery,datatables。  相对来说datatables实现要更简单一些,我用的是jquery。   datatables官网  http://www.datatables.club/   

如果说只是单纯的在jsp页面使用写死的数据显示隐藏列不涉及java,这样是非常简单的,而我们需要实现的是用户第一次在页面配置完不显示某一列,那么下一次登录的时候该列自动不显示。

《jquery 显示隐藏列》

这个图是github上找的,效果大概是一样的,不过github上的这个项目只是纯前端的,有兴趣的可以看下https://github.com/sulishibaobei/customTable

 

一:从数据库查询列信息和数据列表

public String heihei(){
		//获取数据列表
		List dataList = service.getData();
		//从数据库获取列信息
        //获取的值是隐藏列的序号如: 1,3,8,9
        //用户id自己获取,后面的参数是个常量,每个table对应一个。
        //如果取到的是null,说明数据库没有这条数据,所以在service判断一下,是null则insert一条,insert col values(userid,'','caseTable');
		String columnInfo = service.getColumnInfo(userid,‘caseTable’);  

		//把datalist和columninfo放到modal传到前端   省略....
		
		return "";
	}

数据库表就三个字段, 

userid,columninfo,tablename

xxx,1,3,7,caseTable

二:跳转到前端页面后

$( function() {
    var col = $("#columnInfo").val();  //1,3,8    //上边定义一个隐藏的input来接收columninfo
    if(col != ""){
    	var colms = col.split();
    	for(var i in colms){
    		//把表头和响应的列隐藏     隐藏了第1,3,8列
    		$('.table tr th:nth-child('+colms[i]+')').hide();
    		$('.table tr td:nth-child('+colms[i]+')').hide();
    	}
    }
  } );

三:页面添加按钮,点击按钮弹出框,框里面是所有字段及复选框,循环追加值

function cliButton(){
  	//打开modal弹框
  	//省略....
  	//获取所有列名,拼接复选框追加到模态框里面
  	var tableTh = $(".table thead tr th");
  	var col = $("#columnInfo").val();
  	var colms = col.split();
  	var str = "";
  	var n = false;
  	for(var i = 1; i<tableTh.length+1;i++){
  		n=false;
  		for(var j in colms[j]){
  			if(i==colms[j]){
  				n = true;
  			}
  		}
  		if(n){
  			str+="<input type='checkbox' value='"+i+"'>" + $(".table thead tr th").eq(i-1).html();
  		}else{
  			str+="<input type='checkbox' checked value='"+i+"'>" + $(".table thead tr th").eq(i-1).html();
  		}
  	}
  	//modal是模态框,自己用jquery获取对象,懒不多写了
  	modal.html(str);
  }

四:接下来就是保存了,用户选择完需要保存的列,点击保存,通过ajax去数据库保存数据

function savaColumn(){
  	var spStr = "";
  	var cheStr = "";
  	$("#colModel input:checkbox").each(function(){ //1,7,
  		if(!$(this).prop("checked")){
  			spStr += $(this).val() + ",";
  		}
  		if($(this).prop("checked")){
  			cheStr += $(this).val() + ",";
  		}
  	});
  	spStr = spStr.substr(0,spStr.length-1);//1,7
  	cheStr = cheStr.substr(0,cheStr.length-1);
  	//ajax保存
  	$.ajax({
  		url:"",
  		data:{columnStr:spStr,tableName:'caseTable'},
  		type:"post",
  		dataType:"text",
  		success:function(data){
  			//关闭modal
  			//自己写。。
  			//该显示的显示,该隐藏的隐藏
  			var colms = spStr.split();
  			var checolums = cheStr.split();
	    	for(var i in colms){
	    		//把表头和响应的列隐藏     隐藏了第1,7列
	    		$('.table tr th:nth-child('+colms[i]+')').hide();
	    		$('.table tr td:nth-child('+colms[i]+')').hide();
	    	}
	    	for(var j in checolums){
	    		$('.table tr th:nth-child('+checolums[j]+')').show();
	    		$('.table tr td:nth-child('+checolums[j]+')').show();
	    	}
  		}
  	})
  }

五:数据库保存的java端就不写了,就是往数据库insert一下

开发是在公司电脑上开发的,代码拷不出来,以上纯手打。这只是提供了一个大概的思路,有了思路还怕敲不出代码吗?

 

 

    原文作者:人间枝头各自乘流
    原文地址: https://blog.csdn.net/Breaking_xu/article/details/87775372
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞