相关阅读：

X-admin2.2打开页面（添加弹窗），执行成功后如何关闭弹出窗口和刷新table表格内容？

基于X-admin2.2的后台管理系统登录实现

Spring Boot+JPA微服务中数据更新问题(update)

Spring Boot集成X-admin2.2时，Layui字体图标无法正常显示或乱码问题解决方法

LayUi搜索时，如何只刷新表格内容，其他内容不变？

ZTree工具类汇总，包括：新增、编辑和删除节点，并提交后台

LayUi的动态表格Table中每个td的内容可以设置为可编辑，同时监听我需改，并提交到后台。但是表格中编辑时如果是select下拉框，则处理起来相对麻烦一些。具体各部分操作如下。 

1.单元格内容使用layui的templet功能。

如： {field:'jtcyGxmc', title: '关系名称',templet: '#selectGxmc',sort:false} <select name='roleId' id='roleId'  lay-filter="roleId[Select](http://www.blog2019.net/tag/Select?tagId=271)" data-value = {{d.roleId}}  lay-verify='' lay-search=''>    {{d.roleSelect}}</select>

其中select标签务必设置： lay-filter，否则修改的监听无法使用；

后端代码：

由于需要选中默认值，且在前台操作较为麻烦，故在后台进行了处理，如下所示：

@Override
public Page<User> paging(Pageable pageable, String name, Long departId) {Page<User> 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<User> rets = new ArrayList<>();page.getContent().forEach(n -> rets.add(n));List<Role> roleList = roleRepository.findAll();List<User> 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<Role> roleList, Long roleId) {String str = "";for (Role role : roleList) {str += "<option value=\"" + role.getId() + "\" "+ (role.getId() == roleId.longValue() ? "selected=\"selected\"" : "") + " > " + role.getRoleName()+ "</option> ";}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;//处理字段更新的逻辑});

#Select #LayUi #X-admin2.2