需求分析
实现三级商品分类列表查询功能
进入页面首先显示所以一级分类，效果如下：
点击列表行的查询下级按钮，进入下级分类列表，同时更新面包屑导航
再次点击表行的查询下级按钮，进入三级分类列表，因为三级分类属于最后一级，所以在列表中不显示查询下级按钮，同时更新面包屑导航
表结构分析
tb_item_cat 商品分类表
列表实现
1.后端代码
修改 pinyougou-sellergoods-interface 工程ItemCatService 接口，新增方法定义
/** * 根据上级 ID 返回列表 * @return */ public List<TbItemCat> findByParentId(Long parentId);
修改 pinyougou-sellergoods-interface 工程ItemCatServiceImpl ，实现方法
/** * 根据上级 ID 查询列表 */ @Override public List<TbItemCat> findByParentId(Long parentId) { TbItemCatExample example1=new TbItemCatExample(); Criteria criteria1 = example1.createCriteria(); criteria1.andParentIdEqualTo(parentId); return itemCatMapper.selectByExample(example1); }
修改 pinyougou-manager-web 的 ItemCatController.java
/** * 根据上级 ID 查询列表 * @param parentId * @return */ @RequestMapping("/findByParentId") public List<TbItemCat> findByParentId(Long parentId){ return itemCatService.findByParentId(parentId); }
2.前端代码
（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="pinyougou" ng-controller="itemCatController" ng-init="findByParentId(0)">
循环列表
<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>
