SpringBoot+LayUI+MybatisPlus 前后端分离 实现数据表格下拉框功能

前言：

小伙伴们，大家好，我是狂奔の蜗牛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;

/**
 * @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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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
3
4
5

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
2
3
4
5

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

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);
    }
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

---

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707

2.2 数据表格下拉框的前端页面显示效果

2.2.1 未选中任何数据前

2.2.2 选中一条数据信息

2.2.3 选中数据后返回

---

以上就是如何使用SpringBoot、LayUI和MybatisPlus框架来实现数据表格下拉框功能的所有分享内容了。欢迎各位小伙伴讨论和学习，觉得还不错的不妨给蜗牛君点个关注，顺便来个一键三连。我们下期见，拜拜啦！