前言：
小伙伴们，大家好，我是狂奔の蜗牛rz，
今天分享的问题是：如何使用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.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 未选中任何数据前
2.2.2 选中一条数据信息
2.2.3 选中数据后返回
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
