【问题标题】:How can I insert a scrollbar in jquery jtable?如何在 jquery jtable 中插入滚动条?
【发布时间】:2013-04-19 22:01:00
【问题描述】:

我正在使用出色的 jquery 插件 jtable。 但我找不到任何显示垂直滚动条的示例。

我尝试在包含它的 div 上设置高度和 overflow.auto - 然后滚动条滚动整个表格,包括页眉 - 我只想滚动行而不是页眉而不是页脚。

有没有人找到办法做到这一点?

以某种方式起作用的解决方案是插入:

$('.jtable').wrap('<div class="jtable-main-container scroll-content" />');    

.scroll-content {
     overflow-y: auto;
    width:100%;
 }
div.jtable-main-container {
  height:100%;
}

并在 div 上设置高度。 然而,它也滚动表头 - 但它比滚动整个 jtable 更好 - 我试图制作一个解决方案,其中 jtable 生成 2 个表 - 一个带有标题,一个带有正文,但标题不同步。

在这里查看:http://jsfiddle.net/j5Q4L/3/

【问题讨论】:

  • 你有这个问题的答案吗?那么请分享...因为我也面临同样的问题...:(

标签: javascript jquery jquery-jtable


【解决方案1】:
$('.jtable').wrap('<div class="jtable-main-container scroll-content" />');    
and

.scroll-content {
     overflow-y: auto;
    width:100%;
 }
div.jtable-main-container {
  height:100%;
}

谢谢!

【讨论】:

  • 这是为我做的!我不得不将 .jtable-main-container 高度设置为 %85%,以避免 3 个滚动条。
【解决方案2】:
  <style type="text/css">
        #StudentTableContainer {
            width: 100%;
            display: block;
        }

            #StudentTableContainer tbody, .jtable tbody {
                height: 100px;
                overflow-y: auto;
                display: block;
            }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#StudentTableContainer').jtable({
                //...
            });
        });
    </script>
    <div id="StudentTableContainer" class="jtable"></div>

【讨论】:

  • 感谢您的建议 - 我确实为 tbody 提供了一个滚动条,但它的工作方式有点奇怪。我有 4 列,它们现在安装在带有滚动条的第一列中。我尝试设置 width:100% 但没有效果。而且它似乎没有在 IE 中做任何事情,只有 firefox - 有什么想法吗?
  • @Rune Andersen: 你能用一些静态数据在jsfiddle.net 中添加这个任务,这样我就可以修复这个错误。
  • @RuneAndersen 你有页脚的解决方案吗?如何使 tbody 只能滚动?
【解决方案3】:

将此添加到 css

table.jtable{
overflow-y: scroll;
display:block;
overflow-x: hidden;
}

【讨论】:

  • 或者修改你的 jsfiddle css,而不是 verflow-y: auto;添加溢出-y:滚动;
猜你喜欢
  • 1970-01-01
  • 2021-04-28
  • 1970-01-01
  • 2011-10-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-03-23
  • 1970-01-01
相关资源
最近更新 更多