前言

小伙伴们,大家好,我是狂奔の蜗牛rz,

今天分享的问题是:如何使用SpringBootLayUIMybatisPlus框架来实现数据表格下拉框功能,具体解决方案如下,请各位小伙伴们耐心观看:

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;

/**
 * @ClassName ResultInfo
 * @Description 竞赛成绩实体类
 * @Author 狂奔の蜗牛rz
 * @Date 2022/03/20
 */
// 使用@Data注解,引入无参构造器, set和get方法, 以及toString方法等
@Data
// 使用@AllArgsConstructor注解, 引入有参构造方法
@AllArgsConstructor
// 使用@NoArgsConstructor注解, 再次引入无参构造方法, 防止被有参构造覆盖
@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;

    /**
     * 竞赛类型,默认值为0,0表示初赛,1表示复赛
     */
    private Integer type;

    /**
     * 组竞赛项目编号
     */
    private Integer competitionId;

    /**
     * 参赛队伍编号
     */
    private Integer teamId;

    /**
     * 竞赛记录
     */
    private String record;

    /**
     * 竞赛分数
     */
    private Double score;

    /**
     * 竞赛成绩状态值,默认值为0,0表示未生效,1表示已生效,2表示已作废
     */
    private Integer status;

    /**
     * 是否公布,默认值为0,0表示未公布,1表示已公布
     */
    private Integer publish;

    /**
     * 创建人
     */
    private String creator;

    /**
     * 创建时间
     */
    // 使用@TableField注解, 设置自动填充策略, fill值为FieldFill.INSERT: 表示只在插入时自动填充
    @TableField(fill = FieldFill.INSERT)
    private LocalDateTime createTime;

    /**
     * 修改人
     */
    private String modifier;

    /**
     * 修改时间
     */
    // 使用@TableField注解, 设置自动填充策略, fill值为INSERT_UPDATE: 表示在插入和更新时自动填充
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private LocalDateTime updateTime;

    /**
     * 乐观锁,默认值为1,每次修改其值自动加1
     */
    // 使用@Version注解, 表示其为乐观锁
    @Version
    private Integer version;

    /**
     * 逻辑删除,默认值为0,0表示未删除,1表示已删除
     */
    // 使用@TableLogic注解, 表示其为逻辑删除 (注意: 3.3.0版本之后无需在实体类字段前使用@TableLogic注解)
    // @TableLogic
    private Integer deleted;

    /**
     * 分院名称
     */
    // 使用@TableField注解, 设置exist = false, 表示数据库中不存在该字段
    @TableField(exist = false)
    private String teamName;

    /**
     * 竞赛总分
     */
    // 使用@TableField注解, 设置exist = false, 表示数据库中不存在该字段
    @TableField(exist = false)
    private Integer scoreSum;

    // 使用@TableField注解, 设置exist = false, 表示数据库中不存在该字段
    @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;

/**
 * @ClassName ApplyInfo
 * @Description 报名信息实体类
 * @Author 狂奔の蜗牛rz
 * @Date 2022/03/20
 */
// 使用@Data注解,引入无参构造器, set和get方法, 以及toString方法等
@Data
// 使用@AllArgsConstructor注解, 引入有参构造方法
@AllArgsConstructor
// 使用@NoArgsConstructor注解, 再次引入无参构造方法, 防止被有参构造覆盖
@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;

    /**
     * 竞赛类型,默认值为0,0为初赛,1为决赛
     */
    private Integer type;

    /**
     * 参赛队伍编号
     */
    private Integer teamId;

    /**
     * 备注信息
     */
    private String description;

    /**
     * 提交状态,默认值为0,0为未提交,1为已提交
     */
    private Integer submit;

    /**
     * 审核状态,默认值为0,0为审核中,1为已通过,2为不通过
     */
    private Integer status;

    /**
     * 创建人
     */
    private String creator;

    /**
     * 创建时间
     */
    // 使用@TableField注解, 设置自动填充策略, fill值为FieldFill.INSERT: 表示只在插入时自动填充
    @TableField(fill = FieldFill.INSERT)
    private LocalDateTime createTime;

    /**
     * 修改人
     */
    private String modifier;

    /**
     * 修改时间
     */
    // 使用@TableField注解, 设置自动填充策略, fill值为INSERT_UPDATE: 表示在插入和更新时自动填充
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private LocalDateTime updateTime;

    /**
     * 乐观锁,默认值为0,每次修改其值自动加1
     */
    // 使用@Version注解, 表示其为乐观锁
    @Version
    private Integer version;

    /**
     * 逻辑删除,默认值为0,0表示未删除,1表示已删除
     */
    // 使用@TableLogic注解, 表示其为逻辑删除 (注意: 3.3.0版本之后无需在实体类字段前使用@TableLogic注解)
    // @TableLogic
    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;

