实现三级联动的效果

痛定思痛。 2021-09-17 03:22 512阅读 0赞

### 1. 数据库建表 ###

![在这里插入图片描述][20181129143247466.png]

**多级表的创建：  
当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>

## 效果： ##

![在这里插入图片描述][20181129151836473.png]

[20181129143247466.png]: /images/20210720/54ff5be6d0cc440381db0a539b352a7b.png
[20181129151836473.png]: /images/20210720/e77738c835254b65aaa5013635e8c48a.png