省份三级联动+模糊查询+省份单表增删改查_省市区单表查询

作者：从前慢现在也慢 | 2024-07-15 17:45:29

踩

省市区单表查询

省份三级联动

效果图

三级联动点击省份出现市区点击市区出现区域
在这里插入图片描述

在这里插入图片描述

动态sql的模糊查询
在这里插入图片描述

数据库表：数据需要评论1
在这里插入图片描述

pojo实体类（展示一个表）

在这里插入图片描述

mapper接口

TAddressCityMapper接口
在这里插入图片描述
TAddressProvinceMapper接口

  int deleteByPrimaryKey(Integer id);

   int insert(TAddressProvince record);

    TAddressProvince selectByPrimaryKey(Integer id);

    int updateByPrimaryKey(TAddressProvince record);
    List<TAddressProvince> queryAll();
1
2
3
4
5
6
7
8

TAddressTownMapper接口

 List<TAddressTown> queryByName(@Param("cCode")Integer cCode);
1

TAddressCityMapper.xml
在这里插入图片描述
TAddressProvinceMapper.xml

TAddressTownMapper.xml

service层掉下就行了

controller层

在这里插入图片描述

修改页面

<form th:action="@{/chain/upda}"  th:method="post">
  <div style="width: 450px;height:100%; margin:0px auto">
    <h1 style="color:red">修改页面</h1>
    <table border="2px">
      <input type="hidden" th:name="id" th:value="${tAddressProvince.id}">
      <tr>
        <td>省份编号</td>
        <td><input type="text" th:name="code" required th:value="${tAddressProvince.code}"></td>
      </tr>
      <tr>
        <td>省份</td>
        <td><input type="text" th:name="name" required th:value="${tAddressProvince.name}"></td>
      </tr>
        <td>操作</td>
        <td><input th:type="submit" th:value="修改"><a th:href="@{/chain/list}" style="text-decoration: none"> 返回</a></td>
      </tr>
    </table>
  </div>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

allList页面

<script src="http://code.jquery.com/jquery-latest.js"></script>
<body>
<div style="width: 680px;height:100%; margin:0px auto">
  <form th:action="@{/chain/list}" method="get">
    所属省份：
    <select th:name="pName" id="pName">
      <option th:value="${p.code}" th:each="p:${tAddressProvinces}" th:text="${p.name}"></option>
    </select>
    所属市区：
    <select th:name="cName" id="cName">
      <option value=""></option>
    </select>
    所属地区：
    <select th:name="tName" id="tName">
      <option value=""></option>
    </select>
    <input type="submit" th:value="查询" id="query">
    <a type="button" th:href="@{/chain/add}" style="text-decoration: none">添加</a>
  </form>

  <table border="2px">
    <thead>
      <tr>
        <th>省份</th>
        <th>相关操作</th>
      </tr>
    </thead>
    <tbody>
    <tr th:each="list:${tAddressProvinces}">
      <td th:text="${list.name}"></td>
      <td>
        <a th:href="@{/chain/del/(id=${list.id})}">删除</a>
        <a th:href="@{/chain/upd/(id=${list.id})}">编辑</a>
      </td>
    </tr>
    </tbody>
  </table>
<table border="2px">
  <thead>
  <tr>
    <th>省份</th>
    <th>市区</th>
    <th>区域</th>
  </tr>
  </thead>
  <!--这里的数据要从servlet里面获取-->
  <tbody>
  <tr th:each="list:${tAddressCities}">
    <td th:text="${list.TAddressProvince.name}"></td>
    <td th:text="${list.name}"></td>
    <td th:text="${list.TAddressTown.name}"></td>
  </tr>
  </tbody>
</table>
</div>
</body>
<script>
  $("#pName").change(function (){
    var pCode=$("#pName").val();
    $.ajax({
      url:"/chain/getCity/"+pCode,
      type:"get",
      dataType:"json",
      success:function (data){
        //情空重复数据
        $("#cName").empty();
        for (var i=0;i<=data.length;i++){
            $("#cName").append("<option value='"+data[i].code+"'>"+data[i].name+"</option>")
        }
      }
    })
  })

  $("#cName").change(function (){
    var cCode=$("#cName").val();
    $.ajax({
      url:"/chain/getTown/"+cCode,
      type:"get",
      dataType:"json",
      success:function (data){
        $("#tName").empty();
        for (var i=0;i<=data.length;i++){
          $("#tName").append("<option value='"+data[i].code+"'>"+data[i].name+"</option>")
        }
      }
    })
  })

</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

新增页面

<form th:method="post" th:action="@{/chain/addp}">
    <div style="width: 450px;height:100%; margin:0px auto">
        <h1 style="color: aquamarine">新增</h1>
        <table border="2px">
            <tr>
                <td>省份编号</td>
                <td><input type="text" th:name="code"  required></td>
            </tr>
            <tr>
                <td>省份</td>
                <td><input type="text" th:name="name" required></td>
            </tr>
            <tr>
                <td>相关操作</td>
                <td><input th:type="submit" th:value="新增"/><a th:href="@{/chain/list}" style="text-decoration: none"> 返回</a></td>
            </tr>
        </table>
    </div>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

有什么问题的可以评论私信
源码需要口1

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/830460