layui中如何隐藏table的列-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

layui中如何隐藏table的列

layui中如何隐藏table数据表格的列?相信大部分人都还没学会这个技能,为了让大家学会,给大家总结了以下内容,话不多说,一起往下看吧。

正安网站建设公司创新互联,正安网站设计制作,有大型网站制作公司丰富经验。已为正安1000多家提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱,请找那个售后服务好的正安做网站的公司定做!

现在国内的模板,也就layui一家独大了,其中的数据表格功能强大,但我不会用python或者django拼接json,输出发送给数据表格,那只好用笨办法,循环遍历吧。

数据表格中保留id列,是为了编辑修改的时候获取改行数据的id值,但又不需要展示出来,所以需要隐藏。

id列的代码是:

, cols: [[ //标题栏
                    {field: 'data_id', title: 'ID', width: 50,style:'display:none;'}

这个代码就可以把下面的id列的值隐藏起来,但标题栏的id还在,那么,问题来了,就用强大的jquery解决呗。

 $('table.layui-table thead tr th:eq(0)').addClass('layui-hide');

当有多个表格的时候,发现上面的代码只能把第一个表的第一列标题栏给隐藏起来,如果一个页面有多个表格需要用:

 $('table.layui-table thead tr th:nth-child(1)').addClass('layui-hide');

还有问题,如果表格中有选择框,默认会占据表格第一列,这个时候,上面的代码就出错了。只能推到,使用第一个代码,一个一个的选择。注意,layui的数据表格,自动会生成5个表格:

layui中如何隐藏table的列

我当前页面只有两个表格,一个常规,一个有选择框,搜索发现里面竟然有10个
 $('table:eq(1).layui-table thead tr th:eq(0)').addClass('layui-hide');
$('table:eq(6).layui-table thead tr th:eq(1)').addClass('layui-hide');

以上就是layui中隐藏table数据表格的列的方法,看完之后是否有所收获呢?如果想了解更多相关内容,欢迎关注创新互联行业资讯!


名称栏目:layui中如何隐藏table的列
URL标题:http://kswsj.cn/article/jdeije.html