Question

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

我的意思是应该在弹出窗口中显示

Field1 Field2 Field3

Value1 Value1 Value1

Value2 Value2 Value2

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

我已经搜索了一段时间而且找不到任何东西，所以我希望你能帮我解决这个问题，因为从头开始做这件事似乎非常费时。

虽然我已经被命令通过jquery做它，但只要它有效就没那么重要，所以随意命名其他替代品，这些替代品越来越少，如果它们存在，唯一的限制是它已经在客户端使用JavaScript完成，因为代码的其余部分就完成了。

感谢您的帮助。

Answer 1

对于对话框，您可以使用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>

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

1 个答案: