码迷,mamicode.com
首页 > 数据库 > 详细

springboot查询数据库,js实现二级联动效果

时间:2020-04-06 17:41:28      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:info   cti   oracle   attr   length   spring   rac   efi   定义   

1.数据库设计

技术图片

 

 

 实现oracle,mysql不同数据库链接不同的数据类型

2.在跳转到添加页面的时候,去数据库查询parent_id=0的数据,存入modelMap中带入add.html页面

@GetMapping("/add")
public String add(ModelMap mmap) {
   //查询数据库类型,返回oracle和mysql等数据库
   List<DatabaseVo> databaseVo = matedataService.selectDatabases();
   mmap.addAttribute("databases",databaseVo);return "/add";
}

返回的数据使用自定义DatabaseVo来接收;

public class DatabaseVo implements Serializable {
    private static final long serialVersionUID = 1L;
    //编号
    private Long id;
    //数据库名称
    private String name;
}

3.跳转到add.html页面

<div class="form-group">
    <label class="col-sm-3 control-label">数据库类型:</label>
        <div class="col-sm-8">
             <select class="form-control m-b" id="database" th:name="databaseId">
                  <option value="">请选择数据库</option>
                  <option th:each="database : ${databases}" th:value="${database.id}" th:text="${database.name}"></option>
             </select>
      </div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">数据项类型:</label>
<div class="col-sm-8">
<select name="type" id="types" class="form-control m-b" >

</select>
 </div>
</div>

4.js二级联动代码实现

    $("#database").change(function () {
        var databaseId = $("#database").val();
        if (databaseId == null) {
            return;
        }
        $.ajax({
            cache: true,
            type: "get",
            url: prefix + "/getTypeByDataBaseId",
            data: {"databaseId": databaseId},
            success: function (data) {
                console.log(data);
                var types = $("#types").empty();
                for (var i = 0; i < data.data.length; i++) {
                    types.append("<option value = ‘"+ data.data[i].name + "‘>" + data.data[i].name + "</option>");
                }
            }
        })
    })

5.根据数据库id去查询旗下的数据类型,返回的数据跟数据库一致

    @GetMapping("/getTypeByDataBaseId")
    @ResponseBody
    public AjaxResult getTypeByDataBaseId (@RequestParam("databaseId") Long id) {
        //根据数据库Id查询对应的数据类型
        List<TypeVo> typeVo = matedataService.selectTypesByDatabaseId(id);
        if (typeVo == null) {
            throw new RuntimeException("数据为空!");
        }
        return AjaxResult.success(typeVo);
    }

6.实现效果

技术图片

 

======================================================================================

 技术图片

======================================================================================

技术图片

7.总结

基本上的实现思路就是如此,数据库设计因人而异,有些细节可能大家的不一样,调整一下即可。

 

springboot查询数据库,js实现二级联动效果

标签:info   cti   oracle   attr   length   spring   rac   efi   定义   

原文地址:https://www.cnblogs.com/sun2020/p/12642743.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!