需求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>