启动时隐藏 bootstrap table 中的列

Question

我有以下 table，其中我使用 Bootstrap-table

<div class="row mystyle" >
    <div class="col-md-12">
        <table id="mytable"  data-row-style="rowStyle" class="table table-hover" id="table-pagination " 
               data-url="labels.json" 
               data-toggle="table"
               data-pagination="true"
               data-show-pagination-switch="true"
               data-sort-order="desc" 
               data-search="true"
               data-show-refresh="true" 
               data-show-columns="true"
               data-page-list="[10, 25, 50, 100, ALL]"                     
               >

            <thead>
                <tr>
                    <th data-field="customer.name" data-align="center" data-sortable="true">customer</th>
                    <th data-field="type" data-align="center" data-sortable="true">type</th>
                    <th data-field="description" data-align="center" data-sortable="true">description</th>
                    <th data-field="cutter" data-align="center" data-sortable="true">cutter</th> 
                    <th data-field="valid_s" data-align="center" data-sortable="true">valid</th>
                </tr>
            </thead>
        </table>
    </div>            
</div>

有没有办法定义在启动时隐藏哪些列？例如，我只想显示 customer 和 description 列。

Answer 1

您可以在您的 javascript 中使用 hideColumn 在就绪函数中执行此操作：

$(function(){
    var $table = $('#mytable');

    $table.bootstrapTable('hideColumn', 'type');
    $table.bootstrapTable('hideColumn', 'cutter');
    $table.bootstrapTable('hideColumn', 'valid_s');
});

然后如果你想给他们看你可以使用：

$(function(){
    var $table = $('#mytable');

    $table.bootstrapTable('showColumn', 'type');
    $table.bootstrapTable('showColumn', 'cutter');
    $table.bootstrapTable('showColumn', 'valid_s');
});

Answer 2

您可以使用 data-visible="false":

<thead>
    <tr>
        <th data-field="customer.name" data-align="center" data-sortable="true">customer</th>
        <th data-field="type" data-align="center" data-sortable="true" data-visible="false">type</th>
        <th data-field="description" data-align="center" data-sortable="true">description</th>
        <th data-field="cutter" data-align="center" data-sortable="true" data-visible="false">cutter</th>
        <th data-field="valid_s" data-align="center" data-sortable="true" data-visible="false">valid</th>
    </tr>
</thead>

Answer 3

None 上面的答案对我有用，因为他们从 DOM 中删除了该列 - 但我必须将其保留在 DOM 中。我只想隐藏该列。

以下解决方案可以隐藏该列，但在 DOM 中：

例如。在 TH 上使用 data-class 属性，然后将其定义为隐藏：

<th class="col-xs-1" data-class='hidden' data-field="stargazers_count">Stars</th>

.hidden{
  display:none;
  visibility:hidden;
}

或者另一种选择是在 jQuery 中手动隐藏 Bootstrap-Table 的 onPostBody() 之后的 TD/TH。

Answer 4

您需要添加最后一行

<table id="mytable"  data-row-style="rowStyle" class="table table-hover" id="table-pagination " 
       data-url="labels.json" 
       data-toggle="table"
       data-pagination="true"
       data-show-pagination-switch="true"
       data-sort-order="desc" 
       data-search="true"
       data-show-refresh="true" 
       data-show-columns="true"
       data-page-list="[10, 25, 50, 100, ALL]"  
       showPaginationSwitch="false"        
       >

Answer 5

在做项目时遇到这个问题。 data-visible="false" 对我有用。然而，我并不担心它可以在 DOM 中阅读。我只需要一种使用 data-show-columns="true" 和 data-show_columns-toggle-all="true" 的方法，同时只显示 table.

中除 1 列以外的所有列

我找到了在加载时隐藏的正确组合，但允许用户通过单个复选框添加它或切换所有开关。

在我的 python 代码中（flask post MethodView on render）我构建了我的 JSON 对象来表示 table 数据，它只是在 SQLalchemy 上迭代结果对象。显然，如果需要，可以只构建一个 excluded_column_names 列表来执行 in 子句搜索（如果我愿意的话）。但在这种情况下，它现在只是一列。

