JQ使用bootStrap编写当满足条件时bootStrapTable那一列显示小眼睛图标点击可以查看bootStraptable查询列表返回的对应的那一列那一行的数据如果不满足条件则显示
你可以使用Bootstrap的Table组件和一些自定义的JavaScript代码来实现这个功能。以下是一个简单的示例代码:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Table</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/bootstrap-table/1.15.3/bootstrap-table.min.js"></script>
</head>
<body>
<table id="table" data-toggle="table" data-url="data.json" data-pagination="true" data-search="true">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="value">Value</th>
<th data-field="action">Action</th>
</tr>
</thead>
</table>
<script>
$(function() {
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: 'Name'
}, {
field: 'value',
title: 'Value'
}, {
field: 'action',
title: 'Action',
formatter: actionFormatter
}]
});
});
function actionFormatter(value, row, index) {
if (row.value === '条件满足') {
return '<a href="#" onclick="showData(' + index + ')"><span class="glyphicon glyphicon-eye-open"></span></a>';
} else {
return '*****';
}
}
function showData(index) {
var data = $('#table').bootstrapTable('getData')[index];
console.log(data);
// 在这里可以根据需要处理数据,比如展示一个模态框或者跳转到另一个页面
}
</script>
</body>
</html>
在这个示例中,我们通过设置Bootstrap Table的columns属性来定义表格的列。在action列中,我们使用了一个自定义的actionFormatter函数来根据条件决定显示什么内容。如果条件满足,我们返回一个包含小眼睛图标的链接,点击链接会调用showData函数,并传递当前行的索引。如果条件不满足,我们返回*****。
在showData函数中,我们使用$('#table').bootstrapTable('getData')获取表格的所有数据,然后根据传入的索引获取对应行的数据。你可以根据需要在这个函数中进行进一步的处理,比如展示一个模态框或者跳转到另一个页面来显示详细数据。
注意,这个示例中的数据是通过data-url属性从data.json文件中加载的,你需要根据实际情况修改数据的来源和格式
原文地址: https://www.cveoy.top/t/topic/iooM 著作权归作者所有。请勿转载和采集!