Bootstrap表的自定义滚动条



我有一个使用Bootstrap table完成的带条表,带有以下代码(来自http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html)。我需要找到一种方法让滚动条看起来像slimScroll生成的滚动条(http://rocha.la/jQuery-slimScroll)。这是不可协商的客户要求。

<table data-toggle="table" data-url="data1.json" data-cache="false" data-height="299">
<thead>
    <tr>
        <th data-field="id">Item ID</th>
        <th data-field="name">Item Name</th>
        <th data-field="price">Item Price</th>
    </tr>
</thead>
</table>

问题:

1) 这可行吗?如果可行,怎么做?

2) 如果这在引导表中是不可行的,那么有没有一个库可以为tbody创建这种类型的滚动条?(slimScroll仅适用于div,而不适用于tbody)

3) 如果(1)和(2)都不可能,那么对于带有这种类型滚动条的固定标题可滚动体表实现,我有什么选择?

编辑:

我无法创建一个功能齐全的jsfiddle,因为引导表似乎不会通过外部资源加载。然而,我能够创建一个jsfiddle来展示应用了slimScroll的tbody的功能。一个独立的div可以很好地滚动。下面表格的正文没有。

这是开箱即用的。

检查生成的引导程序表元素,它不是滚动<tbody>,而是滚动'.fixed-table-body'的包装器div。

只需使用:

$(document).ready(function () {
  $('.fixed-table-body').slimScroll({});
});

下面是一个工作示例。

相关内容

  • 没有找到相关文章

最新更新