大家好。我有一个页面，上面有一个包含客户姓名的下拉列表。当一个客户被选中时，一个表格被动态加载（使用 ajax），其中包含该客户的配置。
通过单击相应的行进行配置的选择：
当表格超过 5 行时，它将滚动，即 有一个滑块（表中的最大行数是五）。当表格超过五行时，它会更改其样式：
为什么会发生这种情况我不知道。如果我们单击表格中的任何行（表格超过 5 行）或通常在页面上的任何区域，首先下拉列表将散焦，然后（或更早）表格将更改其样式：
因此，要在超过 5 行的表格中选择配置，您必须双击。（需要一键选择）
js代码：
function changeCustomerName(customerName) {
getConfigurationsForSpecifiedCustomer(customerName);
}
function createTableForConfiguration(data){
fillTable(data);
$('#configurationTable').show();
}
function fillTable(data){
$('#tableBody').empty();
data.forEach(function(item) {
$('#tableBody').append(
'<tr>' +
'<td style="display:none">' +
item.id +
'</td>' +
'<td>' +
item.name +
'</td>' +
'</tr>'
)
});
}
function getConfigurationsForSpecifiedCustomer(customerName) {
$.ajax({
type: "POST",
contentType: "application/json",
url: "/getConfigurationsForSpecifiedCustomer",
data: JSON.stringify(customerName),
dataType: 'json',
success: function(response) {
createTableForConfiguration(response);
},
error: function(e){
// alert('Error from getConfigurationsForSpecifiedCustomer' + e);
console.log('Error from getConfigurationsForSpecifiedCustomer' + e);
$('#configurationTable').hide();
}
});
}
$(document).ready(function(){
$('#secondTable').on("click", '#tableBody tr', function(){
var selected = $(this).hasClass("highlight");
$("#tableBody tr").removeClass("highlight");
if(!selected)
$(this).addClass("highlight");
$("[name='configuration']").val($(this).context.children[0].innerText);
});
});
html:
<div id="table" class="scroll">
<table id="secondTable" class ="tableBorder">
<thead>
<tr>
<th style="display:none">id</th>
<th>Configuration Name</th>
<th>Product Name</th>
<th>Product Version</th>
<th>Solution Build</th>
<th>Customer Name</th>
<th>GP Code</th>
<th>Oracle DB Version</th>
<th>Configuration Version</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
风格：
body {
font-size: 1em;
}
h1 {
font-size: 2em;
}
table.tableBorder {
width: 100%;
border: 1px solid black;
border-collapse: collapse;
}
table.tableBorder th, table.tableBorder td {
padding: 4px 3px;
border: 1px solid black;
}
.scroll{
width: 100%;
max-height: 150px;
overflow: auto;
}
.highlight { background-color: grey; }
阿贾克斯回应：
Ajax 响应返回一个列表。配置是一个 POJO 类。我注意到，如果您传递一个列表，那么一切正常，表格的样式不会改变，也不需要双击。
响应 ajax 调用的控制器：
@RequestMapping(value = "/getConfigurationsForSpecifiedCustomer", method=RequestMethod.POST)
public @ResponseBody List<Configuration> getConfigurationsForSpecifiedCustomer(@RequestBody String customer) {
if("".equals(customer))
return null;
return configurationService.getConfigurationsOfCustomer(customer.replaceAll("\"", ""));
}
配置类：
@Builder
@AllArgsConstructor
@Data
public class Configuration {
private final int version;
private final UUID id;
private final String name;
private final String author;
private final String comment;
private Map<String, String> customerInfo;
private Collection<Rule> rules;
private Collection<WhiteListItem> whiteList;
}
jQuery版本^
/static/js/jquery-2.1.1.min.js
这里有什么问题我无法理解，大脑拒绝。我会很高兴你的建议。
