Custom scrollbar for Bootstrap Table

做~自己de王妃 提交于 2019-12-18 12:44:40

问题


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>

Questions:

1) Is this doable, and if so - how?

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

Edit:

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.


回答1:


This works out of the box.

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

Just use:

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

Here's a working example.



来源:https://stackoverflow.com/questions/26427977/custom-scrollbar-for-bootstrap-table

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!