JQ使用bootStrap编写当满足条件时bootStrapTable那一列显示小眼睛图标点击可以查看此列此行所隐藏的数据如果不满足条件则显示
可以使用Bootstrap的Table插件来实现这个功能。首先需要引入Bootstrap和jQuery库,以及Bootstrap Table插件的CSS和JS文件。
<!-- 引入Bootstrap和jQuery库 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 引入Bootstrap Table插件的CSS和JS文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-table/1.16.0/bootstrap-table.min.css">
<script src="https://cdn.staticfile.org/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
接下来,需要在HTML中定义一个表格,并设置一些基本的属性。
<table id="myTable" data-toggle="table" data-url="your_data_url" data-pagination="true" data-search="true">
<thead>
<tr>
<th data-field="name">Name</th>
<th data-field="age">Age</th>
<th data-field="email">Email</th>
<th data-field="hiddenData" data-formatter="hiddenDataFormatter">Hidden Data</th>
</tr>
</thead>
</table>
在上面的代码中,data-url属性指定了表格的数据来源,data-pagination和data-search属性启用了分页和搜索功能。data-field属性定义了每一列的字段名,data-formatter属性指定了一个自定义的格式化函数。
然后,需要编写JavaScript代码来实现条件判断和数据格式化函数。
// 格式化隐藏数据列的内容
function hiddenDataFormatter(value, row) {
if (row.condition) {
// 满足条件时显示小眼睛图标,点击可以查看隐藏数据
return '<a href="#" data-toggle="modal" data-target="#hiddenDataModal" data-hidden-data="' + row.hiddenData + '"><i class="glyphicon glyphicon-eye-open"></i></a>';
} else {
// 不满足条件时显示*****
return '*****';
}
}
// 在模态框中显示隐藏数据
$('#hiddenDataModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget);
var hiddenData = button.data('hiddenData');
var modal = $(this);
modal.find('.modal-body').text(hiddenData);
});
在上面的代码中,hiddenDataFormatter函数用来格式化隐藏数据列的内容。根据条件判断,如果满足条件,则返回一个包含小眼睛图标的链接,点击链接可以触发一个模态框来显示隐藏数据;如果不满足条件,则返回*****。
最后,还需要在HTML中定义一个模态框来显示隐藏数据。
<div class="modal fade" id="hiddenDataModal" tabindex="-1" role="dialog" aria-labelledby="hiddenDataModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body"></div>
</div>
</div>
</div>
以上就是使用Bootstrap和Bootstrap Table插件来实现满足条件时显示小眼睛图标,点击可以查看隐藏数据的功能。根据实际需求,可能需要调整一些细节和样式
原文地址: https://www.cveoy.top/t/topic/ioos 著作权归作者所有。请勿转载和采集!