JQ使用bootStrap编写当满足条件时bootStrapTable那一列显示小眼睛图标点击可以查看数据库查询出来的此列此行所隐藏的数据如果不满足条件则显示
你可以使用Bootstrap的table插件和条件判断来实现这个功能。首先,你需要引入Bootstrap和Bootstrap Table的CSS和JavaScript文件。然后,你可以使用以下代码来创建一个Bootstrap Table:
<table id="myTable" data-toggle="table" data-url="data.php" data-search="true" data-pagination="true">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="data">Data</th>
</tr>
</thead>
</table>
接下来,你可以使用JavaScript来根据条件判断来动态修改表格中的数据显示。假设你有一个条件变量condition,当满足条件时,你可以将相应行的"data"列显示为小眼睛图标并添加点击事件来显示隐藏数据,否则显示为星号。
// 获取表格对象
var table = $('#myTable');
// 获取表格数据
var data = table.bootstrapTable('getData');
// 遍历数据
data.forEach(function(row) {
// 判断条件
if (condition) {
// 显示小眼睛图标
row.data = '<i class="fa fa-eye" onclick="showData(' + row.id + ')"></i>';
} else {
// 显示星号
row.data = '*****';
}
});
// 更新表格数据
table.bootstrapTable('load', data);
最后,你还需要编写一个showData函数来处理点击小眼睛图标的事件,该函数可以根据行的ID从数据库中查询并显示隐藏的数据。
function showData(id) {
// 根据ID查询数据库并显示隐藏的数据
// ...
}
请注意,上述代码只是一个示例,你需要根据你的具体需求进行修改和完善。另外,你还需要在服务器端编写一个数据接口data.php来提供表格数据
原文地址: https://www.cveoy.top/t/topic/iooH 著作权归作者所有。请勿转载和采集!