Bootstrap table 单击列标题或表头事件控制多列的显示隐藏

最新推荐文章于 2023-04-27 14:00:22 发布

poetry-code

最新推荐文章于 2023-04-27 14:00:22 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap 文章标签： bootstrap table 单击列标题事件显示隐藏列

本文链接：https://blog.youkuaiyun.com/weixin_45237517/article/details/95631546

Bootstrap 专栏收录该内容

9 篇文章

订阅专栏

博客指出Bootstrap Table现有API未开放列标题单击事件，为实现此功能，可利用jQuery获取表格表头。以点击列标题控制右侧两列显示隐藏为例，介绍了表格列初始化代码、添加表头点击事件等步骤，还提及为提升体验添加鼠标移到列标题的显示事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

众所周知，bootstrap table 的现有api中，对列表的单击事件仅支持对行的单击和对单元格的单击。而对表头的操作也只有点击列标题排序。并没有开放对某列标题的单击事件，即列标题是不可点击状态。

为了实现对列标题的单击而触发相应的操作，这里可以利用jquery对整个document的获取来找到bootstrap生成的表格的表头<th>标签

步骤说明：

如下图的表格中，现需求为：点击“显示/隐藏”列标题，控制右侧两列的显示和隐藏。

在这里插入图片描述

表格列的初始化代码：

/**
 * 初始化表格的列
 */
Projecttype.initColumn = function () {
    return [
        {checkbox:true, halign:'center',align:"center",width: 50},
        {title: '序号',align:"center" ,halign:'center',width:50 ,formatter: function (value, row, index) {return (Projecttype.pageNumber-1)*Projecttype.pageSize +1 +index ;}},
        {title: '显示/隐藏', field: 'show_hide', align: 'center',halign:'center',width:50},
        {title: '项目所属类别', field: 'projectType', align: 'center',halign:'center'},
        {title: '备注', field: 'note', align: 'center',halign:'center'},
        {title: '登记人', field: 'createUser', align: 'center',halign:'center'},
        {title: '登记日期', field: 'createDate', align: 'center',halign:'center'}
    ];
};

添加对表头的点击事件

// 表头点击事件
var show_hide_flag = "show";// 点击/隐藏标识符
$(document).on("click","th",function() {
    var field = $(this).attr("data-field");// 获取表格标题的data-field属性
    if ("show_hide" == field){
        if ("show" == show_hide_flag){
            $('#ProjecttypeTable').bootstrapTable('hideColumn','projectType');
            $('#ProjecttypeTable').bootstrapTable('hideColumn','note');
            show_hide_flag = "hide";
        }else{
            $('#ProjecttypeTable').bootstrapTable('showColumn','projectType');
            $('#ProjecttypeTable').bootstrapTable('showColumn','note');
            show_hide_flag = "show";
        }

    }
})

说明：var field = $(this).attr(“data-field”);
获取的field即为添加列时的field:'show_hide’属性

为了提高用户体验，在鼠标移到列标题时，给出小手显示。在初始化table的代码中添加如下事件（该事件的作用为：在所有其他事件执行后，都会执行此事件。之前试过用onLoadSuccess事件，但小手的显示会出问题）

onAll:function(){
// 在所有表格的事件操作后都对下列需要显示/隐藏的表头添加“小手”样式
var ths = $(document).find('th');
for (let i = 0; i <ths.length ; i++) {
    if ($(ths[i]).attr("data-field") == 'show_hide'){
        $(ths[i]).find(".th-inner").attr('style','cursor:pointer');
    }
}