带有滚动条和列对齐方式的 Jquery 弹出窗口

Jquery popup with scrollbar and column alignment

本文关键字：Jquery 窗口 方式 对齐 滚动条      更新时间：2023-09-26

我正在寻找一个具有垂直滚动条的jquery弹出窗口，它允许像模仿Datagrid一样显示数据，除了行不可见的事实。

我的意思是应该在弹出窗口中显示类似的东西

字段

1 字段 2 字段 3

值 1 值 1

值 1

值 2 值 2

值 2

如果构成列的元素的长度大于屏幕的高度，则应显示垂直滚动条并允许替换值。

我已经搜索了一段时间，但什么也没找到，所以我希望你能帮我解决这个问题，因为从头开始做似乎非常耗时。

尽管我被命令通过jquery执行此操作，但只要它有效，它就无关紧要，因此请随意命名其他替代方案，这些替代方案或多或少，如果存在，唯一的限制是它已经在客户端使用JavaScript完成，因为其余代码都是在此完成的。

感谢您的帮助。

对于对话框，您可以使用jQuery UI。为了满足其余的要求，只需添加一点 css。这里有一个案例的例子。我希望它对您有所帮助：

<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
        <style>
            #dialog-content {
                height: 200px;
                /* Show scrolls if overflows! */
                overflow: scroll;
            }
            #dialog-content th,
            #dialog-content td {
                /* Big rows! */
                padding: 20px;
            }
        </style>
        <script>
            $(document).ready(function() {
                $("#dialog").dialog();
            });
        </script>
    </head>
    <body>
        <div id="dialog" title="Basic dialog">
            <div id="dialog-content">
                <table>
                    <thead>
                        <tr>
                            <th>Field1</th>
                            <th>Field2</th>
                            <th>Field3</th>
                            <th>Field4</th>
                            <th>Field5</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Value1</td>
                            <td>Value2</td>
                            <td>Value3</td>
                            <td>Value4</td>
                            <td>Value5</td>
                        </tr>
                        <tr>
                            <td>Value1</td>
                            <td>Value2</td>
                            <td>Value3</td>
                            <td>Value4</td>
                            <td>Value5</td>
                        </tr>
                        <tr>
                            <td>Value1</td>
                            <td>Value2</td>
                            <td>Value3</td>
                            <td>Value4</td>
                            <td>Value5</td>
                        </tr>
                        <tr>
                            <td>Value1</td>
                            <td>Value2</td>
                            <td>Value3</td>
                            <td>Value4</td>
                            <td>Value5</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>
相关文章：