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>

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

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

element ui table show-overflow-tooltip自定义样式
element ui table show-overflow-tooltip自定义样式在使用element ui table 组件时,表格td内容太多可设置show-overflow-tooltip ...
jQuery获取隐藏文本域
[html] view plaincopyprint? //jquery获取隐藏域 <style type="text/css"> div{ width: ...
js隐藏html页面元素高度,如何使用jQuery获取隐藏元素的高度？
HTML元素可以在jquery hide()函数的帮助下隐藏,或者也可以通过在css中使设置visibility:hidden来轻松隐藏.那么如何使用jquery找到这个隐藏元素的高度?下面本篇文章就 ...
Pandas处理dataframe的文本数据列：使用str属性获取数据列的字符串方法类、split函数基于指定分隔符拆分数据列的内容为列表、使用len计算每个列表的长度
Pandas处理dataframe的文本数据列:使用str属性获取数据列的字符串方法类.split函数基于指定分隔符拆分数据列的内容为列表.使用len计算每个列表的长度目录
bootstrap table中的行tr标签设置display:block后行样式错乱问题
在table中,如果在tr加上display样式时,会发生错乱如下: <tr style="display: block;" statusCode="2" ...
Bootstrap Table 中文文档（完整翻译版）
表格参数: 名称标签类型默认描述 - data-toggle String 'table' 不用写 JavaScript 直接启用表格. classes data-classes String ...
bootstrap table中文文档
转载自:https://blog.csdn.net/rickiyeat/article/details/56483577 表格参数: 名称标签类型默认描述 - data-toggle Stri ...
Element-UI table表格自定义样式
Element-UI中关于table表格的样式操作自定义列的内容: 需求:在表格最后一栏添加操作按钮通过slot-scope="scope"添加操作按钮,这是专门为我们提供的插 ...
BootStrap table的各种样式效果
Bootstrap 表格类样式 ☑ .table:基础表格,为任意 <table> 添加基本样式 (只有横向分隔线) ☑ .table-striped:斑马线表格 ☑ .table- ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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