A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

1.2.1 前端代码
(1)修改 itemCatService.js
[AppleScript] 纯文本查看 复制代码
//根据上级 ID 查询下级列表
this.findByParentId=function(parentId){


return  $http.get('../itemCat/findByParentId.do?parentId='+parentId);


}
(2)修改 itemCatController.js
[AppleScript] 纯文本查看 复制代码
//根据上级 ID 显示下级列表

$scope.findByParentId=function(parentId){ itemCatService.findByParentId(parentId).success(
function(response){


$scope.list=response;


}


);


}
(3)修改 item_cat.html
引入 JS
1534233019(1).jpg
[AppleScript] 纯文本查看 复制代码
<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
[AppleScript] 纯文本查看 复制代码
$scope.grade=1;//默认为 1 级

//设置级别

$scope.setGrade=function(value){


$scope.grade=value;


}

//读取列表

$scope.selectList=function(p_entity){
[AppleScript] 纯文本查看 复制代码
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);        //查询此级下级列表

}
修改列表的查询下级按钮,设定级别值后 显示列表
[AppleScript] 纯文本查看 复制代码
<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 的时候才显示“查询下级”按钮
绑定面包屑:
[AppleScript] 纯文本查看 复制代码
<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>
[AppleScript] 纯文本查看 复制代码
<li><a  href="#"  ng-click="grade=3;selectList(entity_2)">{{entity_2.name}}</a></li>

</ol>



0 个回复

您需要登录后才可以回帖 登录 | 加入黑马