Java之品优购课程讲义_day05（2）

最新推荐文章于 2025-09-10 22:21:01 发布

转载最新推荐文章于 2025-09-10 22:21:01 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/13517854/2159828

文章标签：

#java #前端 #ViewUI

本文介绍如何在前端应用中实现商品分类的查询及显示功能，并通过面包屑导航实现不同级别的分类切换。

1.2.1 前端代码
（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

Java之品优购课程讲义_day05（2）

<tr  ng-repeat="entity  in  list">

<td><input  type="checkbox"  ></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>

1.2 面包屑导航
我们需要返回上级列表，需要通过点击面包屑来实现修改 itemCatController.js

$scope.grade=1;//默认为 1 级

//设置级别

$scope.setGrade=function(value){

$scope.grade=value;

}

//读取列表

$scope.selectList=function(p_entity){

if($scope.grade==1){//如果为 1 级

$scope.entity_1=null;

$scope.entity_2=null;

}

if($scope.grade==2){//如果为 2 级

$scope.entity_1=p_entity;

$scope.entity_2=null;

}

if($scope.grade==3){//如果为 3 级

$scope.entity_2=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(entity_1)">{{entity_1.name}}</a></li>

<li><a  href="#"  ng-click="grade=3;selectList(entity_2)">{{entity_2.name}}</a></li>

</ol>

转载于:https://blog.51cto.com/13517854/2159828