可以使用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">&times;</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需要替换为实际的数据接口地址,以便获取数据并显示在表格中

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

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

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