bootstrap table 中自定义样式 隐藏一列，能够同过jQuery获取隐藏列

做项目的时候准备用bootstrap-table来遍历表格，后续操作需要传主键ID，但又不想ID在表格中显示

于是第一次写的代码是下面这段。用的是visible:false,（这个的作用是将列隐藏）

$(function(){
		$('#table').bootstrapTable({
		    url: 'select',
		    cache:false,
		    pagination: true, 
		    pageSize: 5,  
		    columns: [{
		        field: 'id',
		        title: 'Item ID',
		        visible:false,//隐藏此列 
		        
		    }, {
		        field: 'name',
		        title: 'Item Name',
		        
                }
		    }, {
		        field: 'price',
		        title: 'Item Price',
		       
		    }, {
		        field: '',
		        title: 'Button',
		     
		        formatter:function(value,row,index){
		        	return "<a href='' class='btn btn-danger' οnclick='delMovieName(this)' data-toggle='modal' data-target='#DelMovie'> 删除</a>";
		        },		        
		    },  
		    ]		
		}); 
	})

这样写完之后发现，当我想要通过onclick获取某行的ID时，无法使用西面这种方法，这种方法只能获取到非隐藏的方法

var a1=$(a).parent().parent().children('td').eq(1).text();

于是我找了API在里面发现了 getHiddenColumns,这个方法，当时很激动但是经过尝试发现并不能成功，当然估计是我没有用好，不过无论如何只能继续想办法了。于是我想是不是

visible:false,

对getHiddenColumns,这个方法不支持。于是我换了一种隐藏方式如下,当然还是获取不到在这里列出来供大家参考

$('#table').bootstrapTable('hideColumn', 'id');

$(function(){
		$('#table').bootstrapTable({
		    url: 'select',
		    cache:false,
		    pagination: true, 
		    pageSize: 5,    
		    columns: [{
		        field: 'id',
		        title: 'Item ID',  
		        
		    }, {
		        field: 'name',
		        title: 'Item Name',
		        
                }
		    }, {
		        field: 'price',
		        title: 'Item Price',
		       
		    }, {
		        field: '',
		        title: 'Button',
		     
		        formatter:function(value,row,index){
		        	return "<a href='' class='btn btn-danger' οnclick='delMovieName(this)' data-toggle='modal' data-target='#DelMovie'> 删除</a>";
		        },
		        
		    }, 		    
		    ]		
		}); 
		 $('#table').bootstrapTable('hideColumn', 'id');
		 })

最后我想到了bootstrap-table中能不能设置列表的CSS样式，这样设成display：none就可以隐藏并且可以获取到了我找了下API

发现了下面这个属性

cellStyle

于是我进行了改进是下面这段代码，这次可以正常获取到用户ID了，但是却出了另外一个问题如下面的图所示，只隐藏了列中的值但是表头的值并没有隐藏。

$(function(){
		$('#table').bootstrapTable({
		    url: 'select',
		    cache:false,
		    pagination: true, 
		    pageSize: 5,
		    
		    
		    columns: [{
		        field: 'id',
		        title: 'Item ID',
		        cellStyle: function (row, index) {
		             var style = {};             
		                 style={css:{'display':'none'}};                
		             return style;
		         } 
		       /*  更新部分上面 */
		        
		    }, {
		        field: 'name',
		        title: 'Item Name',
		        
                }
		    }, {
		        field: 'price',
		        title: 'Item Price',
		       
		    }, {
		        field: '',
		        title: 'Button',
		     
		        formatter:function(value,row,index){
		        	return "<a href='' class='btn btn-danger' οnclick='delMovieName(this)' data-toggle='modal' data-target='#DelMovie'> 删除</a>";
		        },
		        
		    }, 
		    
		    ]
		
		}); 
	})

可以发现表头无法取消，在API里并没有针对表头更改属性的方法，最后我采用的方法是想用table的id获得表头然后再将其属性设置为隐藏，代码如下。加了

 $('#table').children().children().children('th').eq(0).css("display","none");

如下所示

$(function(){
 		$('#table').bootstrapTable({
		    url: 'select',
		    cache:false,
		    pagination: true, 
		    pageSize: 5,
		    
		    
		    columns: [{
		        field: 'id',
		        title: 'Item ID',
		        cellStyle: function (row, index) {
		             var style = {};             
		                 style={css:{'display':'none'}};                
		             return style;
		         } 
		      
		        
		    }, {
		        field: 'name',
		        title: 'Item Name',
		        
                }
		    }, {
		        field: 'price',
		        title: 'Item Price',
		       
		    }, {
		        field: '',
		        title: 'Button',
		     
		        formatter:function(value,row,index){
		        	return "<a href='' class='btn btn-danger' οnclick='delMovieName(this)' data-toggle='modal' data-target='#DelMovie'> 删除</a>";
		        },
		        
		    }, 
		    
		    ]
		
		}); 
		 $('#table').children().children().children('th').eq(0).css("display","none");//新增
	})

按钮onclick方法如下

function delMovieName(a){
		
		var a=$(a).parent().parent().children('td').eq(0).text();
		console.log(a);
	}

页面主体如下

<body>

	<table id="table">
		
	</table>
</body>

这点东西折磨了我好久，记录一下，希望有同样问题的朋友能够借鉴一二，如有问题欢迎留言。