/**
 * @ClassName ResultVo
 * @Description 竞赛成绩实体类的视图对象
 * @Author 狂奔の蜗牛rz
 * @Date 2022/03/20
 */
// 使用@Data注解,引入无参构造器, set和get方法, 以及toString方法等
@Data
// 使用@AllArgsConstructor注解, 引入有参构造方法
@AllArgsConstructor
// 使用@NoArgsConstructor注解, 再次引入无参构造方法, 防止被有参构造覆盖
@NoArgsConstructor
// 实现Serializable接口, 实现序列化
public class ResultVo implements Serializable  {

    /**
     * 竞赛成绩编号
     */
    private Integer resultId;

    /**
     * 报名信息编号
     */
    private Integer applyId;

    /**
     * 学工号
     */
    private String idNumber;

    /**
     * 运动会编号
     */
    private Integer sportId;

    /**
     * 竞赛项目
     */
    private Integer projectId;

    /**
     * 竞赛组编号
     */
    private Integer groupId;

    /**
     * 竞赛类型,默认值为0,0表示初赛,1表示复赛
     */
    private Integer type;

    /**
     * 组竞赛项目编号
     */
    private Integer competitionId;

    /**
     * 参赛队伍编号
     */
    private Integer teamId;

    /**
     * 竞赛记录
     */
    private String record;

    /**
     * 竞赛分数
     */
    private Double score;

    /**
     * 竞赛成绩状态值,默认值为0,0表示未生效,1表示已生效,2表示已作废
     */
    private Integer status;

    /**
     * 是否公布,默认值为0,0表示未公布,1表示已公布
     */
    private Integer publish;

    /**
     * 创建人
     */
    private String creator;

    /**
     * 创建时间
     */
    // @DateTimeFormat注解, 将日期转换为固定格式
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    // @JsonFormat注解, 将Json形式的日期进行格式转换
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private LocalDateTime createTime;

    /**
     * 修改人
     */
    private String modifier;

    /**
     * 修改时间
     */
    // @DateTimeFormat注解, 将日期转换为固定格式
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    // @JsonFormat注解, 将Json形式的日期进行格式转换
    @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;

/**
 * @ClassName ApplyVo
 * @Description 申请信息实体类的视图对象
 * @Author 狂奔の蜗牛rz
 * @Date 2022/03/20
 */
// 使用@Data注解,引入无参构造器, set和get方法, 以及toString方法等
@Data
// 使用@AllArgsConstructor注解, 引入有参构造方法
@AllArgsConstructor
// 使用@NoArgsConstructor注解, 再次引入无参构造方法, 防止被有参构造覆盖
@NoArgsConstructor
// 实现Serializable接口, 实现序列化
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;

    /**
     * 竞赛类型,默认值为0,0为初赛,1为决赛
     */
    private Integer type;

    /**
     * 参赛队伍编号
     */
    private Integer teamId;

    /**
     * 备注信息
     */
    private String description;

    /**
     * 提交状态,默认值为0,0为未提交,1为已提交
     */
    private Integer submit;

    /**
     * 审核状态,默认值为0,0为审核中,1为已通过,2为不通过
     */
    private Integer status;

    /**
     * 创建人
     */
    private String creator;

    /**
     * 创建时间
     */
    // @DateTimeFormat注解, 将日期转换为固定格式
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    // @JsonFormat注解, 将Json形式的日期进行格式转换
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private LocalDateTime createTime;

    /**
     * 修改人
     */
    private String modifier;

    /**
     * 修改时间
     */
    // @DateTimeFormat注解, 将日期转换为固定格式
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    // @JsonFormat注解, 将Json形式的日期进行格式转换
    @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;

/**
 * @ClassName ResultInfoMapper
 * @Description 竞赛成绩表 Mapper 接口
 * @Author 狂奔の蜗牛rz
 * @Date 2022/03/20
 */

// 使用@Repository注解, 将其注册为Dao层, 交由Spring容器统一管理
@Repository
// 使用@Mapper注解, 将该接口注册为Mapper接口
@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;

/**
 * @ClassName ApplyInfoMapper
 * @Description 报名申请表 Mapper 接口
 * @Author 狂奔の蜗牛rz
 * @Date 2022/03/20
 */

// 使用@Repository注解, 将其注册为Dao层, 交由Spring容器统一管理
@Repository
// 使用@Mapper注解, 将该接口注册为Mapper接口
@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;

/**
 * @ClassName ResultInfoService
 * @Description 竞赛成绩表 Service层接口
 * @Author 狂奔de蜗牛rz
 * @Date 2022/05/20
 */
public interface ResultInfoService extends IService<ResultInfo> {
    
