javascript - 默认为水平滚动的表格
问题描述
我在我的项目中得到了这张表: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();
推荐阅读
- firebase - 无法从 firebase 读取列表,总是在 snapshot.data 上返回 null
- javascript - 如何通过 jest mock 验证错误消息以在 catch 块内抛出错误
- python - 如何从数据框中的 URL 下载图像并使用存储在数据框中的特定 id 标记集合图像?
- sql-server - 查询必须等待 XX 秒才能获得 MemoryGrant
- javascript - 如果 scrollTop 倒退,你怎么记得它?
- sql - SQL:动态 SQL 问题
- azure-devops - 关闭拉取请求而不将其合并到 Azure DevOps 中的上游分支
- html - 如何将离子日期时间中的开始时间和结束时间分开 30 分钟
- javascript - 使用 Google 地球引擎计算每个地区、月份和年份的 NDVI?- 跟进问题
- node.js - Nextjs:现在运行时抛出错误