你可以使用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文件中加载的,你需要根据实际情况修改数据的来源和格式

JQ使用bootStrap编写当满足条件时bootStrapTable那一列显示小眼睛图标点击可以查看bootStraptable查询列表返回的对应的那一列那一行的数据如果不满足条件则显示

原文地址: https://www.cveoy.top/t/topic/iooM 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录