商品三级分类和和面包屑导航

最新推荐文章于 2022-08-19 22:39:02 发布

小杨与bug的斗争

最新推荐文章于 2022-08-19 22:39:02 发布

阅读量422

点赞数 1

分类专栏：分布式电商项目 angularJs

本文链接：https://blog.csdn.net/BeLoved_Code/article/details/105884517

版权

分布式电商项目同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

angularJs

7 篇文章 0 订阅

订阅专栏

文章目录

- - 商品的三级分类
  - 面包屑导航

商品的三级分类

商品的三级分类是根据商品的父id和分类自己的id，如果分类的父id对应其他分类的id，这就形成了两级分类，三级分类在此基础上再嵌套一级就形成了三级分类。id为0表示是顶级分类

在这里插入图片描述
后端代码

	/**
	 * 根据上级ID返回列表
	 * @return
	 */
	public List<TbItemCat> findByParentId(Long parentId);
修改ItemCatServiceImpl ，实现方法
	/**
	 * 根据上级ID查询列表
	 */
	@Override
	public List<TbItemCat> findByParentId(Long parentId) {		
		TbItemCatExample example1=new TbItemCatExample();
		Criteria criteria1 = example1.createCriteria();
		criteria1.andParentIdEqualTo(parentId);
		return  itemCatMapper.selectByExample(example1);
	}
修改ItemCatController.java
	/**
	 * 根据上级ID查询列表
	 * @param parentId
	 * @return
	 */
	@RequestMapping("/findByParentId")
	public List<TbItemCat> findByParentId(Long parentId){
		return itemCatService.findByParentId(parentId);
	}

前端代码

（1）修改itemCatService.js
//根据上级ID查询下级列表
	this.findByParentId=function(parentId){
		return $http.get('../itemCat/findByParentId.do?parentId='+parentId);
	}
（2）修改itemCatController.js
    //根据上级ID显示下级列表 
	$scope.findByParentId=function(parentId){
		itemCatService.findByParentId(parentId).success(
			function(response){
				$scope.list=response;
			}
		);
	}
（3）修改item_cat.html
引入JS
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript" src="../js/service/itemCatService.js"></script>
<script type="text/javascript" src="../js/controller/baseController.js"></script>
<script type="text/javascript" src="../js/controller/itemCatController.js"></script>
指令定义
<body class="hold-transition skin-red sidebar-mini" ng-app="youlexuan" ng-controller="itemCatController" ng-init="findByParentId(0)">
循环列表
<tr ng-repeat="entity in list">
		<td><input type="checkbox" class="eachbox"></td>			                              
		<td>{{entity.id}}</td>
		<td>{{entity.name}}</td>									    
		<td>{{entity.typeId}}</td>									      
		<td class="text-center">		                                     
		<button type="button" class="btn bg-olive btn-xs" ng-click="findByParentId(entity.id)">查询下级</button> 		                                     
		<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>                                           
	</td>
</tr>

在这里插入图片描述

面包屑导航

在这里插入图片描述

修改itemCatController.js 
	$scope.grade=1;//默认为1级
	//设置级别
	$scope.setGrade=function(value){
		$scope.grade=value;
	}
	//读取列表
	$scope.selectList=function(p_entity){
		if($scope.grade==1){//如果为1级
			$scope.entity1=null;	
			$scope.entity2=null;
		}
		if($scope.grade==2){//如果为2级
			$scope.entity1=p_entity;	
			$scope.entity2=null;
		}
		if($scope.grade==3){//如果为3级
			$scope.entity2=p_entity;
		}
		$scope.findByParentId(p_entity.id);	//查询此级下级列表
	}
修改列表的查询下级按钮，设定级别值后 显示列表
		<span ng-if="grade!=3">                                     
		<button type="button" class="btn bg-olive btn-xs" ng-click="setGrade(grade+1);selectList(entity)">查询下级</button> 		                                     
		</span>                                  	
这里我们使用了ng-if指令，用于条件判断，当级别不等于3的时候才显示“查询下级”按钮
绑定面包屑：
<ol class="breadcrumb">	                        	
  <li><a href="#" ng-click="grade=1;selectList({id:0})">顶级分类列表</a></li>
  <li><a href="#" ng-click="grade=2;selectList(entity1)">{{entity1.name}}</a></li>
  <li><a href="#" ng-click="grade=3;selectList(entity2)">{{entity2.name}}</a></li>
</ol>
完善面包屑的/：
<li>
	<a href="#" ng-click="grade=1;selectList({id:0})">顶级分类列表</a>
	<span ng-if="grade > 1" style="color: #ccc">/</span>
</li>
<li>
	<a href="#" ng-click="grade=2;selectList(entity1)">{{entity1.name}}</a>
	<span ng-if="grade==3" style="color: #ccc">/</span>
</li>

小杨与bug的斗争

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
商品三级分类和和面包屑导航

文章目录商品的三级分类面包屑导航商品的三级分类商品的三级分类是根据商品的父id和分类自己的id，如果分类的父id对应其他分类的id，这就形成了两级分类，三级分类在此基础上再嵌套一级就形成了三级分类。id为0表示是顶级分类面包屑导航...
复制链接

扫一扫