一、前端代码
数据库:数据结构
id :40 主键
name:电冰箱
brand_ids :[{"id":13,"text":"长虹"},{"id":14,"text":"海尔"},{"id":21,"text":"康佳"}]
spec_ids : [{"id":37,"text":"重量"},{"id":38,"text":"容量"}]
custom_attribute_items :[{"text":"颜色"},{"text":"容量"}]
// 监控模版id变化,查出品牌列表,规格列表,其他列表,
// 并将数据库保存的json字符串解析成对象,供页面进行展示
$scope.$watch('entity.tbGoods.typeTemplateId', function(newValue, oldValue) {
typeTemplateService.selectOne(newValue).success(function(data) {
$scope.typeTemplate = data;
// JSON.parse():将字符串解析为js对象
// 格式化品牌列表
$scope.typeTemplate.brandIds = JSON.parse($scope.typeTemplate.brandIds);
// 格式化扩展属性列表
if(typeof($location.search()['id'])=='undefined'){
$scope.entity.tbGoodsDesc.customAttributeItems = JSON.parse($scope.typeTemplate.customAttributeItems);
}
})
var id = newValue;
// 查询规格的数据
typeTemplateService.findSpecList(id).success(function(data){
$scope.specList=data;
});
});
二、服务端代码
通过规格查询规格选项的方法
/**
* 业务层代码
* 通过模版id查询规格及规格选项
*
*/
public List<Map> findSpecList(Long id) throws Exception {
try {
//通过模版id查询出该条模版数据
TbTypeTemplate typeTemplate = typeTemplateMapper.selectByPrimaryKey(id);
//获取规格属性数据
String specIds = typeTemplate.getSpecIds();
//将数据库规格属性的JSON数据转换成数组对象
List<Map> specList = JSON.parse(specIds,List.class);
//循环数组获取每个对象
for (Map map : specList) {
//构造以规格id为条件的条件查询对象
TbSpecificationOptionExample example = new TbSpecificationOptionExample();
com.pyg.pojo.TbSpecificationOptionExample.Criteria criteria = example.createCriteria();
criteria.andSpecIdEqualTo((Long)map.get("id"));
//通过规格id查询出规格选项
List<TbSpecificationOption> options = specificationOptionMapper.selectByExample(example);
//将规格选项数据,出入该条规格中作为该规格的规格选项属性
map.put("options", options);
}
return specList;
} catch (Exception e) {
e.printStackTrace();
return null;
}
};
三、页面html代码
品牌属性:
<div class="col-md-2 title">品牌</div>
<div class="col-md-10 data">
<select ng-model="entity.tbGoods.brandId"
ng-options="item.id as item.text for item in typeTemplate.brandIds"
class="form-control"></select>
</div>
扩展属性:
<div ng-repeat="pojo in entity.tbGoodsDesc.customAttributeItems">
<div class="col-md-2 title">{{pojo.text}}</div>
<div class="col-md-10 data">
<input ng-model="pojo.value" class="form-control" placeholder="{{pojo.text}}">
</div>
</div>
规格属性:
<!--
ng-true-value="1" : 设定选中值为1
ng-false-value="0" :设定不选址值为0
ng-model="entity.tbGoods.isEnableSpec" : 将value值绑定到商品的isEnableSpec(是否启用规格)属性中
ng-if:如果选中 展开显示该div,即展开列表
ng-repeat="pojo in specList" : 循环规格列表,便利每个规格属性
{{pojo.text}} : 显示每个规格属性的名称
-->
<input ng-model="entity.tbGoods.isEnableSpec"
ng-true-value="1"
ng-false-value="0"
type="checkbox">
<div ng-repeat="pojo in specList">
<div class="col-md-2 title">{{pojo.text}}</div>
<div class="col-md-10 data">
<!--
ng-repeat="option in pojo.options" : 循环对应规格选项列表
{{option.optionName}} : 显示每个选项的名称
-->
<span ng-repeat="option in pojo.options">
<input type="checkbox"> {{option.optionName}}
</span>
</div>
</div>
模版:例如
知识点补充
页面便利key-value结构对象
//可以便利key-value结构的规格属性 这列的spc属性为key-value类型对象
<li class="tag" ng-repeat="(key,value) in searchMap.spec"
ng-click="removeItem(key)">{{key}}:{{value}}</li>
控制器便利key-value结构对象
/**
spec 结构 :
{机身内存:4g, 网络:电信3g}
{机身内存:4g, 网络:联通3g}
{机身内存:8g, 网络:电信5g}
{机身内存:8g, 网络:联通4g}
中的一种
title结构 字符串 ‘"华为 mate10 8g内存 联通4g 全面屏手机"
*/
当前规格结构
// 判断当前规格是否与 SKU 商品标题匹配
compareSpec = function(spec, title) {
for ( var k in spec) {
if (title.indexOf(spec[k]) == -1) { // 如果有其中一项在标题中无法找到
return false;// 则直接返回否
}
}
return true;
}