twitter-bootstrap 启动时隐藏引导表中的列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41446362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-22 00:29:41 来源:igfitidea点击:
Hide columns in bootstrap table at startup
提问by yaylitzis
I have the following table, where I use Bootstrap-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>
Is there a way to define which columns will be hidden at startup? For example, I want to show only customerand descriptioncolumn.
有没有办法定义在启动时隐藏哪些列？例如，我只想显示customer和description列。
采纳答案by lvwzhen
You can use data-visible="false",it`s easy for you.
您可以使用 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>
回答by Zakaria Acharki
You could do that in your js using hideColumninside the ready function :
你可以在你的 js 中使用hideColumnready 函数来做到这一点：
$(function(){
var $table = $('#mytable');
$table.bootstrapTable('hideColumn', 'type');
$table.bootstrapTable('hideColumn', 'cutter');
$table.bootstrapTable('hideColumn', 'valid_s');
});
Then if you want to show them you could use :
然后，如果你想向他们展示你可以使用：
$(function(){
var $table = $('#mytable');
$table.bootstrapTable('showColumn', 'type');
$table.bootstrapTable('showColumn', 'cutter');
$table.bootstrapTable('showColumn', 'valid_s');
});
Hope this helps.
希望这可以帮助。
回答by gene b.
None of the answers above worked for me, because they deleted the column from the DOM -- but I had to keep it in the DOM. I only wanted to hide the column.
上面的答案都不适合我，因为他们从 DOM 中删除了该列——但我必须将它保留在 DOM 中。我只想隐藏该列。
The following solutions worked to keep the column hidden but in the DOM:
以下解决方案可以使列隐藏但在 DOM 中：
Bootstrap-Table: How to hide a column without deleting it from the DOM?
Bootstrap-Table：如何隐藏一列而不从 DOM 中删除它？
ex. using the data-classattribute on the TH, and then defining it to be hidden:
前任。使用data-classTH 上的属性，然后将其定义为隐藏：
<th class="col-xs-1" data-class='hidden' data-field="stargazers_count">Stars</th>
.hidden{
display:none;
visibility:hidden;
}
Or another option is to hide the TD/TH manually in jQuery after Bootstrap-Table's onPostBody().
或者另一种选择是在 Bootstrap-Table 的onPostBody().
回答by Sergio Araque
You need to add the last line
您需要添加最后一行
<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"
>
回答by Andrew Spear
Came across this while working on a project. The data-visible="false"worked for me. However I wasn't as concerned about it being available to be read in the DOM. I just needed a way to use the data-show-columns="true"and data-show_columns-toggle-all="true"while only visible showing all but 1 column in my table.
在做项目时遇到了这个问题。在data-visible="false"对我来说有效。但是我并不担心它是否可以在 DOM 中读取。我只需要一种方法来使用data-show-columns="true"和data-show_columns-toggle-all="true"while 只显示我的表中除 1 列之外的所有列。
I found the right combination that I used in order to hide on load, but allow the user to add it in via single checkbox or toggle all switch.
我找到了我用来隐藏加载的正确组合，但允许用户通过单个复选框添加它或切换所有开关。
In my python code (flask post MethodView on render) I build my JSON object that represents the table data, which is just iterating over a SQLalchemy Results object. Obviously if needed a could just build a list of excluded_column_namesto perform an inclauses search if I wanted. But in this case it is just the one column for now.
在我的 Python 代码（渲染时的烧瓶发布 MethodView）中，我构建了表示表数据的 JSON 对象，它只是在 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>
In included example look at only the top bootstrap-table options. Not sure why I have it duplicated in there, probably just bad 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/[email protected]/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/[email protected]/dist/bootstrap-table.min.js"></script>
</body>
</html>