Bootstrap表的自定义滚动条 [英] Custom scrollbar for Bootstrap Table

问题描述

我有一个条带表使用Bootstrap表与下面的代码（从第一个例子 http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html ）。我需要找到一种方法让滚动条看起来像一个由slimScroll生成的方式（ http://rocha.la/jQuery- slimScroll ）。这是一个不可协商的客户端要求。

I have a striped table done using Bootstrap Table with the following code (from first example on http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html). I need to find a way for the scrollbar to look like one generated by slimScroll (http://rocha.la/jQuery-slimScroll). This is a non-negotiable client requirement.

<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>

问题：

如果是这样，如何？

2）如果这对于bootstrap表不可行，是否有一个库会为tbody创建这种类型的滚动条？ （slimScroll只能工作在div而不是tbody）

2) If this is not doable with bootstrap table, is there a library that would create a scrollbar of this type for a tbody? (slimScroll only works on a div, not a tbody)

3）如果既不能使用（1）也不能使用（2）使用此类型的滚动条实现滚动体表？

3) If neither (1) nor (2) are possible, what are my options for a fixed-header scrollable-body table implementation with a scrollbar of this type?

编辑：

我无法创建完全功能的jsfiddle，因为bootstrap-table似乎没有通过外部资源加载。但是，我能够创建一个jsfiddle显示应用了slimScroll的tbody。独立的div滚动细。

I am unable to create a fully-functional jsfiddle, since bootstrap-table doesn't appear to load via external resources. I was, however, able to create a jsfiddle showing what a tbody with slimScroll applied to it does. A stand-alone div scrolls fine. The tbody of the table following it does not.

推荐答案

这是一个开箱即用的方法。

This works out of the box.

检查生成的引导表元素，不是滚动< tbody> ，而是< c $ c>'。fixed-table-body'。

Inspecting the generated bootstrap table elements, it's not scrolling the <tbody> but a wrapper div of '.fixed-table-body'.

只要使用：

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

这是一个有效的 example 。

这篇关于Bootstrap表的自定义滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！