实现三级联动的效果

最新推荐文章于 2021-02-02 10:12:25 发布

求学务实

最新推荐文章于 2021-02-02 10:12:25 发布

阅读量1.2k

点赞数 1

分类专栏： Ajax学习篇文章标签：三级联动仿京东首页多级联动 ajax动态刷新 ajax应用

本文链接：https://blog.csdn.net/W_litttle/article/details/84631946

版权

Ajax学习篇专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 数据库建表

在这里插入图片描述

多级表的创建：
当parentId 为0时表示的是一级目录。
查一级目录时parentId为0；
查二级目录时就要把刚才一级目录的id作为二级目录的parentId；
查三级目录的时候就把二级目录的id作为三级目录的parentId；
这也就是建表的原则，一级目录parentId都为0；二级目录parentId为一级目录的id，三级目录parentId为二级目录的id，

2.dao层实现

我这里用的是jpa

public interface TbItemCatRepository extends JpaRepository<tbItemCat, Long>, JpaSpecificationExecutor<tbItemCat> {

	 List<tbItemCat> findByParentId(Long id);
	 	 
}

3.service层实现

public class TbItemCatService {

	@Autowired
	private TbItemCatRepository tr;
	
	public List<tbItemCatVo> getName(Long parentId) {

		System.out.println("nih");
		List<tbItemCat> listItem = tr.findByParentId(parentId);
		List<tbItemCatVo> listItVo = new ArrayList<>();
		for(tbItemCat tc: listItem) {
			tbItemCatVo tv = new tbItemCatVo(tc);
			listItVo.add(tv);
			System.out.println(tv.getName());
		}
		return listItVo;
	}
}

4.controller 层实现

只需要一条查询语句就可以完成三级联动的查询，这也就是刚才那样建表的好处。可以少些代码。

@RequestMapping("/api")
public class ItmeCatController {

	@Autowired
	private TbItemCatService itemService;

	@RequestMapping(value = "/cat", method = RequestMethod.POST)
	@ResponseBody
	public Result<tbItemCatVo> empList(@RequestParam("id") int parentId) {
		Long id = new Long((long)parentId);
		
		List<tbItemCatVo> listItVo = itemService.getName(id);
				
		Result<tbItemCatVo> result = new Result<>(200, "SUCCESS", 1, listItVo);
		
		return result;
	}
	
}

4.result工具类

public class Result<T> {

	private int code;		//状态码
	private String msg;	//信息
    private long count; 	// 数据总量。在分页查询中，这个数值会比当前页面上的数据量要大。
    private List<T> rows;	// 当前页上显示的数据

	public Result() {
		super();
	}

	public Result(int code, String msg, long count, List<T> rows) {
		super();
		this.code = code;
		this.msg = msg;
		this.count = count;
		this.rows = rows;
	}

5.还把vo和po 做了一个转换

这里只写了一个构造方法的转换。用po类初始化vo类

	public tbItemCatVo(tbItemCat tbItemCat) {
		this.id = tbItemCat.getId();
		this.parentId = tbItemCat.getParentId();
		this.name = tbItemCat.getName();
		this.typeId = tbItemCat.getTypeId();
	}

6.html页面的实现

首先分析一波：
1.加载候我们就要刷新出一级菜单。用到onload()函数
2.当点击一级菜单时加载二级菜单。用到onchange()函数
3.当点击二级菜单时加载三级菜单。

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body onload="show_1()">
====== 三级级联 === =

 <select id="p"  onchange="show_2()"></select>
 <select id="c" onchange="show_3()"><option value='0'>----请选择城市----</option></select>
 <select id="a" ><option value='0'>----请选择市区----</option></select>
 
<script type="text/javascript" src="/sxnd-erp/js/basic/jquery-1.11.3.min.js"></script>
<script src="/sxnd-erp/js/basic/city_json.js"></script>
  <script type="text/javascript" >
	function show_1(){
		$.ajax({
		url:'/sxnd-erp/api/cat',
		type:'post',
		data:{'id':0},
		dataType:'json',
		
		success:function(data){ //此date是一个json数组,里面就是Request对象中的数据
		//先在页面写一个option
	        var t="<option value='0'>----一级标题----</option>";
			for(var i=0;i<data.rows.length;i++){//我们需要的是Result中真正地对象。遍历的是里面的对象
			//console.log(data.rows[i].parentId);
			  t+="<option value="+data.rows[i].id+">"+data.rows[i].name+"</option>";
			}
			$("#p").html(t);		
		}
		})	
	}

	function show_2(){	
	    var parentId=$("#p").val();
		$.ajax({
			url:'/sxnd-erp/api/cat',
			type:'post',
			data:{'id':parentId},          //传递post请求参数
			dataType:'json',
			success:function(data){
				var t="<option value='0'>----二级标题----</option>";
				for(var i=0;i<data.rows.length;i++){
					t+="<option value="+data.rows[i].id+">"+data.rows[i].name+"</option>";
				}
				$("#c").html(t);
			 },
			error:function(data){
				alert("二级标题加载失败！");
			 }
		})
		
	}
	
	function show_3(){
		
	    var parentId=$("#c").val();
		$.ajax({
			url:'/sxnd-erp/api/cat',
			type:'post',
			data:{'id':parentId},
			dataType:'json',
			success:function(data){
				var t="<option value='0'>----三级标题----</option>";
				for(var i=0;i<data.rows.length;i++){
					t+="<option value="+data.rows[i].id+">"+data.rows[i].name+"</option>";
				}
				$("#a").html(t);
			 },
			error:function(data){
				alert("三级标题！");
			 }
		})
	}	
</script>
</body>
</html>

效果：

在这里插入图片描述

求学务实

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
实现三级联动的效果

1. 数据库建表多级表的创建：当parentId 为0时表示的是一级目录。查一级目录时parentId为0；查二级目录时就要把刚才一级目录的id作为二级目录的parentId；查三级目录的时候就把二级目录的id作为三级目录的parentId；这也就是建表的原则，一级目录parentId都为0；二级目录parentId为一级目录的id，三级目录parentId为二级目录的id，2.d...
复制链接

扫一扫

专栏目录