<table class="mt-3"
        data-page-list="[10, 25, All]"
        data-page-size=10
        data-pagination="true"
        data-pagination-v-align="both"
        data-search="true"
        data-show-button-text="true"
        data-show-columns="true"
        data-show-columns-toggle-all="true"
        data-show-pagination-switch="true"
        data-show-toggle="true"
        data-sortable="true"
        data-toggle="table">
      <thead class="table-dark">
        <tr>
           {% for column_key in netcool_info[0].keys() %}
              <th data-field="{{ column_key }}" data-sortable="true" scope="col" {% if column_key == 'action_time' %} data-visible="false" {% endif %}>
                  {{ column_key | replace("_", " ") | title }}
              </th>
           {% endfor %}
        </tr>
      </thead>

在包含的示例中，仅查看顶部的 bootstrap-table 选项。不知道为什么我把它复制在那里，可能只是不好 cut/paste.

<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/slate/bootstrap.min.css" rel="stylesheet" integrity="sha384-G9YbB4o4U6WS4wCthMOpAeweY4gQJyyx0P3nZbEBHyz+AtNoeasfRChmek1C2iqV" crossorigin="anonymous">
  <script src="https://kit.fontawesome.com/a824a7cb67.js"></script>
  <link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
  <link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-shims.min.css" media="all">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
  <title>NNOC 360</title>
</head>

