Java之品优购课程讲义_day06（5）

商品录入【规格选择】

4.1 需求分析

显示规格及选项列表（复选框）如下图，并保存用户选择的结果

4.1 代码实现

4.1.1 显示规格选项列表

由于我们的模板中只记录了规格名称，而我们除了显示规格名称还是显示规格下的规格选项，所以我们需要在后端扩充方法。

（1）在 pinyougou-sellergoods-interface 的 TypeTemplateService.java 新增方法定义

/**

 

*返回规格列表

 

*@return

 

*/

 

public  List<Map>  findSpecList(Long  id);

（2）在 pinyougou-sellergoods-service 的 TypeTemplateServiceImpl.java 新增方法

@Autowired

 

private  TbSpecificationOptionMapper  specificationOptionMapper;

 

 

 

@Override

 

public  List<Map>  findSpecList(Long  id)  {

 

//查询模板

 

TbTypeTemplate  typeTemplate  =  typeTemplateMapper.selectByPrimaryKey(id);

List<Map>  list  =  JSON.parseArray(typeTemplate.getSpecIds(),  Map.class)    ;

 

for(Map  map:list){

 

//查询规格选项列表

TbSpecificationOptionExample example=new TbSpecificationOptionExample(); com.pinyougou.pojo.TbSpecificationOptionExample.Criteria  criteria  =

example.createCriteria();

criteria.andSpecIdEqualTo(  new  Long(  (Integer)map.get("id")  )  ); List<TbSpecificationOption>  options  =

specificationOptionMapper.selectByExample(example); map.put("options",  options);

}

 

return  list;

 

}

（3）在 pinyougou-shop-web 的 TypeTemplateController.java 新增方法

@RequestMapping("/findSpecList")

 

public  List<Map>  findSpecList(Long  id){

 

return  typeTemplateService.findSpecList(id);

 

}

 

 

测试后端代码：

（4）前端代码：修改 pinyougou-shop-web 的 typeTemplateService.js

[AppleScript] 纯文本查看 复制代码

?

//查询规格列表
this.findSpecList=function(id){


return  $http.get('../typeTemplate/findSpecList.do?id='+id);


}

（5）修改 pinyougou-shop-web 的 goodsController.js

//模板 ID 选择后 更新模板对象

 

$scope.$watch('entity.goods.typeTemplateId',  function(newValue,  oldValue)  { typeTemplateService.findOne(newValue).success(

function(response){

 

$scope.typeTemplate=response;//获取类型模板

 

$scope.typeTemplate.brandIds= JSON.parse(  $scope.typeTemplate.brandIds);//品牌列表

 

$scope.entity.goodsDesc.customAttributeItems=JSON.parse(  $scope.typeTemplate.custom

AttributeItems);//扩展属性

 

}

 

 

);

 

//查询规格列表typeTemplateService.findSpecList(newValue).success(

 

function(response){

 

 

$scope.specList=response;

 

 

}

 

 

);

 

 

});

（6）修改 goods_edit.html 页

面

<    div     ng-repeat="pojo  in  specList">

 

<div  class="col-md-2  title">{{pojo.text}}</div>

 

<div  class="col-md-10  data">

 

<span  ng-repeat="option  in  pojo.options">

 

<input    type="checkbox"  >{{option.optionName}}

 

</span>

 

</div>

 

</div>