    /**
     * 添加一条竞赛成绩
     * @param resultInfo 要新增的竞赛成绩实体类
     * @return JsonResult<Integer> 泛型为Integer类型的JsonResult结果集
     */
    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;

/**
 * @ClassName ApplyInfoService
 * @Description 报名申请表 Service层接口
 * @Author 狂奔de蜗牛rz
 * @Date 2022/03/20
 */
public interface ApplyInfoService extends IService<ApplyInfo> {

   /**
     * 通过多条件查询获取申请信息的分页数据
     * @param page 当前页数
     * @param limit 分页大小
     * @param applyInfo 申请信息实体类
     * @return JsonResult<List<ApplyVo>> 泛型为List<ApplyVo>的JsonResult结果集
     */
    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.*;

/**
 * @ClassName ResultInfoServiceImpl
 * @Description 竞赛成绩表 Service层接口实现类
 * @Author 狂奔de蜗牛rz
 * @Date 2022/03/07
 */

// 使用@Service注解, 将该类注册为Service层, 交由Spring的IOC容器统一管理
@Service
public class ResultInfoServiceImpl extends ServiceImpl<ResultInfoMapper, ResultInfo> implements ResultInfoService {

    // 通过类型自动装配ResultInfoMapper接口
    @Autowired
    private ResultInfoMapper resultInfoMapper;
    