<body>
  <div class="container-fluid">
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#summary">Summary</a>
      </li>
    </ul>
    <div id="tabContent" class="tab-content">
      <div class="tab-pane fade show active" id="summary">
        <div class="accordion" id="netcoolAccordion">
          <div class="card">
            <div class="card-header" id="netcoolHeading">
              <div class="row">
                <div class="col-sm-6">
                  <h2 class="mb-0">
                    <button class="btn btn-block btn-link text-left text-white" type="button" data-toggle="collapse" data-target="#netcoolAlarms" aria-expanded="true" aria-controls="netcoolAlarms">
                                            Netcool Alarms
                                    </button>
                  </h2>
                </div>
                <div class="col-sm-6">
                  <form method="post" class="form-inline float-right">
                    <label for="netcoolFromDate">From:</label>
                    <input type="datetime-local" class="form-control-sm mb-2 mx-2" id="netcoolFromDate" value="2020-01-19T11:48" name="netcool_from_date">

                    <label for="netcoolToDate">To:</label>
                    <input type="datetime-local" class="form-control-sm mb-2 mx-2" id="netcoolToDate" value="2020-01-20T11:48" name="netcool_to_date">
                    <input type="hidden" value="688319" name="site_id_hidden">
                    <button type="submit" class="btn-md btn-success">Submit</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
          <div id="netcoolAlarms" class="bg-secondary text-white collapse show" aria-labelledby="netcoolHeading" data-parent="#netcoolAccordion" style="">

            <div class="bootstrap-table bootstrap4">
              <div class="fixed-table-toolbar">
                <div class="columns columns-right btn-group float-right"><button class="btn btn-secondary" type="button" name="paginationSwitch" aria-label="Pagination Switch" title="Hide/Show pagination">
        <i class="fa fa-caret-square-down" aria-hidden="true"></i>
        Hide pagination
        </button><button class="btn btn-secondary" type="button" name="toggle" aria-label="Toggle" title="Toggle">
        <i class="fa fa-toggle-off" aria-hidden="true"></i>
        Show card view
        </button>
                  <div class="keep-open btn-group" title="Columns">
                    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-label="Columns" title="Columns" aria-expanded="false">
        <i class="fa fa-th-list" aria-hidden="true"></i>
        Columns
        <span class="caret"></span>
        </button>
                    <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(129px, 48px, 0px);"><label class="dropdown-item"><input type="checkbox" class="toggle-all"> <span>Toggle all</span></label>
                      <div class="dropdown-divider"></div><label class="dropdown-item"><input type="checkbox" data-field="summary" value="0" checked="checked"> <span>
                                            Summary
                                        </span></label><label class="dropdown-item"><input type="checkbox" data-field="severity" value="1" checked="checked"> <span>
                                            Severity
                                        </span></label><label class="dropdown-item"><input type="checkbox" data-field="alarm_source" value="2" checked="checked"> <span>
                                            Alarm Source
                                        </span></label><label class="dropdown-item"><input type="checkbox" data-field="first_occurrence" value="3" checked="checked"> <span>
                                            First Occurrence
                                        </span></label><label class="dropdown-item"><input type="checkbox" data-field="last_occurrence" value="4" checked="checked"> <span>
                                            Last Occurrence
                                        </span></label><label class="dropdown-item"><input type="checkbox" data-field="toggle_count" value="5" checked="checked"> <span>
                                            Toggle Count
                                        </span></label><label class="dropdown-item"><input type="checkbox" data-field="ticket_number" value="6" checked="checked"> <span>
                                            Ticket Number
                                        </span></label><label class="dropdown-item"><input type="checkbox" data-field="mttr" value="7" checked="checked"> <span>
                                            Mttr
                                        </span></label><label class="dropdown-item"><input type="checkbox" data-field="callout_inst." value="8" checked="checked"> <span>
                                            Callout Inst.
                                        </span></label><label class="dropdown-item"><input type="checkbox" data-field="owner_uid" value="9" checked="checked"> <span>
                                            Owner Uid
                                        </span></label><label class="dropdown-item"><input type="checkbox" data-field="action_time" value="10"> <span>
                                            Action Time
                                        </span></label></div>
                  </div>
                </div>
                <div class="float-right search btn-group">
                  <input class="form-control search-input" type="text" placeholder="Search">
                </div>
              </div>
              <div class="fixed-table-pagination clearfix">
                <div class="float-left pagination-detail">
                  <span class="pagination-info">
      Showing 1 to 10 of 78 rows
      </span><span class="page-list"><span class="btn-group dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
        <span class="page-size">
        10
        </span>
                  <span class="caret"></span>
                  </button>
                  <div class="dropdown-menu"><a class="dropdown-item active" href="#">10</a><a class="dropdown-item " href="#">25</a><a class="dropdown-item " href="#">All</a></div>
                  </span> rows per page</span>
                </div>
                <div class="float-right pagination">
                  <ul class="pagination">
                    <li class="page-item page-pre"><a class="page-link" aria-label="previous page" href="javascript:void(0)">‹</a></li>
                    <li class="page-item active"><a class="page-link" aria-label="to page 1" href="javascript:void(0)">1</a></li>
                    <li class="page-item"><a class="page-link" aria-label="to page 2" href="javascript:void(0)">2</a></li>
                    <li class="page-item"><a class="page-link" aria-label="to page 3" href="javascript:void(0)">3</a></li>
                    <li class="page-item"><a class="page-link" aria-label="to page 4" href="javascript:void(0)">4</a></li>
                    <li class="page-item"><a class="page-link" aria-label="to page 5" href="javascript:void(0)">5</a></li>
                    <li class="page-item page-last-separator disabled"><a class="page-link" aria-label="" href="javascript:void(0)">...</a></li>
                    <li class="page-item"><a class="page-link" aria-label="to page 8" href="javascript:void(0)">8</a></li>
                    <li class="page-item page-next"><a class="page-link" aria-label="next page" href="javascript:void(0)">›</a></li>
                  </ul>
                </div>
              </div>
              <div class="fixed-table-container" style="padding-bottom: 0px;">
                <div class="fixed-table-header" style="display: none;">
                  <table></table>
                </div>
                <div class="fixed-table-body">
                  <div class="fixed-table-loading table table-bordered table-hover" style="top: 1px;">
                    <span class="loading-wrap">
      <span class="loading-text">Loading, please wait</span>
                    <span class="animation-wrap"><span class="animation-dot"></span></span>
                    </span>
                  </div>
                  <table class="mt-3 table table-bordered table-hover" data-page-list="[10, 25, All]" data-page-size="10" data-pagination="true" data-pagination-v-align="both" data-search="true" data-show-button-text="true" data-show-columns="true" data-show-columns-toggle-all="true"
                    data-show-pagination-switch="true" data-show-toggle="true" data-sortable="true" data-toggle="table">
                    <thead class="table-dark" style="">
                      <tr>
                        <th style="" data-field="summary">
                          <div class="th-inner sortable both">
                            Summary
                          </div>
                          <div class="fht-cell"></div>
                        </th>
                        <th style="" data-field="severity">
                          <div class="th-inner sortable both">
                            Severity
                          </div>
                          <div class="fht-cell"></div>
                        </th>
                        <th style="" data-field="alarm_source">
                          <div class="th-inner sortable both">
                            Alarm Source
                          </div>
                          <div class="fht-cell"></div>
                        </th>
                        <th style="" data-field="first_occurrence">
                          <div class="th-inner sortable both">
                            First Occurrence
                          </div>
                          <div class="fht-cell"></div>
                        </th>
                        <th style="" data-field="last_occurrence">
                          <div class="th-inner sortable both">
                            Last Occurrence
                          </div>
                          <div class="fht-cell"></div>
                        </th>
                        <th style="" data-field="toggle_count">
                          <div class="th-inner sortable both">
                            Toggle Count
                          </div>
                          <div class="fht-cell"></div>
                        </th>
                        <th style="" data-field="ticket_number">
                          <div class="th-inner sortable both">
                            Ticket Number
                          </div>
                          <div class="fht-cell"></div>
                        </th>
                        <th style="" data-field="mttr">
                          <div class="th-inner sortable both">
                            Mttr
                          </div>
                          <div class="fht-cell"></div>
                        </th>
                        <th style="" data-field="callout_inst.">
                          <div class="th-inner sortable both">
                            Callout Inst.
                          </div>
                          <div class="fht-cell"></div>
                        </th>
                        <th style="" data-field="owner_uid">
                          <div class="th-inner sortable both">
                            Owner Uid
                          </div>
                          <div class="fht-cell"></div>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr data-index="0">
                        <td style="">Provision Configuration NBI file updated MWE-ROANOKEPEORIA-688319-MINONK-688470</td>
                        <td style="">0</td>
                        <td style="">Roanoke - 688319</td>
                        <td style="">2020-01-20 06:58:39</td>
                        <td style="">2020-01-20 06:58:39</td>
                        <td style="">0</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">65534</td>
                      </tr>
                      <tr data-index="1">
                        <td style="">Provision Demodulator not locked MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
                        <td style="">0</td>
                        <td style="">Roanoke - 688319</td>
                        <td style="">2020-01-20 06:41:15</td>
                        <td style="">2020-01-20 06:41:15</td>
                        <td style="">0</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">65534</td>
                      </tr>
                      <tr data-index="2">
                        <td style="">Provision 10-6 BER threshold exceeded MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
                        <td style="">0</td>
                        <td style="">Roanoke - 688319</td>
                        <td style="">2020-01-20 06:41:26</td>
                        <td style="">2020-01-20 06:41:26</td>
                        <td style="">0</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">65534</td>
                      </tr>
                      <tr data-index="3">
                        <td style="">Provision Demodulator not locked MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
                        <td style="">0</td>
                        <td style="">Roanoke - 688319</td>
                        <td style="">2020-01-20 06:41:15</td>
                        <td style="">2020-01-20 06:41:15</td>
                        <td style="">0</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">65534</td>
                      </tr>
                      <tr data-index="4">
                        <td style="">Provision 10-6 BER threshold exceeded MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
                        <td style="">0</td>
                        <td style="">Roanoke - 688319</td>
                        <td style="">2020-01-20 06:41:26</td>
                        <td style="">2020-01-20 06:41:26</td>
                        <td style="">0</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">65534</td>
                      </tr>
                      <tr data-index="5">
                        <td style="">Provision Configuration NBI file updated MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
                        <td style="">0</td>
                        <td style="">Roanoke - 688319</td>
                        <td style="">2020-01-20 05:39:58</td>
                        <td style="">2020-01-20 05:39:58</td>
                        <td style="">0</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">65534</td>
                      </tr>
                      <tr data-index="6">
                        <td style="">Provision Configuration NBI file updated MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
                        <td style="">0</td>
                        <td style="">Roanoke - 688319</td>
                        <td style="">2020-01-20 05:39:58</td>
                        <td style="">2020-01-20 05:39:58</td>
                        <td style="">0</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">65534</td>
                      </tr>
                      <tr data-index="7">
                        <td style="">Provision 10-6 BER threshold exceeded MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
                        <td style="">0</td>
                        <td style="">Roanoke - 688319</td>
                        <td style="">2020-01-20 03:50:56</td>
                        <td style="">2020-01-20 03:50:56</td>
                        <td style="">0</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">65534</td>
                      </tr>
                      <tr data-index="8">
                        <td style="">Provision 10-6 BER threshold exceeded MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
                        <td style="">0</td>
                        <td style="">Roanoke - 688319</td>
                        <td style="">2020-01-20 03:50:56</td>
                        <td style="">2020-01-20 03:50:56</td>
                        <td style="">0</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">65534</td>
                      </tr>
                      <tr data-index="9">
                        <td style="">Provision 10-6 BER threshold exceeded MWE-ROANOKEPEORIA-688319-BENSON-688458</td>
                        <td style="">0</td>
                        <td style="">Roanoke - 688319</td>
                        <td style="">2020-01-20 02:28:40</td>
                        <td style="">2020-01-20 02:28:40</td>
                        <td style="">0</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">None</td>
                        <td style="">65534</td>
                      </tr>
                    </tbody>
                    <tfoot style="display: none;">
                      <tr></tr>
                    </tfoot>
                  </table>
                </div>
                <div class="fixed-table-footer">
                  <table>
                    <thead>
                      <tr></tr>
                    </thead>
                  </table>
                </div>
              </div>
              <div class="fixed-table-pagination">
                <div class="float-left pagination-detail">
                  <span class="pagination-info">
      Showing 1 to 10 of 78 rows
      </span><span class="page-list"><span class="btn-group dropdown dropup">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
        <span class="page-size">
        10
        </span>
                  <span class="caret"></span>
                  </button>
                  <div class="dropdown-menu"><a class="dropdown-item active" href="#">10</a><a class="dropdown-item " href="#">25</a><a class="dropdown-item " href="#">All</a></div>
                  </span> rows per page</span>
                </div>
                <div class="float-right pagination">
                  <ul class="pagination">
                    <li class="page-item page-pre"><a class="page-link" aria-label="previous page" href="javascript:void(0)">‹</a></li>
                    <li class="page-item active"><a class="page-link" aria-label="to page 1" href="javascript:void(0)">1</a></li>
                    <li class="page-item"><a class="page-link" aria-label="to page 2" href="javascript:void(0)">2</a></li>
                    <li class="page-item"><a class="page-link" aria-label="to page 3" href="javascript:void(0)">3</a></li>
                    <li class="page-item"><a class="page-link" aria-label="to page 4" href="javascript:void(0)">4</a></li>
                    <li class="page-item"><a class="page-link" aria-label="to page 5" href="javascript:void(0)">5</a></li>
                    <li class="page-item page-last-separator disabled"><a class="page-link" aria-label="" href="javascript:void(0)">...</a></li>
                    <li class="page-item"><a class="page-link" aria-label="to page 8" href="javascript:void(0)">8</a></li>
                    <li class="page-item page-next"><a class="page-link" aria-label="next page" href="javascript:void(0)">›</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="clearfix"></div>

          </div>
        </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>

