用于自举表的自定义水平和垂直滚动条

Question

我使用bootstrap-table并且有一个带有large列的表（水平滚动条可见）。客户端具有需求 - 表格中的Slimmer滚动条。 Here是主题，它处理引导表的自定义滚动条。问题是它适用于垂直滚动条而不适用于水平滚动条。

jsfiddle

HTML

<table class="table table-striped table-bordered table-hover" cellspacing="0" id="mainTable" data-show-toggle="true" data-show-columns="true" data-pagination="true" data-show-filter="true" data-filter-control="true" > 
    <thead> 
     <tr> 
     <th data-field="CustomerName">CustomerN</th> 
     <th data-field="ProjectName">ProjectN</th> 
     <th data-field="ProjectType">ProjectT</th> 
     <th data-field="ProjectDetails">ProjectD</th> 
     <th data-field="ProjectLocation">ProjectL</th> 
     <th data-field="ProjectTiming">ProjectT</th> 
     <th data-field="ProjectTeam">ProjectT</th> 
     <th data-field="ProjectStatus">ProjectS</th> 
     <th data-field="ProjectProgress">ProjectP</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>GE Capital Corporation</td> 
     <td>Services SOW #1</td> 
     <td>Project | T&amp;M</td> 
     <td>"Inani fabulas nominavi sea no.\n"+ 
      "Ad quodsi luptatum expetenda eum, sed ludus dicam\n"+ 
      "nominati te, reque causae prompta eos ex. Putent \n"+ 
      "torquatos mei ei. Te verear offendit per. Vix eu erant\n"+ 
      "doctus delenit, et copiosae indoctum accommodare eum.\n"+ 
      "Errem tritani in qui, te vis legere saperet corpora.\n"+ 
      "Eu mei nobis pertinacia, in has putent virtute voluptua,\n"+ 
      "ne probo dicta utinam nam." 
     </td> 
     <td>Norwalk, CT</td> 
     <td>Feb-Aug 2015</td> 
     <td>John, Adam, Pete</td> 
     <td>Running</td> 
     <td>Empty</td> 
     </tr> 
     <tr> 
     <td>GE Capital Corporation</td> 
     <td>Services SOW #1</td> 
     <td>Project | T&amp;M</td> 
     <td>"Inani fabulas nominavi sea no.\n"+ 
      "Ad quodsi luptatum expetenda eum, sed ludus dicam\n"+ 
      "nominati te, reque causae prompta eos ex. Putent \n"+ 
      "torquatos mei ei. Te verear offendit per. Vix eu erant\n"+ 
      "doctus delenit, et copiosae indoctum accommodare eum.\n"+ 
      "Errem tritani in qui, te vis legere saperet corpora.\n"+ 
      "Eu mei nobis pertinacia, in has putent virtute voluptua,\n"+ 
      "ne probo dicta utinam nam." 
     </td> 
     <td>Norwalk, CT</td> 
     <td>Feb-Aug 2015</td> 
     <td>John, Adam, Pete</td> 
     <td>Running</td> 
     <td>Empty</td> 
     </tr> 
     <tr> 
     <td>GE Capital Corporation</td> 
     <td>Services SOW #1</td> 
     <td>Project | T&amp;M</td> 
     <td>"Inani fabulas nominavi sea no.\n"+ 
      "Ad quodsi luptatum expetenda eum, sed ludus dicam\n"+ 
      "nominati te, reque causae prompta eos ex. Putent \n"+ 
      "torquatos mei ei. Te verear offendit per. Vix eu erant\n"+ 
      "doctus delenit, et copiosae indoctum accommodare eum.\n"+ 
      "Errem tritani in qui, te vis legere saperet corpora.\n"+ 
      "Eu mei nobis pertinacia, in has putent virtute voluptua,\n"+ 
      "ne probo dicta utinam nam." 
     </td> 
     <td>Norwalk, CT</td> 
     <td>Feb-Aug 2015</td> 
     <td>John, Adam, Pete</td> 
     <td>Running</td> 
     <td>Empty</td> 
     </tr> 
    </tbody> 
</table> 

的JavaScript

$('#mainTable').bootstrapTable({ 
}); 

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

Answer 1

你可以使用另一个jQuery插件（我用lionsbars为JSFiddle例子）。但你需要做一些调整来达到移动固定头部的目的。使用所需的插件，但是当你滚动表体更新头scrollLeft属性，看看我的例子：

在Firefox的MacOS滚动条不能像WebKit的定制。也许你需要检测系统功能并仅在Windows上应用该插件。

var $table = $("#table"); 

$(function() { 
    buildTable($table, 50, 50); 
}); 

function buildTable($el, cells, rows) { 
    var i, j, row, 
     columns = [], 
     data = []; 

    for (i = 0; i < cells; i++) { 
    columns.push({ 
     field: "field" + i, 
     title: "Cell" + i, 
     sortable: true 
    }); 
    } 

    for (i = 0; i < rows; i++) { 
    row = {}; 
    for (j = 0; j < cells; j++) { 
     row["field" + j] = "Row-" + i + "-" + j; 
    } 
    data.push(row); 
    } 

    $el.bootstrapTable("destroy").bootstrapTable({ 
    columns: columns, 
    data: data 
    }); 

    $(".fixed-table-body").lionbars().find(".lb-wrap").on("scroll", function(evt){ 

    $(".fixed-table-header").scrollLeft($(this).scrollLeft()); 

    }); 
} 

jsfiddle