LayUi的动态表格table中设置下拉框Select编辑器

相关阅读：

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;
		//处理字段更新的逻辑
	});