前言:
小伙伴们,大家好,我是狂奔の蜗牛rz,当然你们可以叫我蜗牛君,我是一个学习Java快一年时间的小菜鸟,同时还有一个伟大的梦想,那就是有朝一日,成为一个优秀的Java架构师。
首先给各位粉丝朋友们道个歉,在2022年上半年中,我因为参加实习、做毕设和写论文,以及毕业答辩等诸多原因,不得不停更之前的博客系列,不过现在我忙完后就又回来了,后续将会给大家分享更多的编程干货。
最近这段时间我会将在毕设项目的编写过程中所遇到的问题以及解决问题的方法进行总结,整理成这个 SpringBoot+LayUI前后端分离项目实战系列 。
特别提醒:如果对 SpringBoot+LayUI前后端分离项目实战系列感兴趣的,可以阅读本系列往期博客:
第一篇:SpringBoot+LayUI模板引擎+MybatisPlus 前后端分离 实现系统公告通知
第二篇:SpringBoot+LayUI+MybatisPlus+Echarts图表 前后端分离 实现数据统计功能
第三篇:SpringBoot+LayUI+MybatisPlus 前后端分离 实现排名统计功能
今天分享的问题是:如何使用SpringBoot、LayUI和MybatisPlus框架来实现数据表格下拉框功能,具体解决方案如下,请各位小伙伴们耐心观看:
1.SpringBoot后端主要实现代码
1.1 实体类和视图对象的实现代码
1.1.1 ResultInfo实体类和ApplyInfo实体类
1.1.1.1 ResultInfo实体类的实现代码
package com.rz.sport_manager.entity.pojo;
import com.baomidou.mybatisplus.annotation.*;
import java.time.LocalDateTime;
import java.io.Serializable;
import com.rz.sport_manager.entity.vo.PieVO;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
@EqualsAndHashCode(callSuper = false)
public class ResultInfo implements Serializable {
private static final long serialVersionUID = 1L;
@TableId(value = "result_id", type = IdType.AUTO)
private Integer resultId;
private Integer applyId;
private String idNumber;
private Integer sportId;
private Integer projectId;
private Integer groupId;
private Integer type;
private Integer competitionId;
private Integer teamId;
private String record;
private Double score;
private Integer status;
private Integer publish;
private String creator;
@TableField(fill = FieldFill.INSERT)
private LocalDateTime createTime;
private String modifier;
@TableField(fill = FieldFill.INSERT_UPDATE)
private LocalDateTime updateTime;
@Version
private Integer version;
private Integer deleted;
@TableField(exist = false)
private String teamName;
@TableField(exist = false)
private Integer scoreSum;
@TableField(exist = false)
private PieVO pieVO;
}
1.1.1.2 ApplyInfo实体类的实现代码
package com.rz.sport_manager.entity.pojo;
import com.baomidou.mybatisplus.annotation.*;
import java.time.LocalDateTime;
import java.io.Serializable;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
@EqualsAndHashCode(callSuper = false)
public class ApplyInfo implements Serializable {
private static final long serialVersionUID = 1L;
@TableId(value = "apply_id", type = IdType.AUTO)
private Integer applyId;
private String applyName;
private String idNumber;
private String phone;
private Integer sportId;
private Integer projectId;
private Integer groupId;
private Integer competitionId;
private Integer type;
private Integer teamId;
private String description;
private Integer submit;
private Integer status;
private String creator;
@TableField(fill = FieldFill.INSERT)
private LocalDateTime createTime;
private String modifier;
@TableField(fill = FieldFill.INSERT_UPDATE)
private LocalDateTime updateTime;
@Version
private Integer version;
private Integer deleted;
}
1.1.2 ResultInVo和ApplyVo视图对象的实现代码
1.1.2.1 ResultInVo视图对象的实现代码
package com.rz.sport_manager.entity.vo;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.format.annotation.DateTimeFormat;
import java.io.Serializable;
import java.time.LocalDateTime;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class ResultVo implements Serializable {
private Integer resultId;
private Integer applyId;
private String idNumber;
private Integer sportId;
private Integer projectId;
private Integer groupId;
private Integer type;
private Integer competitionId;
private Integer teamId;
private String record;
private Double score;
private Integer status;
private Integer publish;
private String creator;
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime createTime;
private String modifier;
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime updateTime;
}
1.1.2.2 ApplyVo视图对象的实现代码
package com.rz.sport_manager.entity.vo;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.format.annotation.DateTimeFormat;
import java.io.Serializable;
import java.time.LocalDateTime;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class ApplyVo implements Serializable {
private Integer applyId;
private String applyName;
private String idNumber;
private String phone;
private Integer sportId;
private Integer projectId;
private Integer groupId;
private Integer competitionId;
private Integer type;
private Integer teamId;
private String description;
private Integer submit;
private Integer status;
private String creator;
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime createTime;
private String modifier;
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime updateTime;
}
1.2 Mapper接口实现代码和Mapper.xml映射文件
1.2.1 ResultInfoMapper和ApplyInfoMapper接口实现代码
1.2.1.1 ResultInfoMapper接口实现代码
package com.rz.sport_manager.mapper;
import com.rz.sport_manager.entity.pojo.ResultInfo;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
@Repository
@Mapper
public interface ResultInfoMapper extends BaseMapper<ResultInfo> {
}
1.2.1.2 ApplyInfoMapper接口实现代码
package com.rz.sport_manager.mapper;
import com.rz.sport_manager.entity.pojo.ApplyInfo;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
@Repository
@Mapper
public interface ApplyInfoMapper extends BaseMapper<ApplyInfo> {
}
1.2.2 ResultInfoMapper.xml和ApplyInfoMapper.xml映射文件
1.2.2.1 ResultInfoMapper.xml映射文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.rz.sport_manager.mapper.ResultInfoMapper">
</mapper>
1.2.2.2 ApplyInfoMapper.xml映射文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.rz.sport_manager.mapper.ApplyInfoMapper">
</mapper>
1.3 服务层接口与其实现类的主要实现代码
1.3.1 ResultInfoService和ApplyInfoService服务层接口的实现代码
1.3.1.1 ResultInfoService服务层接口的实现代码
package com.rz.sport_manager.service;
import com.rz.sport_manager.entity.pojo.ResultInfo;
import com.baomidou.mybatisplus.extension.service.IService;
import com.rz.sport_manager.entity.vo.*;
import com.rz.sport_manager.utils.JsonResult;
import java.util.List;
public interface ResultInfoService extends IService<ResultInfo> {
public JsonResult<Integer> addResultInfo(ResultInfo resultInfo);
}
1.3.1.1 ApplyInfoService服务层接口的实现代码
package com.rz.sport_manager.service;
import com.rz.sport_manager.entity.pojo.ResultInfo;
import com.baomidou.mybatisplus.extension.service.IService;
import com.rz.sport_manager.entity.vo.*;
import com.rz.sport_manager.utils.JsonResult;
import java.util.List;
public interface ApplyInfoService extends IService<ApplyInfo> {
public JsonResult<List<ApplyVo>> getApplyInfoListByCondition(Integer page, Integer limit, ApplyInfo applyInfo);
}
1.3.2 ResultInfoServiceImpl和ApplyInfoServiceImpl服务层接口实现类的实现代码
1.3.2.1 ResultInfoServiceImpl服务层接口实现类的实现代码
package com.rz.sport_manager.service.impl;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.rz.sport_manager.entity.vo.*;
import com.rz.sport_manager.mapper.*;
import com.rz.sport_manager.service.ResultInfoService;
import com.rz.sport_manager.utils.JsonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.*;
@Service
public class ResultInfoServiceImpl extends ServiceImpl<ResultInfoMapper, ResultInfo> implements ResultInfoService {
@Autowired
private ResultInfoMapper resultInfoMapper;
@Override
public JsonResult<Integer> addResultInfo(ResultInfo resultInfo) {
if(!checkResultInfoListIsExist(resultInfo)) {
return JsonResult.oneDataSuccess(resultInfoMapper.insert(resultInfo));
} else {
return JsonResult.dataIsExistException();
}
}
}
1.3.2.2 ResultInfoServiceImpl服务层接口实现类的实现代码
package com.rz.sport_manager.service.impl;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.rz.sport_manager.entity.pojo.*;
import com.rz.sport_manager.entity.vo.*;
import com.rz.sport_manager.mapper.*;
import com.rz.sport_manager.service.ApplyInfoService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.rz.sport_manager.utils.JsonResult;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.ObjectUtils;
import java.util.ArrayList;
import java.util.List;
@Service
public class ApplyInfoServiceImpl extends ServiceImpl<ApplyInfoMapper, ApplyInfo> implements ApplyInfoService {
@Autowired
private ApplyInfoMapper applyInfoMapper;
@Override
public JsonResult<List<ApplyVo>> getApplyInfoListByCondition(Integer page, Integer limit, ApplyInfo applyInfo) {
IPage<ApplyInfo> result = getApplyInfoByLike(applyInfo,page,limit);
List<ApplyInfo> applyInfoList = result.getRecords();
List<ApplyVo> applyVoList = new ArrayList<>();
for (ApplyInfo applyInfos : applyInfoList) {
ApplyVo applyVo = new ApplyVo();
BeanUtils.copyProperties(applyInfos,applyVo);
applyVoList.add(applyVo);
}
return JsonResult.batchDataSuccess((int) result.getTotal(), applyVoList);
}
}
1.4 Controller控制层的实现代码
1.4.1 ResultInfoController控制层的实现代码
package com.rz.sport_manager.controller;
import com.rz.sport_manager.service.ResultInfoService;
import com.rz.sport_manager.utils.JsonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@Controller
@RequestMapping("/sport_manager/result_info")
public class ResultInfoController {
@Autowired
private ResultInfoService resultInfoService;
@PostMapping("/addResultInfo")
@ResponseBody
public JsonResult<Integer> addResultInfo(@RequestBody ResultInfo resultInfo) {
return resultInfoService.addResultInfo(resultInfo);
}
}
1.4.2 ApplyInfoController控制层的实现代码
package com.rz.sport_manager.controller;
import com.rz.sport_manager.entity.pojo.ApplyInfo;
import com.rz.sport_manager.entity.vo.*;
import com.rz.sport_manager.service.ApplyInfoService;
import com.rz.sport_manager.utils.JsonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@Controller
@RequestMapping("/sport_manager/apply_info")
public class ApplyInfoController {
@Autowired
private ApplyInfoService applyInfoService;
@GetMapping("/getApplyInfoListByCondition")
@ResponseBody
public JsonResult<List<ApplyVo>> getApplyInfoListByCondition(Integer page, Integer limit, ApplyInfo ApplyInfo) {
return applyInfoService.getApplyInfoListByCondition(page, limit, ApplyInfo);
}
}
1.5 JsonResult工具类的实现代码
package com.rz.sport_manager.utils;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class JsonResult<T> implements Serializable {
private Integer code;
private String msg;
private Integer count;
private T data;
public static <T> JsonResult<T> oneDataSuccess(T data) {
return new JsonResult<T>(0,"oneDataSuccess",1,data);
}
public static <T> JsonResult<T> oneDataFailure() {
return new JsonResult<T>(1,"oneDataFailure",0,null);
}
public static <T> JsonResult<T> batchDataSuccess(Integer count,T data) {
return new JsonResult<T>(0,"batchDataSuccess",count,data);
}
public static <T> JsonResult<T> batchDataFailure() {
return new JsonResult<T>(1,"batchDataFailure",0,null);
}
public static <T> JsonResult<T> dataIsExistException() {
return new JsonResult<T>(4,"existException",0,null);
}
public static <T> JsonResult<T> dataNotExistException() {
return new JsonResult<T>(5,"notExistException",0,null);
}
}
2.LayUI前端主要实现代码
2.1 数据表格下拉框的前端主要实现代码
<div class="layuimini-main">
<div class="layui-form layuimini-form">
<div class="layui-form-item">
<label class="layui-form-label required" for="selectApplyId">参赛选手</label>
<div class="layui-input-inline" style="width: 240px;">
<input id="applyId" type="hidden" name="applyId" value="">
<input id="selectApplyId" type="text" name="applyId" class="layui-input" lay-verify="required" lay-reqtext="参赛选手不能为空" placeholder="请点击选择要录入成绩的参赛选手" autocomplete="off" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required" for="idNumber">学工号</label>
<div class="layui-input-inline" style="width: 240px;" >
<input type="text" id="idNumber" name="idNumber" class="layui-input" lay-verify="required" lay-reqtext="学工号不能为空" placeholder="学工号无需手动输入" autocomplete="off">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required" for="selectSportId">所属运动会</label>
<div class="layui-input-inline" style="width: 240px;">
<input id="sportId" type="hidden" name="sportId" value="">
<input id="selectSportId" type="text" name="sportId" class="layui-input" lay-verify="required" lay-reqtext="所属运动会不能为空" placeholder="所属运动会无需手动输入">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required" for="selectTeamId">所属参赛队伍</label>
<div class="layui-input-inline" style="width: 240px;">
<input id="teamId" type="hidden" name="teamId" value="">
<input id="selectTeamId" type="text" name="teamId" class="layui-input" lay-verify="required" lay-reqtext="所属参赛队伍不能为空" placeholder="所属参赛队伍无需手动输入">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required" for="selectGroupId">所属竞赛组</label>
<div class="layui-input-inline" style="width: 240px;">
<input id="groupId" type="hidden" name="groupId" value="">
<input id="selectGroupId" type="text" name="groupId" class="layui-input" lay-verify="required" lay-reqtext="所属竞赛组不能为空" placeholder="所属竞赛组无需手动输入">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required" for="selectProjectId">所属竞赛项目</label>
<div class="layui-input-inline" style="width: 240px;">
<input id="projectId" type="hidden" name="projectId" value="">
<input id="selectProjectId" type="text" name="projectId" class="layui-input" lay-verify="required" lay-reqtext="所属竞赛项目不能为空" placeholder="所属竞赛项目无需手动输入">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required" for="selectCompetitionId">所属组竞赛项目</label>
<div class="layui-input-inline" style="width: 240px;">
<input id="competitionId" type="hidden" name="competitionId" value="">
<input id="selectCompetitionId" type="text" name="competitionId" class="layui-input" lay-verify="required" lay-reqtext="所属竞赛组项目不能为空" placeholder="所属组竞赛项目无需手动输入">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required" for="selectType">竞赛类型</label>
<div class="layui-input-block" style="width: 240px;">
<input id="type" type="hidden" name="type" value="">
<input id="selectType" type="text" name="type" class="layui-input" lay-verify="required" lay-reqtext="竞赛类型不能为空" placeholder="竞赛类型无需手动输入">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required" for="record">竞赛记录</label>
<div class="layui-input-block">
<input type="text" id="record" name="record" class="layui-input" style="width: 240px;" placeholder="请设置竞赛记录" autocomplete="off">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required" for="score">竞赛分数</label>
<div class="layui-input-block">
<input type="text" id="score" name="score" class="layui-input" style="width: 240px;" placeholder="请设置竞赛分数" autocomplete="off">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">保存</button>
<button class="layui-btn" lay-submit lay-filter="resetBtn">重置</button>
</div>
</div>
</div>
</div>
<script>
layui.use(['jquery', 'layer', 'table', 'form', 'miniPage', 'tableSelect'], function () {
let $ = layui.jquery,
layer = layui.layer,
table = layui.table,
form = layui.form,
miniPage = layui.miniPage,
tableSelect = layui.tableSelect;
let parentIndex = layer.index;
form.render();
tableSelect.render({
elem: '#selectApplyId',
checkedKey: 'applyId',
height:'400',
width:'1200',
searchType: 'more',
searchList: [
{searchKey: 'applyName', searchPlaceholder: '申请人'},
{searchKey: 'idNumber', searchPlaceholder: '学工号'},
],
table: {
url: 'http://localhost:8080/sport_manager/apply_info/getApplyInfoListByCondition',
where: { applyId: '', idNumber: '', sportId: '', projectId: '', groupId: '', competitionId: '', teamId : '', submit: '1', status: '1'},
cols: [[
{ type: 'radio' ,fixed: 'left', width: 30},
{ field: 'applyId', title: '编号', sort: true},
{ field: 'applyName', title: '申请人', sort: true},
{ field: 'idNumber', title: '学工号', sort: true},
{field: 'sportId', title: '所属运动会', sort: true, templet: function (data) {
let sId= data.sportId,
sName;
$.ajax({
type: 'GET',
url: 'http://localhost:8080/sport_manager/apply_info/getApplySportList',
dataType: 'json',
contentType: 'application/json',
async: false,
success: function (data) {
if(data.code === 0) {
$.each(data.data, function (index, item) {
if(sId === item.sportId) {
sName = item.sportName;
}
});
}
return sName;
}
});
return '<div><span>'+ sName +'</span></div>';
}
},
{field: 'teamId', title: '所属参赛队伍', templet: function (data) {
let tId= data.teamId,
tName;
$.ajax({
type: 'GET',
url: 'http://localhost:8080/sport_manager/apply_info/getApplyTeamList',
dataType: 'json',
contentType: 'application/json',
async: false,
success: function (data) {
if(data.code === 0) {
$.each(data.data, function (index, item) {
if(tId === item.teamId) {
tName = item.teamName;
}
});
}
return tName;
}
});
return '<div><span>'+ tName +'</span></div>';
}
},
{ field: 'groupId', title: '所属竞赛组', sort: true, templet: function (data) {
let gId= data.groupId,
gName;
$.ajax({
type: 'GET',
url: 'http://localhost:8080/sport_manager/apply_info/getApplyGroupList',
dataType: 'json',
contentType: 'application/json',
async: false,
success: function (data) {
if(data.code === 0) {
$.each(data.data, function (index, item) {
if(gId === item.groupId) {
gName = item.groupName;
}
});
}
return gName;
}
});
return '<div><span>'+ gName +'</span></div>';
}
},
{ field: 'projectId', title: '所属竞赛项目', sort: true, templet: function (data) {
let pId = data.projectId,
pName;
console.log("pId=>"+pId);
$.ajax({
type: 'GET',
url: 'http://localhost:8080/sport_manager/apply_info/getApplyProjectList',
dataType: 'json',
contentType: 'application/json',
async: false,
success: function (data) {
if(data.code === 0) {
$.each(data.data, function (index, item) {
if(pId === item.projectId) {
pName = item.projectName;
}
});
}
return pName;
}
});
return '<div><span>'+ pName +'</span></div>';
}
},
{ field: 'competitionId', title: '所属组竞赛项目', sort: true, templet: function (data) {
let cId = data.competitionId,
cName;
$.ajax({
type: 'GET',
url: 'http://localhost:8080/sport_manager/apply_info/getApplyCompetitionList',
dataType: 'json',
contentType: 'application/json',
async: false,
success: function (data) {
if(data.code === 0) {
$.each(data.data, function (index, item) {
if(cId === item.competitionId) {
cName = item.competitionName;
}
});
}
return cName;
}
});
return '<div><span>'+ cName +'</span></div>';
}
},
{ field: 'type', title: '竞赛类型', sort: true, templet: function (data) {
let checkType = data.type;
if(checkType === 0) {
return '<span class="layui-badge layui-bg-green">初赛</span>';
} else {
return '<span class="layui-badge layui-bg-blue">决赛</span>';
}
}
},
]]
},
done: function (elem, data) {
let applyId, applyName,idNumber,
sportId, sportName,
teamId, teamName,
groupId, groupName,
projectId, projectName,
competitionId, competitionName,
type, typeName;
layui.each(data.data, function (index, item) {
applyId = item.applyId;
$('#applyId').attr("value",applyId);
applyName = item.applyName;
idNumber = item.idNumber;
sportId = item.sportId;
$.ajax({
type: 'GET',
url: 'http://localhost:8080/sport_manager/apply_info/getApplySportList',
dataType: 'json',
contentType: 'application/json',
async: false,
success: function (data) {
if(data.code === 0) {
$.each(data.data, function (index, item) {
if(sportId === item.sportId) {
sportName = item.sportName;
}
});
}
return sportName;
}
});
$('#sportId').attr("value",sportId);
groupId = item.groupId;
$.ajax({
type: 'GET',
url: 'http://localhost:8080/sport_manager/apply_info/getApplyGroupList',
dataType: 'json',
contentType: 'application/json',
async: false,
success: function (data) {
if(data.code === 0) {
$.each(data.data, function (index, item) {
if(groupId === item.groupId) {
groupName = item.groupName;
}
});
}
return groupName;
}
});
$('#groupId').attr("value",groupId);
teamId = item.teamId;
$.ajax({
type: 'GET',
url: 'http://localhost:8080/sport_manager/apply_info/getApplyTeamList',
dataType: 'json',
contentType: 'application/json',
async: false,
success: function (data) {
if(data.code === 0) {
$.each(data.data, function (index, item) {
if(teamId === item.teamId) {
teamName = item.teamName;
}
});
}
return teamName;
}
});
$('#teamId').attr("value",teamId);
projectId = item.projectId;
$.ajax({
type: 'GET',
url: 'http://localhost:8080/sport_manager/apply_info/getApplyProjectList',
dataType: 'json',
contentType: 'application/json',
async: false,
success: function (data) {
if(data.code === 0) {
$.each(data.data, function (index, item) {
if(projectId === item.projectId) {
projectName = item.projectName;
}
});
}
return projectName;
}
});
$('#projectId').attr("value",projectId);
competitionId = item.competitionId;
$.ajax({
type: 'GET',
url: 'http://localhost:8080/sport_manager/apply_info/getApplyCompetitionList',
dataType: 'json',
contentType: 'application/json',
async: false,
success: function (data) {
if(data.code === 0) {
$.each(data.data, function (index, item) {
if(competitionId === item.competitionId) {
competitionName = item.competitionName;
}
});
}
return competitionName;
}
});
$('#competitionId').attr("value",competitionId);
type = item.type;
if(type === 0) {
typeName = '初赛';
} else {
typeName = '决赛';
}
$('#type').attr("value",type);
})
elem.val(applyName);
$('#idNumber').val(idNumber);
$('#selectSportId').val(sportName);
$('#selectGroupId').val(groupName);
$('#selectTeamId').val(teamName);
$('#selectProjectId').val(projectName);
$('#selectCompetitionId').val(competitionName);
$('#selectType').val(typeName);
}
});
form.on('submit(saveBtn)', function () {
let resultInfo = {
'applyId' : $('#applyId').val(),
'idNumber' : $('#idNumber').val(),
'sportId' : $('#sportId').val(),
'teamId' : $('#teamId').val(),
'groupId' : $('#groupId').val(),
'projectId' : $('#projectId').val(),
'competitionId' : $('#competitionId').val(),
'type' : $('#type').val(),
'record' : $('#record').val(),
'score' : $('#score').val()
}
$.ajax({
type: 'POST',
url: 'http://localhost:8080/sport_manager/result_info/addResultInfo',
data: JSON.stringify(resultInfo),
contentType: 'application/json',
success: function (data) {
if(data.code === 0) {
layer.msg("添加竞赛成绩信息成功!",{icon: 1}, {time: 1000});
layer.close(parentIndex);
table.reload('currentTableId', {
page: {
curr: 1
}
}, 'data');
} else {
layer.msg("该竞赛成绩信息已存在, 请勿重复添加!", {icon: 7}, {time: 1000});
}
}
});
return false;
});
form.on('submit(resetBtn)', function () {
$('#applyId').val("");
$('#selectApplyId').val("");
$('#idNumber').val("");
$('#sportId').val("");
$('#selectSportId').val("");
$('#projectId').val("");
$('#selectProjectId').val("");
$('#groupId').val("");
$('#selectGroupId').val("");
$('#competitionId').val("");
$('#selectCompetitionId').val("");
$('#type').val("");
$('#selectType').val("");
$('#teamId').val("");
$('#selectTeamId').val("");
$('#record').val("");
$('#score').val("");
form.render("select");
form.render();
});
});
</script>
2.2 数据表格下拉框的前端页面显示效果
2.2.1 未选中任何数据前
![在这里插入图片描述](https://img-blog.csdnimg.cn/852c9f128a29464682884e9a7db56ba5.png#pic_center)
2.2.2 选中一条数据信息
![在这里插入图片描述](https://img-blog.csdnimg.cn/8f70f07ba0d34106bd192f7d9466bea7.png#pic_center)
2.2.3 选中数据后返回
![在这里插入图片描述](https://img-blog.csdnimg.cn/9027cf4e123d4fcaac3151bc0333f5f0.png#pic_center)
以上就是如何使用SpringBoot、LayUI和MybatisPlus框架来实现数据表格下拉框功能的所有分享内容了。欢迎各位小伙伴讨论和学习,觉得还不错的不妨给蜗牛君点个关注,顺便来个一键三连。我们下期见,拜拜啦!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)