JQ使用bootStrap编写当满足条件时bootStrapTable那一列显示小眼睛图标点击可以弹出小模态框查看bootStraptable查询列表返回的对应的那一列那一行的数据如果不满足条件则显示
可以使用Bootstrap的表格组件(BootstrapTable)以及条件判断来实现该功能。以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Table</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.3/bootstrap-table.min.css">
</head>
<body>
<table id="table" data-toggle="table" data-url="your_data_url">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="age">Age</th>
<th data-field="operation" data-formatter="operateFormatter">Operation</th>
</tr>
</thead>
</table>
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Details</h4>
</div>
<div class="modal-body">
<div id="details"></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.15.3/bootstrap-table.min.js"></script>
<script>
// 格式化操作列
function operateFormatter(value, row, index) {
if (row.condition) {
return '<a href="#" data-toggle="modal" data-target="#myModal" onclick="showDetails(' + index + ')"><span class="glyphicon glyphicon-eye-open"></span></a>';
} else {
return '*****';
}
}
// 显示详情
function showDetails(index) {
var row = $('#table').bootstrapTable('getData')[index];
$('#details').html('<p>ID: ' + row.id + '</p><p>Name: ' + row.name + '</p><p>Age: ' + row.age + '</p>');
}
</script>
</body>
</html>
在示例代码中,我们使用了Bootstrap的表格组件(BootstrapTable)来显示数据。其中,data-url属性用于指定数据的URL,data-field属性用于指定每一列的字段名。在操作列中,使用了data-formatter属性来自定义格式化函数,根据条件判断返回对应的操作列内容。当满足条件时,显示小眼睛图标,并且通过data-toggle="modal" data-target="#myModal"来绑定模态框。点击图标时,调用showDetails函数传入对应行的索引,从而获取对应行的数据并展示在模态框中。
需要注意的是,示例代码中的your_data_url需要替换为实际的数据接口地址,以便获取数据并显示在表格中
原文地址: https://www.cveoy.top/t/topic/iooO 著作权归作者所有。请勿转载和采集!