jquery 显示隐藏列

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

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

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

这个图是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一下

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