[英]Table with Horizontal Scroll as Default
我在我的項目中得到了這張表: https : //examples.bootstrap-table.com/index.html#options/large-columns.html ,但我希望默認鼠標滾動是水平滾動,而不是垂直滾動。 我怎樣才能做到這一點?
<div id="divtest" class="container mt-2 mb-2">
<table id="tableteste" class="tabletest" data-toggle="table" data-search="true"
data-virtual-scroll="true" data-detail-view="true" data-show-export="true"
data-click-to-select="true" data-detail-formatter="detailFormatter">
<thead>
<tr>
<th data-field="tipo" data-sortable="true">Tipo </th>
<th data-field="codigo" data-sortable="true">Código </th>
<th data-field="descricao" data-sortable="false">Descrição </th>
<th data-field="quantidade" data-sortable="true">Quantidade (Und) </th>
{% for i in lista_estoque %}
<th data-field="{{i.fantasia}}" data-sortable="true">{{i.fantasia}}</th>
{% endfor %}
<th data-field="valorun" data-sortable="true">Valor Unitário (R$) </th>
<th data-field="valortot" data-sortable="true">Valor Total (R$) </th>
</tr>
</thead>
<tbody>
{% for i in lista_produto %}
<tr>
<td>{{i.tipo}}</td>
<td class="id{{i.id}}">{{i.codigo}}- <span style="color: red;">{{i.id}}</span></td>
<td class="id{{i.id}}">{{i.produto_desc}}</td>
<td></td>
{%if i.tipo == 'PI'%}
<td class="id{{i.id}}"> {{i.valoruni}}</td>
{%else%}
<td class="id{{i.id}}"> {{i.compvalortot}}</td>
{%endif%}
{%if i.tipo == 'PI'%}
<td class="id{{i.id}}"> {{i.valoruniDol}}</td>
{%else%}
<td class="id{{i.id}}"> {{i.compvalortotDol}}</td>
{%endif%}
</tr>
{% endfor %}
</tbody>
</table>
</div>
我找到的解決方案:
$.fn.hScroll = function (options) {
function scroll(obj, e) {
var evt = e.originalEvent;
var direction = evt.detail ? evt.detail * (-120) : evt.wheelDelta;
if (direction > 0) {
direction = $(obj).scrollLeft() - 120;
}
else {
direction = $(obj).scrollLeft() + 120;
}
$(obj).scrollLeft(direction);
e.preventDefault();
}
$(this).width($(this).find('div').width());
$(this).bind('DOMMouseScroll mousewheel', function (e) {
scroll(this, e);
});
}
$(".fixed-table-body").hScroll();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.