品优购_面包屑, 查询下一级的实现思路

需求1:查询下一级实现思路

在循环遍历数据的时候将要点击的数据的id作为下一级的parentId作为查询条件, 查询都必须带上分页,所以都可以在分页的基础上做.

html代码如下:循环遍历出来,在点击:查询下级的时候调用方法selectList,传入一个参数, 本回合的itemCat

<tr ng-repeat="itemCat in list">
     <td><input  type="checkbox" ></td>                                      
     <td>{{itemCat.id}}</td>
     <td>{{itemCat.name}}</td>
     <td>{{itemCat.typeId}}</td>                              
     <td class="text-center">                                        
     <span ng-if="grade!=3">
         <button type="button" class="btn bg-olive btn-xs" ng-click="setGrade(grade+1);selectList(itemCat)" >查询下   级</button>
     </span>
     <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>                                           
     </td>
</tr>

controller.js代码如下

selectList方法里面,将itemCat中的id作为参数传递给变量$scope.searchEntity.parentId,另外调用reloadlist方法

$scope.selectList=function (itemCat) {
   //功能一:点击下一级
   if(entity!=null){
       $scope.searchEntity.parentId=entity.id; //否则将参数的id作为parentId
   }else {
       $scope.searchEntity.parentId=0; //html给的参数是null,就将0作为parentId
   }

   //功能二:面包屑
   if($scope.grade==1){
       $scope.entity_1=null;
       $scope.entity_2=null;
   }if($scope.grade==2){
       $scope.entity_1=entity;
       $scope.entity_2=null;
   }if($scope.grade==3){
       $scope.entity_2=entity;
   }
   $scope.reloadlist(); //调用reloadlist()方法,进行分页查询
}

basecontroller代码

reloadlist方法调用search方法,并传入两个参数

//获取2个分页参数,网页数据传后台
$scope.reloadlist=function () {
    $scope.search($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
}

controller.js代码

search方法,将$scope.searchEntity作为查询条件,里面默认parenId=0;执行分页带条件查询

$scope.searchEntity={'parentId':0};//定义搜索对象

//搜索
$scope.search=function(page,rows){       
   itemCatService.search(page,rows,$scope.searchEntity).success(
      function(response){
         $scope.list=response.rows; 
         $scope.paginationConf.totalItems=response.totalPage;//更新总记录数
      }        
   );
}

需求二:面包屑的实现

思路:因为点击面包屑就会跳转到上一级,所以必须记录本页面的上一级是哪个itemCat,所以,我们就将面包屑不同级别都区分出来,然后不同级别都分别记录着自己这一级的itemCat ,当点击面包屑的时候,就会将对应的itemCat找到,然后显示出来.

basecontroller代码

定义一个级别,用于对应不同的itemCat,默认级别为1,当点击下一级的时候在当前grade的基础上加1,给setGrade方法

$scope.grade=1;
$scope.setGrade=function (value) {
       $scope.grade=value;
}

//不同的grade对应着不同的entity

$scope.entity_1=null;//记录着第一级数据
$scope.entity_2=null;//记录着第二级数据

$scope.selectList=function (entity) {
//功能一:点击下一级
if(entity!=null){
          $scope.searchEntity.parentId=entity.id;  //否则将参数的id作为parentId
}else {
          $scope.searchEntity.parentId=0; //html给的参数是null,就将0作为parentId
}
//功能二:面包屑
if($scope.grade==1){
    $scope.entity_1=null;
    $scope.entity_2=null;
}if($scope.grade==2){           //当在第二级的时候,entity_1记录着第二级上一级的数据,也就是第一级的内容
   $scope.entity_1=entity;
   $scope.entity_2=null;
}if($scope.grade==3){
   $scope.entity_2=entity;
}
   $scope.reloadlist();  //调用reloadlist()方法,进行分页查询
  }

html页面代码

<ol class="breadcrumb">
   <li>
       <a href="" ng-click="grade=1;selectList(null)">顶级分类列表</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>

品优购_面包屑, 查询下一级的实现思路