bootstrap的columns属性如何根据条件进行隐藏或展示-优快云博客

这篇博客主要介绍了在Bootstrap表格中如何根据条件动态隐藏或展示columns的field属性。通过JavaScript实现点击事件来切换column的显示状态，使用`bootstrapTable('showColumn', 'id')`来展示指定列，`bootstrapTable('hideColumn', 'id')`来隐藏指定列，操作简单易记。" 7478357,1275188,VB编程：求解100以内素数之和,"['VB编程', '算法实现', '素数判断', '错误排查']

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

其实这个功能特简单，是我自己想复杂了，翻了很多资料，最后靠运气写出来了~~~写出来后，希望自己也能记住，以后有用到，能第一时间找到，废话不多说，进入正题：

首先展示一下功能：

当columns里的field属性隐藏时：

当columns里的field属性展示时：

js相关代码(展示table的JS)：

function load() {
   $('#exampleTable')
         .bootstrapTable(
               {
                  method : 'get', // 服务器数据的请求方式 get or post
                  url : ctx+prefix + "/list", // 服务器数据的加载地址
               // showRefresh : true,
               // showToggle : true,
               // showColumns : true,
                  iconSize : 'outline',
                  toolbar : '#exampleToolbar',
                  striped : true, // 设置为true会有隔行变色效果
                  dataType : "json", // 服务器返回的数据类型
                  pagination : true, // 设置为true会在底部显示分页条
                  // queryParamsType : "limit",
                  // //设置为limit则会发送符合RESTFull格式的参数
                  singleSelect : false, // 设置为true将禁止多选
                  // contentType : "application/x-www-form-urlencoded",
                  // //发送到服务器的数据编码类型
                  pageSize : 10, // 如果设置了分页，每页数据条数
                  pageNumber : 1, // 如果设置了分布，首页页码
                  //search : true, // 是否显示搜索框
                  showColumns : false, // 是否显示内容下拉框（选择显示的列）
                  sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"

                  queryParams : function(params) {
                     return {
                        //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                        limit: params.limit,
                        offset:params.offset,
                           menu:$("#homeId").val(),
                                menu1:$("#homeId1").val(),
                                menu2:$("#homeId2").val(),
                                name:$("#searchName").val(),
                                email:$("#searchName").val(),
                          // username:$('#searchName').val()
                     };
                  },
                  // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                  // queryParamsType = 'limit' ,返回参数必须包含
                  // limit, offset, search, sort, order 否则, 需要包含:
                  // pageSize, pageNumber, searchText, sortName,
                  // sortOrder.
                  // 返回false将会终止请求


                  columns : [

                        /*{
                           checkbox : true
                        },*/
                                                /*{
                           field : 'userId', 
                           title : '序列号'
                        },*/
                                                {
                           field : 'username',
                           title : '客服名' ,
                                  formatter : function(value, row, index) {
                                  if(row.serverPhotoPath == null){
                                   var url = '<div style="float:left;text-align:center; line-height:30px;position: relative;"><img  style="border-radius:25%" width="30" height="30" src="'+row.serverDefaultPhotoPath+'"><span style="position: absolute;width:30px;font-size: 15px;left:0;">'+row.username.charAt(0)+'</span>'+
                              '<a οnclick=enterInto(&quot;'+row.userId+'&quot;)>'+'&nbsp;&nbsp;'+row.username+'</a></div>';
                                  }else{
                                 var url = '<image style="height: 30px;width: 30px; border-radius:25%" src="'+row.serverPhotoPath+'"></image>'+'&nbsp;&nbsp;'
                            +'<a οnclick=enterInto(&quot;'+row.userId+'&quot;)>'+'&nbsp;&nbsp;'+row.username+'</a>';
                                   }
                                    return url;
                                  }
                        },
                                                /*{
                           field : 'name', 
                           title : '全名' 
                        },
                                                {
                           field : 'password', 
                           title : '密码' 
                        },
                                                {
                           field : 'deptId', 
                           title : '' 
                        },*/
                                                {
                           field : 'email', 
                           title : '邮箱' 
                        },
                                                /*{
                           field : 'fixPhone', 
                           title : '电话号码' 
                        },
                                                {
                           field : 'mobile', 
                           title : '手机号' 
                        },*/
                                                /*{
                           field : 'serviceType', 
                           title : '客服类型(0：全职；1：临时)',

                        },*/
                                                /*{
                           field : 'userIdCreate', 
                           title : '创建用户id' 
                        },
                                                {
                           field : 'gmtCreate', 
                           title : '创建时间' 
                        },*/
                            {
                                field : 'deadLine',
                                title : '最后修改时间',
                                hover : function(){
                                    var modified = '<div style="display:block;position: fixed;" data-toggle="tooltip" title="this is yu xiaolei"><span >row.gmtModified</span></div>';
                                return modified;
                                }
                            },

                                                /*{
                           field : 'gmtModified', 
                           title : '最后修改时间'
                        },*//*
                                                {
                           field : 'sex', 
                           title : '性别' 
                        },*/
                                             /* {
                           field : 'timeZone', 
                           title : '时区时间' 
                        },*/
                                                /*{
                           field : 'picId', 
                           title : '' 
                        },
                                                {
                           field : 'signature', 
                           title : '签名' 
                        },
                                                {
                           field : 'orderScope', 
                           title : '工单范围' 
                        },
                                                {
                           field : 'serviceRole', 
                           title : '客服角色' 
                        },
                                                {
                           field : 'groupAccess', 
                           title : '组访问' 
                        },
                                                {
                           field : 'duty', 
                           title : '职务' 
                        },*/

                                                {
                           title : '操作',
                           field : 'id',
                           align : 'center',
                                    /* visible: true,
                                      width: fixWidth(0.1),*/
                           formatter : function(value, row, index) {
                                       /* var abcds = row.sex;
                                        alert(abcds.get(0));
                                        if (abcds ==12){

                                        };*/
                                       /* getCenterJurisdiction(row.sex);*/
                              var e = '<a class="btn btn-primary btn-sm '+s_edit_h+'" href="#" mce_href="#" title="编辑" οnclick="edit(\''
                                    + row.userId
                                    + '\')"><i class="fa fa-edit"></i></a> ';
                              var d = '<a class="btn btn-warning btn-sm '+s_remove_h+'" href="#" title="删除"  mce_href="#" οnclick="remove(\''
                                    + row.userId
                                    + '\')"><i class="fa fa-remove"></i></a> ';

                                        var g = '<a class="btn btn-success btn-sm '+s_recovery_h+'" href="#" title="恢复删除"  mce_href="#" οnclick="recovery(\''
                                            + row.userId
                                            + '\')"><i class="fa fa-share-square"></i></a> ';

                              var f = '<a class="btn btn-success btn-sm'+s_resetPwd_h+'" href="#" title="备用"  mce_href="#" οnclick="resetPwd(\''
                                    + row.userId
                                    + '\')"><i class="fa fa-share-square"></i></a> ';

                              return e + d + g ;
                           }
                        } ]
               });
}

js相关代码(点击动态卡显示判断条件展示想对应的columns里的field属性)：

function getFullTime(){
    $('#exampleTable').bootstrapTable('showColumn', 'id');
    $('#homeId1').val(4);
    $('#homeId2').val(4);
    $('#homeId').val(0);
    reLoad();
    s_recovery_h = 'hidden';
    s_edit_h = '';
    s_remove_h = '';
}

$('#exampleTable').bootstrapTable('showColumn', 'id');就是展示操作属性

js相关代码(初始化隐藏对应的columns里的field属性)：

$(function() {
   load();
    $('#exampleTable').bootstrapTable('hideColumn', 'id');
    s_recovery_h = 'hidden';
    s_edit_h = 'hidden';
    s_remove_h = 'hidden';
   $('[data-toggle="tooltip"]').tooltip();

});