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>