相关阅读：
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](/tag/Select?tagId=271)" data-value = {{d.roleId}} lay-verify='' lay-search=''> {{d.roleSelect}}</select>
其中select标签务必设置：lay-filter，否则修改的监听无法使用；
后端代码：
由于需要选中默认值，且在前台操作较为麻烦，故在后台进行了处理，如下所示：
@Overridepublic 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值；* * @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
