Пользовательская горизонтальная и вертикальная полоса прокрутки для таблицы Bootstrap

Я использую загрузочную таблицу и имею таблицу с большие столбцы (видна горизонтальная полоса прокрутки). У моего клиента есть требование более тонкой полосы прокрутки в таблице. Вот решение для пользовательской полосы прокрутки для таблицы bootstrap, проблема в том, что она работает для вертикальной полосы прокрутки, а не для горизонтальной.

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({});

javascript twitter-bootstrap bootstrap-table scrollable-table slimscroll
person Matt    schedule 18.12.2015    source источник
comment
Не похоже, что slimScroll поддерживает горизонтальную прокрутку. Какие браузеры вам нужны для этого проекта?   -  person chris van hooser    schedule 21.12.2015
comment
Я не заметил, что slimScroll не поддерживает горизонтальную полосу прокрутки, спасибо. Мне нужно обрабатывать все браузеры в Windows (полосы прокрутки в таблице слишком толстые).   -  person Matt    schedule 21.12.2015
comment
Вы можете попробовать следующий плагин malihu-custom-scrollbar-plugin. Вот скрипка   -  person DavidDomain    schedule 21.12.2015
comment
@DavidDomain спасибо за ответ. В вашем примере тело таблицы прокручивается по горизонтали, но заголовок таблицы фиксирован.   -  person Matt    schedule 21.12.2015
comment
Попробуйте идеальную полосу прокрутки. довольно удивительный плагин.   -  person Daniel    schedule 24.12.2015
comment
ссылка на OP в проблемах github: github.com/wenzhixin/bootstrap-table/issues/ 1818 г.   -  person Daniel Brose    schedule 04.01.2016

Ответы (1)


arrow_upward
1
arrow_downward

Поскольку slimScroll не поддерживает горизонтальные полосы прокрутки, вы можете использовать другой плагин jQuery (я использовал lionsbars для фрагмент). Но вам нужно сделать некоторые настройки, чтобы достичь цели перемещения фиксированного заголовка. Используйте плагин, который вы хотите, но обновите свойство заголовка scrollLeft при прокрутке тела таблицы, посмотрите на мой пример:

В Firefox MacOS полосы прокрутки нельзя настроить, как в WebKit. Возможно, вам нужно определить возможности системы и применить плагин только в Windows.

$(function () {
  var $table = $('#table');
  buildTable($table, 50, 50);
});

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

  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){
    if (!$header) { $header = $('.fixed-table-header'); }
    $header.scrollLeft( this.scrollLeft );
  });
}
::-webkit-scrollbar {
   -webkit-appearance: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Charuru/lionbars@master/js/jquery.lionbars.0.3.js"></script>

<link href="https://cdn.jsdelivr.net/gh/Charuru/lionbars@master/css/lionbars.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <table id="table" data-height="400" data-show-columns="true"></table>
</div>

person ElChiniNet    schedule 23.12.2015
comment
Спасибо, определить ОС легко в javascript. stackoverflow .com/questions/9514179/ - person Matt; 24.12.2015
comment
Пожалуйста. Да, вам нужно что-то подобное, чтобы избежать пользовательской полосы прокрутки в MacOS. - person ElChiniNet; 24.12.2015