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

#Select #LayUi #X-admin2.2

相关推荐
©️2020 CSDN 皮肤主题: 我行我“速” 设计师:Amelia_0503 返回首页
实付 79.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值