启动时隐藏引导表中的列
Posted
技术标签:
【中文标题】启动时隐藏引导表中的列【英文标题】：Hide columns in bootstrap table at startup 【发布时间】：2017-05-17 17:07:34 【问题描述】：我有下表，我使用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 列。
【问题讨论】：
【参考方案1】：你可以在你的 javascript 中使用 hideColumn 在 ready 函数中做到这一点：
$(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');
);
【讨论】：
您需要bootstrap-table.com 并添加属性：'data-field'。列选项在jQuery.fn.bootstrapTable.columnDefaults 中定义【参考方案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>
【讨论】：
这将无法正常工作。如果你这样做data-visible="false" 它会从 DOM 中删除它！
这个答案对我没有帮助（（（
这会从Dom中删除元素，所以可以访问元素，这是不可行的。【参考方案3】：
上面的答案都不适合我，因为他们从 DOM 中删除了该列——但我必须将其保留在 DOM 中。我只想隐藏该列。
以下解决方案可将列隐藏但在 DOM 中：
Bootstrap-Table: How to hide a column without deleting it from the DOM?
例如。使用 TH 上的data-class 属性，然后将其定义为隐藏：
<th class="col-xs-1" data-class='hidden' data-field="stargazers_count">Stars</th>
.hidden
display:none;
visibility:hidden;
或者另一种选择是在 Bootstrap-Table 的 onPostBody() 之后在 jQuery 中手动隐藏 TD/TH。
【讨论】：
【参考方案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"
>
【讨论】：
【参考方案5】：在做一个项目时遇到了这个问题。 data-visible="false" 为我工作。但是，我并不担心它可以在 DOM 中读取。我只需要一种使用data-show-columns="true" 和data-show_columns-toggle-all="true" 的方法，而我的表中只显示除1 列之外的所有列。
我找到了我用来隐藏加载的正确组合，但允许用户通过单个复选框添加它或切换所有开关。
在我的 python 代码中（flask post MethodView on render）我构建了代表表数据的 JSON 对象，它只是迭代 SQLalchemy Results 对象。显然，如果需要的话，我可以建立一个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>
在包含的示例中，仅查看顶部引导表选项。不知道为什么我把它复制在那里，可能只是不好的剪切/粘贴。
<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>【讨论】：
【参考方案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-
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>
【讨论】：
【参考方案7】：如果您使用 javascript 动态加载表，您可以在引导表的初始呈现时设置可见性，将 visible:false 添加到要隐藏的列。
$('#tableContainerName').bootstrapTable('destroy').bootstrapTable(
url: YourApiUrl,
pagination: true,
search: true,
columns: [
field: 'ColumnName',
title: 'ColumnTitle',
visible:false
]
);
【讨论】：
以上是关于启动时隐藏引导表中的列的主要内容，如果未能解决你的问题，请参考以下文章
循环遍历一张表中的列值并将另一列中的 COUNTIF 值粘贴到另一张表中
PLSQL: BEFORE INSERT TRIGGER（在允许插入之前检查其他表中的列中的值）