</body>

</html>

Answer 6

请参阅文档中的以下示例，该示例使用与 Zakaria 相同的方法，其中可以隐藏/显示列： https://examples.bootstrap-table.com/#methods/show-hide-column.html#view-source

<link href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>

<div id="toolbar">
  <button id="button" class="btn btn-secondary">showColumn</button>
  <button id="button2" class="btn btn-secondary">hideColumn</button>
</div>
<table
  id="table"
  data-toggle="table"
  data-toolbar="#toolbar"
  data-height="460"
  data-show-columns="true"
  data-url="json/data1.json">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

<script>
  var $table = $('#table')
  var $button = $('#button')
  var $button2 = $('#button2')

  $(function() {
    $button.click(function () {
      $table.bootstrapTable('showColumn', 'name')
    })
    $button2.click(function () {
      $table.bootstrapTable('hideColumn', 'name')
    })
  })
</script>

Answer 7

如果您使用 javascript 动态加载 table，您可以在 bootstrap table 的初始渲染时设置可见性，将 visible:false 添加到您要隐藏的列。

$('#tableContainerName').bootstrapTable('destroy').bootstrapTable({
    url: YourApiUrl,
    pagination: true,
    search: true,
    columns: [{
            field: 'ColumnName',
            title: 'ColumnTitle',
            visible:false
        }]
});

启动时隐藏 bootstrap table 中的列

Hide columns in bootstrap table at startup

twitter-bootstrap

bootstrap-table