LayUi的动态表格table中设置下拉框Select编辑器 |
您所在的位置：网站首页 › layui动态数据表格 › LayUi的动态表格table中设置下拉框Select编辑器 |
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} {{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.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; //处理字段更新的逻辑 }); |
【本文地址】
今日新闻 |
推荐新闻 |