一、背景分析
1.实现背景
本篇文章是以品牌关联为案例进行编写实现。
可扩展为，只是改变一下数据库字段即可。
省市三级联动，比如 省关联市，市关联县，这是最常见的关联效果
2.实现效果
<img src="https://img-blog.csdnimg.cn/20190726010534221.png" width=500 >
二、准备工作
1.查看数据库结构
<img src="https://img-blog.csdnimg.cn/20190726011146761.png" width=500 >
2.查看后端代码返回数据格式（json）
parentId：当parentId为0时，为第一级标题
代表当前类别属于哪个分类
一级标签：
[
{
"id": 74,
"name": "家用电器",
"parentId": 0,
"typeId": 35
}
]
二级标签：
[
{
"id": 75,
"name": "大家电",
"parentId": 74,
"typeId": 35
}
]
三级标题：
[
{
"id": 76,
"name": "平板电视",
"parentId": 75,
"typeId": 37
},
{
"id": 77,
"name": "空调",
"parentId": 75,
"typeId": 35
},
{
"id": 78,
"name": "冰箱",
"parentId": 75,
"typeId": 35
}
]
3.准备工作，引入angularJs等插件
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/angularjs/angular.min.js"></script>
4.对ng-options了解，及angularJS中$watch方法了解
4.1 ng-options书写规范与含义
ng-options 指令用于使用 <options> 填充 <select> 元素的选项。
for item in itemCat1List
对itemCat1List 列表中每一项进行遍历，取出每一个itemitem.id as item.name for item in itemCat1List
取出item中的id作为键，取出item中的name作为值。上述为填充<select>中每一个 <options>的过程
4.2 angularJS中$watch进行认识
-
$watch简介
AngularJS内部的watch实现了页面随model的及时更新。 $watch方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。 $watch用法
| 用法 | |
|---|---|
| 写法 |
|
| 含义 | 通过对“监听的model对象”进行监听，若该值发生变化，则变化的值回传给newValue |
三、编写代码
1.后端Java代码编写
- controller代码展示
@RestController
@RequestMapping("/itemCat")
public class ItemCatController {
@Reference
private ItemCatService itemCatService;
/**
* Description:根据父层id查询下层id
*/
@RequestMapping("/findByParentId")
public List<TbItemCat> findByParentId(Long parentId){
return itemCatService.findByParentId(parentId);
}
}
- service接口及实现类代码展示
service接口展示：
public List<TbItemCat> findByParentId(Long parentId);
serviceImpl接口展示：
@Override
public List<TbItemCat> findByParentId(Long parentId) {
//使用criteria查询parentid
TbItemCatExample tbItemCatExample = new TbItemCatExample();
Criteria criteria = tbItemCatExample.createCriteria();
criteria.andParentIdEqualTo(parentId);
return itemCatMapper.selectByExample(tbItemCatExample);
}
}
- dao使用mybatis实现
2.前段Html与js代码编写
- controller层js代码展示
app.controller('goodsController' ,function($scope,$controller,goodsService,uploadImageService,itemCatService){
//第一级查询第一类商品信息
$scope.selectItemCat1List=function(){
itemCatService.findByParentId(0).success(
function(response){
$scope.itemCat1List=response;
}
);
}
//第二级 查询第一类商品下的二级商品信息
//解决问题： 需要获取一级商品id并且传给findByParentId作为父级id
$scope.$watch("entity.goods.category1Id",function (newValue,oldValue) {
itemCatService.findByParentId(newValue).success(
function (response) {
$scope.itemCat2List = response;
});
})
//第三级 查询第二类下的二级商品信息 * 解决方法类似与上面方法
$scope.$watch("entity.goods.category2Id",function (newValue,oldValue) {
itemCatService.findByParentId(newValue).success(
function (response) {
$scope.itemCat3List = response;
}
);
})
});
- service层js代码展示
//根据上层父级id查询下级列表
this.findByParentId = function (parentId) {
return $http.get('../itemCat/findByParentId.do?parentId='+parentId);
}
- html代码展示
<tr>
<td>
<select class="form-control" ng-model="entity.goods.category1Id" ng-options="item.id as item.name for item in itemCat1List"></select>
</td>
<td>
<select class="form-control select-sm" ng-model="entity.goods.category2Id" ng-options="item.id as item.name for item in itemCat2List"></select>
</td>
<td>
<select class="form-control select-sm" ng-model="entity.goods.category3Id" ng-options="item.id as item.name for item in itemCat3List"></select>
</td>
</tr>
