假设我有一个用Thymeleaf
制作的演示页面,其中有一个表格
。此 table
有 5 列,但在其中一列中我可以拥有多个元素:
<table id="table1" data-toggle="table" data-search="true">
<thead>
<tr>
<th data-sortable="true">Code</th>
<th data-sortable="true">Furnisher(s)</th>
<th data-sortable="true">Description</th>
<th data-sortable="true">Category</th>
<th data-sortable="true">Quantity</th>
</tr>
</thead>
<tbody>
<tr th:each="element : ${dto}">
<td><span th:text="${dto.id}"></span></td>
</tr>
<td>
<div class="furnisherList" onscroll="handleOnScroll(this)">
<span th:each="supplier : *{dto.furnisherList}">
<span th:text="${supplier.company_name}"></span>
<br>
</span>
</div>
</td>
...
... <!-- others column with at most 1 element -->
...
</tbody>
</table>
类 furnisherList
具有以下 css
:
.furnisherList {
overflow-y: auto;
height: 12px;
}
当有多个元素时,列显示如下:
Magic 是列表的第一个元素,其他元素隐藏(溢出)在它下面。
现在我喜欢这个图形,表格行
必须很细,滚动按钮
位置很好,但我想自定义滚动按钮
上的点击事件
。
我想在用户单击滚动按钮
(无论是向上还是向下)时打开一个窗帘(如下拉菜单)。
现在,我编写了一个简单的 JQuery
函数来读取 furnisherList div
中的元素:
function handleOnScroll(element) {
$(element).find('span').each(function() {
$(this).find('span').each(function() {
alert($(this).text());
});
});
}
这很好用,除了以下事实:如果我单击(一次)滚动按钮
,该功能将触发(至少)两次!
我已经尝试使用 event.preventDefault()
、$(element).stopScroll()
但没有任何效果..
你能帮帮我吗??
我按照 Ggs 所说的将以下代码写入 Thymeleaf
页面解决了:
<div class="furnisherList">
<span th:if="${#lists.size(dto.furnisher) > 1}">
<select class="furnisherOptions">
<option th:each="supplier : *{dto.furnisher}" th:text="${supplier.company_name}"></option>
</select>
</span>
<span th:unless="${#lists.size(dto.furnisher) > 1}" th:each="supplier : *{dto.furnisher}">
<span th:text="${supplier.company_name}"></span>
<br>
</span>
</div>
furnisherList CSS
:
.furnisherList {
/* overflow-y: auto; */
height: 12px;
}
furnisherOptions CSS
:
.furnisherOptions {
color: inherit;
border: 0;
outline: 0;
background: transparent;
border-image: none;
outline-offset: -2px;
border-color: transparent;
outline-color: transparent;
box-shadow: none;
}
不需要其他JQuery
函数。
谢谢大家。
最佳答案
你应该完全使用 Select 输入:
<div class="custom-select" style="width:200px;">
<select id="select">
<option value="0">Select car:</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
</select>
</div>
和一个函数 Change 函数来捕捉选择的变化:
$( "#select" ).change(function() {
alert( "Handler for .change() called." );
});
关于jquery - 自定义滚动事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57867317/