layui 数据表格下拉框_LayUi的动态表格table中设置下拉框Select编辑器
相关阅读：
LayUi的动态表格Table中每个td的内容可以设置为可编辑，同时监听我需改，并提交到后台。但是表格中编辑时如果是select下拉框，则处理起来相对麻烦一些。具体各部分操作如下。
1.单元格内容使用layui的templet功能。
如： {field:'jtcyGxmc', title: '关系名称',templet: '#selectGxmc',sort:false}
{ {d.roleSelect}}
其中select标签务必设置： lay-filter，否则修改的监听无法使用；
后端代码：
由于需要选中默认值，且在前台操作较为麻烦，故在后台进行了处理，如下所示：
@Override
public Page paging(Pageable pageable, String name, Long departId) {
Page page = userRepository.findAll((root, query, builder) -> {
Predicate predicate = builder.conjunction();
if (com.tdata.bplatform.utils.String.StringUtils.isNotBlank(name)) {
predicate.getExpressions().add(builder.like(root.get("username"), "%" + name + "%"));
}
if (com.tdata.bplatform.utils.String.StringUtils.isNotBlank(departId)) {
predicate.getExpressions().add(builder.equal(root.get("departId"), departId));
}
query.orderBy(builder.desc(root.get("lastLogin")));
return predicate;
}, pageable);
List rets = new ArrayList<>();
page.getContent().forEach(n -> rets.add(n));
List roleList = roleRepository.findAll();
List users = page.getContent();
users.forEach(item -> {
for (Role role : roleList) {
if (com.tdata.bplatform.utils.String.StringUtils.isNotBlank(item.getRoleId())
&& role.getId() == item.getRoleId().longValue()) {
item.setRole(role);
if (com.tdata.bplatform.utils.String.StringUtils.isNotBlank(item.getRoleId())) {
//处理前端select中的option对象，并设置默认值；
item.setRoleSelect(getRoleSelect(roleList, item.getRoleId()));
}
break;
}
}
});
return new PageImpl<>(rets, pageable, page.getTotalElements());
}
/**
* 根据roleID设置默认选择，以及构造option值；
*
* @2020年6月7日 下午5:52:50
*
* @Title: getRoleSelect
*
* @Description: TODO(这里用一句话描述这个方法的作用)
*
* @param @param roleList
*
* @param @param roleId
*
* @return String 返回类型
*
* @throws
*/
public String getRoleSelect(List roleList, Long roleId) {
String str = "";
for (Role role : roleList) {
str += "
+ (role.getId() == roleId.longValue() ? "selected=\"selected\"" : "") + " > " + role.getRoleName()
+ "
";}
System.out.println(str);
return str;
}
2.然后单元格内容就变成了可编辑的下拉框。
3.由于默认样式有些问题，需要调整下样式。
/* 防止下拉框的下拉列表被隐藏---必须设置--- */
.layui-table-cell {
overflow: visible !important;
}
/* 使得下拉框与单元格刚好合适 */
td .layui-form-select{
margin-top: -10px;
margin-left: -15px;
margin-right: -15px;
}
4.模板代码中给select标签增加data-属性，用于保存对象的id值。下拉框选择时会触发以下代码
//下拉框监听事件
form.on('select(roleIdSelect)', function(data) {
//获取行tr对象
var elem = data.othis.parents('tr');
//获取第一列的值，第一列为ID列，
var id = elem.first().find('td').eq(1).text();
//选择的select对象值；
var selectValue=data.value;
//处理字段更新的逻辑
});