    /**
     * 添加一条竞赛成绩
     * @param resultInfo 要新增的竞赛成绩实体类
     * @return JsonResult<Integer> 泛型为Integer类型的JsonResult结果集
     */
    @Override
    public JsonResult<Integer> addResultInfo(ResultInfo resultInfo) {
        // 判断要新插入的竞赛成绩信息是否已经存在(若返回值为false, 则竞赛成绩信息已存在)
        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;

/**
 * @ClassName ApplyInfoServiceImpl
 * @Description 申请信息表 Service层接口实现类
 * @Author 狂奔de蜗牛rz
 * @Date 2022/03/20
 */

// 使用@Service注解, 将该类注册为Service层, 交由Spring的IOC容器统一管理
@Service
public class ApplyInfoServiceImpl extends ServiceImpl<ApplyInfoMapper, ApplyInfo> implements ApplyInfoService {

    // 通过类型自动装配ApplyInfoMapper接口
    @Autowired
    private ApplyInfoMapper applyInfoMapper;
 
    /**
     * 通过多条件查询获取申请信息的分页数据
     * @param page 当前页数
     * @param limit 分页大小
     * @param applyInfo 申请信息实体类
     * @return JsonResult<List<ApplyVo>> 泛型为List<ApplyVo>的JsonResult结果集
     */
    @Override
    public JsonResult<List<ApplyVo>> getApplyInfoListByCondition(Integer page, Integer limit, ApplyInfo applyInfo) {
        // 调用getApplyInfoByLike方法, 获取根据条件查询的报名分页结果
        IPage<ApplyInfo> result = getApplyInfoByLike(applyInfo,page,limit);
        // 获取applyInfoList(存储报名信息记录的List集合)
        List<ApplyInfo> applyInfoList = result.getRecords();
        // 创建一个ArrayList集合applyVoList(存储ApplyVo(报名视图对象)的List集合)
        List<ApplyVo> applyVoList = new ArrayList<>();
        // 使用foreach循环遍历ApplyInfoList(存储报名数据记录的List集合)
        for (ApplyInfo applyInfos : applyInfoList) {
            // 获取ApplyVo(报名视图对象)
            ApplyVo applyVo = new ApplyVo();
            // 将ApplyInfo(报名信息实体类)中的属性复制到ApplyVo(报名视图对象)中去
            BeanUtils.copyProperties(applyInfos,applyVo);
            // 将ApplyVo(报名视图对象)添加到ApplyVoList(存储ApplyVo(报名视图对象)的List集合)中
            applyVoList.add(applyVo);
        }
        // 返回值为调用JsonResult结果集的batchDataSuccess方法, 需传入两个参数(分页数据的总行数和applyVoList(存储ApplyVo(报名视图对象)的List集合)
        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;

/**
 * @ClassName ResultInfoController
 * @Description 竞赛成绩表 前端控制器
 * @Author 狂奔de蜗牛rz
 * @Date 2022/03/20
 */
//使用@Controller注解, 使当前类实现Controller接口, 并交由Spring容器统一管理
@Controller
//使用@RequestMapping注解, 设置get类型的请求映射路径
@RequestMapping("/sport_manager/result_info")
public class ResultInfoController {
    
    // 通过类型自动装配ResultInfoService接口
    @Autowired
    private ResultInfoService resultInfoService;
    
     /**
     * 添加一条竞赛成绩
     * @param resultInfo 竞赛成绩实体类
     * @return JsonResult<Integer> 泛型为Integer的JsonResult结果集
     */
    // 使用PostMapping注解, 设置请求映射路径, 请求方式为post类型
    @PostMapping("/addResultInfo")
    // 使用@ResponseBody注解,把视图控制方法返回到请求页面上
    @ResponseBody
    // 使用@RequestBody注解,将JSON格式的参数自动绑定到ResultInfo体类上
    public JsonResult<Integer> addResultInfo(@RequestBody ResultInfo resultInfo) {
        // 返回值为调用ResultInfoService接口的addResultInfo方法, 添加一条竞赛成绩
        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;

/**
 * @ClassName ApplyInfoController
 * @Description 报名信息表 前端控制器
 * @Author 狂奔de蜗牛rz
 * @Date 2022/03/05
 */
//使用@Controller注解, 使当前类实现Controller接口, 并交由Spring容器统一管理
@Controller
//使用@RequestMapping注解, 设置get类型的请求映射路径
@RequestMapping("/sport_manager/apply_info")
public class ApplyInfoController {

    // 通过类型自动装配ApplyInfoService接口
    @Autowired
    private ApplyInfoService applyInfoService;
    
    /**
     * 通过多条件查询获取报名信息的分页数据
     * @param page 当前页
     * @param limit 分页大小
     * @param ApplyInfo 报名信息实体类
     * @return JsonResult<List<ApplyVo>> 泛型为List<ApplyVo>的JsonResult结果集
     */
    // 使用@GetMapping注解, 设置请求映射路径, 请求方式为get类型
    @GetMapping("/getApplyInfoListByCondition")
    // 使用@ResponseBody注解, 把控制视图方法返回到请求页面上
    @ResponseBody
    public JsonResult<List<ApplyVo>> getApplyInfoListByCondition(Integer page, Integer limit, ApplyInfo ApplyInfo) {
        // 返回值为调用applyInfoService接口的getApplyInfoListByCondition方法, 获取多条件查询后的报名信息
        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;

/**
 * @ClassName JsonResult
 * @Description 处理JSON格式的数据结果
 * @Author 狂奔de蜗牛rz
 * @Date 2022/03/20
 */

// 使用@Data注解,引入无参构造器, set和get方法, 以及toString方法等
@Data
// 使用@AllArgsConstructor注解, 引入有参构造方法
@AllArgsConstructor
// 使用@NoArgsConstructor注解, 再次引入无参构造方法, 防止被有参构造覆盖
@NoArgsConstructor
public class  JsonResult<T> implements Serializable {
    
    /**
     * 返回的状态码: 0表示成功, 1表示失败
     */
    private Integer code;

    /**
     * 返回的状态信息: success表示成功, failure表示失败
     */
    private String msg;

    /**
     * 返回的行数
     */
    private Integer count;

    /**
     * 返回的数据
     */
    private T data;

    /**
     * 单条数据执行成功
     * @param data :返回的数据
     * @return JsonResult<T>
     */
     public static <T> JsonResult<T> oneDataSuccess(T data) {
       //设置单条数据执行成功的状态码,信息以及行数和数据,并将其返回
       return new JsonResult<T>(0,"oneDataSuccess",1,data);
    }

    /**
     * 单条数据执行失败
     * @return JsonResult<T>
     */
    public static <T> JsonResult<T> oneDataFailure() {
        //设置单条数据执行失败的状态码,信息以及行数和数据,并将其返回
        return new JsonResult<T>(1,"oneDataFailure",0,null);
    }

    /**
     * 批量数据执行成功
     * @param count :返回的行数
     * @param data :返回的数据
     */
    public static <T> JsonResult<T> batchDataSuccess(Integer count,T data) {
        //设置多条数据执行失败的状态码,信息以及行数和数据,并将其返回
        return new JsonResult<T>(0,"batchDataSuccess",count,data);
    }

    /**
     * 批量数据执行失败
     * @return JsonResult<T>
     */
    public static <T> JsonResult<T> batchDataFailure() {
        //设置多条数据执行失败的状态码,信息以及行数和数据,并将其返回
        return new JsonResult<T>(1,"batchDataFailure",0,null);
    }
    
    /**
     * 数据已存在异常处理
     * @return JsonResult<T>
     */
    public static <T> JsonResult<T> dataIsExistException() {
        //设置单条数据执行失败的状态码,信息以及行数和数据,并将其返回
        return new JsonResult<T>(4,"existException",0,null);
    }

    /**
     * 数据不存在异常处理
     * @return JsonResult<T>
     */
    public static <T> JsonResult<T> dataNotExistException() {
        //设置单条数据执行失败的状态码,信息以及行数和数据,并将其返回
        return new JsonResult<T>(5,"notExistException",0,null);
    }
    
}

2.LayUI前端主要实现代码

2.1 数据表格下拉框的前端主要实现代码

<div class="layuimini-main">
    <!-- 添加竞赛成绩的form表单 -->
    <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>
            <!-- class="layui-input-block"表示占一行 -->
            <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>
            <!-- class="layui-input-block"表示占一行 -->
            <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>
    /* 加载jquery, layer, form和table等实例 */
    layui.use(['jquery', 'layer', 'table', 'form', 'miniPage', 'tableSelect'], function () {
        // 获取jquery对象
        let $ = layui.jquery,
            // 获取layer对象
            layer = layui.layer,
            // 获取table对象
            table = layui.table,
            // 获取form对象
            form = layui.form,
            // 获取minPage对象
            miniPage = layui.miniPage,
            // 获取tableSelect对象
            tableSelect = layui.tableSelect;

        // 当前弹出层,防止ID被覆盖
        let parentIndex = layer.index;

        /**
         * 初始化表单(即加载表单),要加上,不然刷新部分组件可能会不加载
         */
        form.render();

        /**
         * 选择参赛选手的对话框
         */
        tableSelect.render({
            // 与申请人编号输入框的Id进行绑定
            elem: '#selectApplyId',
            // 表格的唯一键值
            checkedKey: 'applyId',
            // 对话框的刚度
            height:'400',
            // 对话框的宽度
            width:'1200',
            // 开启多条件搜索
            searchType: 'more',
            // 搜索的List集合
            searchList: [
                // 搜索条件1
                {searchKey: 'applyName', searchPlaceholder: '申请人'},
                // 搜索条件2
                {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: [[
                    // 左侧复选框, fixed: 'left' 表示从左向右定位
                    { 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) {
                            // console.log(data);
                            // 所属运动会编号
                            let sId= data.sportId,
                                // 运动会名
                                sName;
                            // 打印信息
                            // console.log("sId=>"+sId);
                            /* 编写获取运动会名称的ajax请求 */
                            $.ajax({
                                // 请求方式为GET
                                type: 'GET',
                                // 数据接口: 请求JSON数据到后端
                                url: 'http://localhost:8080/sport_manager/apply_info/getApplySportList',
                                // 数据类型为json格式
                                dataType: 'json',
                                // 内容类型为json
                                contentType: 'application/json',
                                // 开启同步
                                async: false,
                                // 处理请求的回调函数
                                success: function (data) {
                                    // 若返回的状态码为0, 则执行以下操作
                                    if(data.code === 0) {
                                        // 使用for炸裂来获取运动会列表信息(item是列表中的每一条数据)
                                        $.each(data.data, function (index, item) {
                                            // 若sId值与某一运动会编号相等
                                            if(sId === item.sportId) {
                                                // 则设置其为对应的运动会名
                                                sName = item.sportName;
                                                // 打印信息
                                                // console.log("sName=>"+sName);
                                            }
                                        });
                                    }
                                    // 将运动会名称进行返回
                                    return sName;
                                }
                            });
                            // 将获取到的运动会名称渲染到数据表格中去
                            return '<div><span>'+ sName +'</span></div>';
                        }
                    },
                    {field: 'teamId', title: '所属参赛队伍', templet: function (data) {
                            // 所属参赛队伍编号
                            let tId= data.teamId,
                                // 所属参赛队伍名
                                tName;
                            // 打印信息
                            // console.log("tId=>"+tId);
                            /* 编写获取参赛队伍信息的ajax请求 */
                            $.ajax({
                                // 请求方式为GET
                                type: 'GET',
                                // 数据接口:请求JSON数据到后端
                                url: 'http://localhost:8080/sport_manager/apply_info/getApplyTeamList',
                                // 数据类型为json格式
                                dataType: 'json',
                                // 内容类型为json
                                contentType: 'application/json',
                                // 开启同步
                                async: false,
                                /* 处理请求的回调函数 */
                                success: function (data) {
                                    // 若返回的状态码为0, 则执行以下操作
                                    if(data.code === 0) {
                                        // 使用for炸裂来获取参赛队伍列表信息(item是列表中的每一条数据)
                                        $.each(data.data, function (index, item) {
                                            // 若sId值与某一竞赛组编号相等
                                            if(tId === item.teamId) {
                                                // 则设置其为对应的参赛队伍名
                                                tName = item.teamName;
                                                // 打印信息
                                                // console.log("tName=>"+tName);
                                            }
                                        });
                                    }
                                    // 将参赛队伍名进行返回
                                    return tName;
                                }
                            });
                            // 将获取到的参赛队伍名渲染到数据表格中去
                            return '<div><span>'+ tName +'</span></div>';
                        }
                    },
                    { field: 'groupId', title: '所属竞赛组', sort: true, templet: function (data) {
                            // 所属竞赛组编号
                            let gId= data.groupId,
                                // 竞赛组名
                                gName;
                            // 打印信息
                            // console.log("gId=>"+gId);
                            /* 编写获取参赛队伍信息的ajax请求 */
                            $.ajax({
                                // 请求方式为GET
                                type: 'GET',
                                // 数据接口:请求JSON数据到后端
                                url: 'http://localhost:8080/sport_manager/apply_info/getApplyGroupList',
                                // 数据类型为json格式
                                dataType: 'json',
                                // 内容类型为json
                                contentType: 'application/json',
                                // 开启同步
                                async: false,
                                /* 处理请求的回调函数 */
                                success: function (data) {
                                    // 若返回的状态码为0, 则执行以下操作
                                    if(data.code === 0) {
                                        // 使用for炸裂来获取竞赛组列表信息(item是列表中的每一条数据)
                                        $.each(data.data, function (index, item) {
                                            // 若sId值与某一竞赛组编号相等
                                            if(gId === item.groupId) {
                                                // 则设置其为对应的竞赛组名
                                                gName = item.groupName;
                                                // 打印信息
                                                // console.log("sName=>"+sName);
                                            }
                                        });
                                    }
                                    // 将竞赛组名称进行返回
                                    return gName;
                                }
                            });
                            // 将获取到的竞赛组名称渲染到数据表格中去
                            return '<div><span>'+ gName +'</span></div>';
                        }
                    },
                    { field: 'projectId', title: '所属竞赛项目', sort: true, templet: function (data) {
                            // console.log(data);
                            // 所属竞赛项目编号
                            let pId = data.projectId,
                                // 竞赛项目名
                                pName;
                            // 打印信息
                            console.log("pId=>"+pId);
                            $.ajax({
                                // 请求方式为GET
                                type: 'GET',
                                // 数据接口:请求JSON数据到后端
                                url: 'http://localhost:8080/sport_manager/apply_info/getApplyProjectList',
                                // 数据类型为json格式
                                dataType: 'json',
                                // 内容类型为json
                                contentType: 'application/json',
                                // 开启同步
                                async: false,
                                /* 处理请求的回调函数 */
                                success: function (data) {
                                    // 若返回的状态码为0, 则执行以下操作
                                    if(data.code === 0) {
                                        // 使用for炸裂来获取竞赛组列表信息(item是列表中的每一条数据)
                                        $.each(data.data, function (index, item) {
                                            // 若sId值与某一竞赛项目编号相等
                                            if(pId === item.projectId) {
                                                // 则设置其为对应的竞赛项目名
                                                pName = item.projectName;
                                                // 打印信息
                                                // console.log("pName=>"+pName);
                                            }
                                        });
                                    }
                                    // 将竞赛项目名称进行返回
                                    return pName;
                                }
                            });
                            // 将获取到的竞赛项目名称渲染到数据表格中去
                            return '<div><span>'+ pName +'</span></div>';
                        }
                    },
                    { field: 'competitionId', title: '所属组竞赛项目', sort: true, templet: function (data) {
                            // 所属组竞赛项目编号
                            let cId = data.competitionId,
                                // 组竞赛项目名
                                cName;
                            $.ajax({
                                // 请求方式为GET
                                type: 'GET',
                                // 数据接口:请求JSON数据到后端
                                url: 'http://localhost:8080/sport_manager/apply_info/getApplyCompetitionList',
                                // 数据类型为json格式
                                dataType: 'json',
                                // 内容类型为json
                                contentType: 'application/json',
                                // 开启同步
                                async: false,
                                /* 处理请求的回调函数 */
                                success: function (data) {
                                    // 若返回的状态码为0, 则执行以下操作
                                    if(data.code === 0) {
                                        // 使用for炸裂来获取组竞赛项目列表信息(item是列表中的每一条数据)
                                        $.each(data.data, function (index, item) {
                                            // 若sId值与某一组竞赛项目编号相等
                                            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) {
                                // 若状态值为0, 表示初赛
                                return '<span class="layui-badge layui-bg-green">初赛</span>';
                            } else {
                                // 若状态值为1, 表示决赛
                                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请求 */
                    $.ajax({
                        // 请求方式为GET
                        type: 'GET',
                        // 数据接口:请求JSON数据到后端
                        url: 'http://localhost:8080/sport_manager/apply_info/getApplySportList',
                        // 数据类型为json格式
                        dataType: 'json',
                        // 内容类型为json
                        contentType: 'application/json',
                        // 开启同步
                        async: false,
                        /* 处理请求的回调函数 */
                        success: function (data) {
                            // 若返回的状态码为0, 则执行以下操作
                            if(data.code === 0) {
                                // 使用for炸裂来获取运动会列表信息(item是列表中的每一条数据)
                                $.each(data.data, function (index, item) {
                                    // 若sId值与某一运动会编号相等
                                    if(sportId === item.sportId) {
                                        // 则设置其为对应的运动会名
                                        sportName = item.sportName;
                                    }
                                });
                            }
                            // 将运动会名称进行返回
                            return sportName;
                        }
                    });
                    // 给运动会编号输入框填充值
                    $('#sportId').attr("value",sportId);

                    // 获取竞赛组编号
                    groupId = item.groupId;
                    /* 获取竞赛组名称的ajax请求 */
                    $.ajax({
                        // 请求方式为GET
                        type: 'GET',
                        // 数据接口:请求JSON数据到后端
                        url: 'http://localhost:8080/sport_manager/apply_info/getApplyGroupList',
                        // 数据类型为json格式
                        dataType: 'json',
                        // 内容类型为json
                        contentType: 'application/json',
                        // 开启同步
                        async: false,
                        /* 处理请求的回调函数 */
                        success: function (data) {
                            // 若返回的状态码为0, 则执行以下操作
                            if(data.code === 0) {
                                // 使用for炸裂来获取竞赛组列表信息(item是列表中的每一条数据)
                                $.each(data.data, function (index, item) {
                                    // 若sId值与某一竞赛组编号相等
                                    if(groupId === item.groupId) {
                                        // 则设置其为对应的竞赛组名
                                        groupName = item.groupName;
                                    }
                                });
                            }
                            // 将竞赛组名称进行返回
                            return groupName;
                        }
                    });
                    // 给竞赛组编号输入框填充值
                    $('#groupId').attr("value",groupId);

                    // 获取参赛队伍编号
                    teamId = item.teamId;
                    /* 获取参赛队伍名称的ajax请求 */
                    $.ajax({
                        // 请求方式为GET
                        type: 'GET',
                        // 数据接口:请求JSON数据到后端
                        url: 'http://localhost:8080/sport_manager/apply_info/getApplyTeamList',
                        // 数据类型为json格式
                        dataType: 'json',
                        // 内容类型为json
                        contentType: 'application/json',
                        // 开启同步
                        async: false,
                        /* 处理请求的回调函数 */
                        success: function (data) {
                            // 若返回的状态码为0, 则执行以下操作
                            if(data.code === 0) {
                                // 使用for炸裂来获取参赛队伍列表信息(item是列表中的每一条数据)
                                $.each(data.data, function (index, item) {
                                    // 若sId值与某一参赛队伍编号相等
                                    if(teamId === item.teamId) {
                                        // 则设置其为对应的参赛队伍名
                                        teamName = item.teamName;
                                    }
                                });
                            }
                            // 将参赛队伍名称进行返回
                            return teamName;
                        }
                    });
                    // 给竞赛组编号输入框填充值
                    $('#teamId').attr("value",teamId);

                    // 获取竞赛项目编号
                    projectId = item.projectId;
                    /* 获取竞赛项目名称的ajax请求 */
                    $.ajax({
                        // 请求方式为GET
                        type: 'GET',
                        // 数据接口:请求JSON数据到后端
                        url: 'http://localhost:8080/sport_manager/apply_info/getApplyProjectList',
                        // 数据类型为json格式
                        dataType: 'json',
                        // 内容类型为json
                        contentType: 'application/json',
                        // 开启同步
                        async: false,
                        /* 处理请求的回调函数 */
                        success: function (data) {
                            // 若返回的状态码为0, 则执行以下操作
                            if(data.code === 0) {
                                // 使用for炸裂来获取竞赛组列表信息(item是列表中的每一条数据)
                                $.each(data.data, function (index, item) {
                                    // 若sId值与某一竞赛项目编号相等
                                    if(projectId === item.projectId) {
                                        // 则设置其为对应的竞赛项目名
                                        projectName = item.projectName;
                                    }
                                });
                            }
                            // 将竞赛项目名称进行返回
                            return projectName;
                        }
                    });
                    // 给竞赛项目编号输入框填充值
                    $('#projectId').attr("value",projectId);

                    // 获取组竞赛项目编号
                    competitionId = item.competitionId;
                    /* 获取组竞赛项目名称的ajax请求 */
                    $.ajax({
                        // 请求方式为GET
                        type: 'GET',
                        // 数据接口:请求JSON数据到后端
                        url: 'http://localhost:8080/sport_manager/apply_info/getApplyCompetitionList',
                        // 数据类型为json格式
                        dataType: 'json',
                        // 内容类型为json
                        contentType: 'application/json',
                        // 开启同步
                        async: false,
                        /* 处理请求的回调函数 */
                        success: function (data) {
                            // 若返回的状态码为0, 则执行以下操作
                            if(data.code === 0) {
                                // 使用for炸裂来获取竞赛组列表信息(item是列表中的每一条数据)
                                $.each(data.data, function (index, item) {
                                    // 若sId值与某一竞赛项目编号相等
                                    if(competitionId === item.competitionId) {
                                        // 则设置其为对应的组竞赛项目名
                                        competitionName = item.competitionName;
                                    }
                                });
                            }
                            // 将组竞赛项目名称进行返回
                            return competitionName;
                        }
                    });
                    // 给竞赛项目编号输入框填充值
                    $('#competitionId').attr("value",competitionId);

                    // 获取竞赛类型编号
                    type = item.type;
                    // 判断当前竞赛类型值
                    if(type === 0) {
                        // 若类型值为0, 表示初赛
                        typeName = '初赛';
                    } else {
                        // 若类型值为1, 表示决赛
                        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 () {
            // 定义resultInfo对象及相应属性
            let resultInfo = {
                /* 使用键值对形式表示(applyInfo对象属性以及属性值) */
                // 参赛选手姓名
                '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()
            }
            // 打印数据信息
            // console.log(resultInfo);
            /* 编写添加竞赛成绩的ajax请求 */
            $.ajax({
                // 请求方式为POST
                type: 'POST',
                // 数据接口:请求JSON数据到后端
                url: 'http://localhost:8080/sport_manager/result_info/addResultInfo',
                // 数据来源(将前端的resultInfo对象转换成JSON字符串)
                data: JSON.stringify(resultInfo),
                // 内容类型为json
                contentType: 'application/json',
                /* 处理请求的回调函数 */
                success: function (data) {
                    // 若返回的状态码为0,则执行成功处理操作
                    if(data.code === 0) {
                        // 弹出"添加数据成功"提示信息, {icon: 1}表示成功对钩图标
                        layer.msg("添加竞赛成绩信息成功!",{icon: 1}, {time: 1000});
                        // 关闭弹出层
                        layer.close(parentIndex);
                        /**
                         * 调用数据表格的重载方法:
                         */
                        table.reload('currentTableId', {
                            page: {
                                // 从第一页开始
                                curr: 1
                            }
                        }, 'data');
                    // 若返回的状态码为4,则执行数据已存在异常处理操作
                    } 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 未选中任何数据前

java窗体应用程序下拉框选择事件_spring boot

2.2.2 选中一条数据信息

java窗体应用程序下拉框选择事件_layui_02

2.2.3 选中数据后返回

java窗体应用程序下拉框选择事件_spring boot_03