【管理系统】下拉列表

BUBAI1233

已于 2022-03-09 21:11:00 修改

阅读量180

点赞数

文章标签： java 开发语言

于 2022-03-08 22:22:53 首次发布

本文链接：https://blog.csdn.net/weixin_45879566/article/details/123364417

版权

1. 持久层

1.1 规划需要执行的sql语句

SELECT * FROM ascription WHERE parent=？
ORDER BY code ASC

SELECT name FROM ascription WHERE code=？

1.2 设计接口和抽象方法

    /**
     * 根据父代码查找子列表元素
     * @param parent 父代码
     * @return 子列表元素
     */
    List<Ascription> findByParent(String parent);

    /**
     * 根据代码查找名称
     * @param code 代码
     * @return 具体名称
     */
    String findNameByCode(String code);

1.3 sql映射

    <select id="findByParent" resultType="com.example.hzuniversity.entity.Ascription">
        SELECT * FROM ascription WHERE parent=#{parent}
        ORDER BY code ASC
    </select>

    <select id="findNameByCode" resultType="java.lang.String">
        SELECT name FROM ascription WHERE code=#{code}
    </select>

1.4 单元功能测试

    @Test
    public void findByParent() {
        List<Ascription> list = ascriptionMapper.findByParent("1");
        for (Ascription d : list) {
            System.out.println(d);
        }
    }

2. 服务层

2.1 规划异常

无

2.2 设计接口和抽象方法

    /**
     * 根据父代码查找子列表
     * @param parent 父代码
     * @return 子列表
     */
    List<Ascription> getByParent(String parent);

    /**
     * 根据代码查询名称
     * @param code 代码
     * @return 名称
     */
    String getNameByCode(String code);

    @Override
    public List<Ascription> getByParent(String parent) {
        List<Ascription> list = ascriptionMapper.findByParent(parent);

        // 避免无效数据的传输
        for (Ascription a : list) {
            a.setId(null);
            a.setParent(null);
        }

        return list;
    }

    @Override
    public String getNameByCode(String code) {
        return ascriptionMapper.findNameByCode(code);
    }

2.3 单元功能测试

    @Test
    public void findByParent() {
        List<Ascription> list = ascriptionMapper.findByParent("2");
        for (Ascription d : list) {
            System.out.println(d);
        }
    }

3. 控制层

3.1 异常处理

无

3.2 设计请求

/ascription/
GET
String parent
JsonResult<List< Ascription >>

3.3 实现请求

@RestController // @Controller+@ResponseBody
@RequestMapping("ascription")
public class AscriptionController extends BaseController{
    @Autowired(required = false)
    private IAscriptionService ascriptionService;

    @RequestMapping({"/",""})
    public JsonResult<List<Ascription>> getByParent(String parent) {
        List<Ascription> data = ascriptionService.getByParent(parent);
        return new JsonResult<>(OK, data);
    }
}

3.4 单元功能测试

在这里插入图片描述

4. html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学院专业</title>
    <script src="../js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../js/ascription.js" th:src="@{/js/ascription.js}"></script>
    <script src="../js/jquery.cookie.js" th:src="@{/js/jquery.cookie.js}" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <form id="form-add-new-address">
        <label>二级学院：</label>
        <select id="academy-list" name="academy-list" data-province="---- 选择二级学院 ----"></select>
        <label>专业：</label>
        <select id="major-list" name="major-list" data-city="---- 选择专业 ----"></select>
        <input id="btn-am" type="button" value="保存" />
        <input type="reset" value="重置" />
    </form>
</body>
</html>

5. javascript

$(function () {
    let defaultOption = '<option value="0">----- 请选择 -----</option>';

    $(document).ready(function () {
        showAcademyList();
        $("#major-list").append(defaultOption);
    })

    $("#academy-list").change(function () {
        showMajorList();
    })

    function showAcademyList() {
        $("#academy-list").append(defaultOption);
        $.ajax({
            url: "/ascription",
            type: "GET",
            data: "parent=1",
            dataType: "JSON",
            success: function (json) {
                if (json.state == 200) {
                    let list = json.data;
                    console.log("count="+list.length);
                    for (let i = 0; i < list.length; i++) {
                        console.log(list[i].name);
                        let option = '<option value="' + list[i].code + '">' +list[i].name + '</option>';
                        $("#academy-list").append(option);
                    }
                }
            }
        })
    }

    function showMajorList() {
        let parent = $("#academy-list").val();
        $("#major-list").empty();
        $("#major-list").append(defaultOption);

        if (parent == 0) {
            return;
        }
        $.ajax({
            url: "/ascription",
            type: "GET",
            data: "parent=" + parent,
            dataType: "JSON",
            success: function (json) {
                if (json.state == 200) {
                    let list = json.data;
                    console.log("count="+list.length);
                    for (let i = 0; i < list.length; i++) {
                        console.log(list[i].name);
                        let option = '<option value="' + list[i].code + '">' +list[i].name + '</option>';
                        $("#major-list").append(option);
                    }
                }
            }
        })
    }
})

BUBAI1233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【管理系统】下拉列表

1. 持久层1.1 规划需要执行的sql语句SELECT * FROM ascription WHERE parent=？ORDER BY code ASCSELECT name FROM ascription WHERE code=？1.2 设计接口和抽象方法 /** * 根据父代码查找子列表元素 * @param parent 父代码 * @return 子列表元素 */ List<Ascription> findByPa
复制链接

扫一扫