图片回显,扩展属性和规格的添加

图片回显

首先定义一个大对象,这个对象包含了所有属性,因为我们添加商品的时候总共包含2个表,每个表中又有若干个属性,所以我们可以这样定义对象:$scope.entity = {goods:{},goodsDesc:{itemImages:[],specificationItems:[]}};entity中包含两个对象,goods和goodsDesc,goods中包含了很多属性,我们等到用的时候再添加,同样goodsDesc中也包含了很多属性,例如itemImages,specificationItems,等,而且itemImages中又有多组属性,所以我们定义一个数组来接收他.

页面回显图片时,img标签的src最好使用ng-src,以免出现显示不出来的情况.

查询扩展属性

因为扩展属性是根据模板id得来的,所以我们要先获取模板id然后根据这个id去数据库中查询扩展属性的名字,可以和查询品牌公用一个方法

规格的添加

typeTemplate.getSpecIds()查询出来的是一个json数组,我们使用FastJSON中的parseArray方法把他转化为一个元素为Map的json集合

在页面上我们用的是JSON.parse()方法,得到的也是一个对象,对象里含有数组或集合.

如果json串是一个用[]包围起来的数组,我们用json.parseArray来解析他,如果是一个用{}包围起来的对象,我们用json.parse来解析.

根据这张图,添加规格信息,首先我们要找到规格有哪些,根据数据库得知,规格信息存在一个模板表中,以json串的形式放在一个属性中所以我们要调用typeTemplate中的方法,找到specList集合,该集合中存放的就是规格信息然后我们就可以在前台遍历取值了,此时我们拿到的只是规格名称,接下来我们再拿规格选项.如图所示,specList是根据模板id查得的集合,该集合中包含了三个属性,规格id,规格名,规格对应的选项(map集合)

如上图所示,当点击checkbox的时候,我们调用了updateSpecOption方法,传入了三个参数:点击对象,规格名,规格选项名,注意没有选中任何复选框时要把object移除,否则下次再点击的时候上一次的数据会依然存在,很重要!

如图所示,该方法调用了searchValueByKey方法,传入三个参数:规格名称的集合,attributeName,页面需要的规格名,

关于searchValueByKey方法,该方法是根据key值去查询传入的集合中对应该key值的value是否与我传入的value相等,如果相等,就返回这条对象,否则返回null.在页面上复选框调用了updateSpecOption方法,目的就是为了通过点击或取消点击复选框调用push或splice方法来给$scope.entity.goodDesc.specificationItems这个集合对象进行赋值.

返回的object就是页面点击的对象,$scope.entity.goodDesc.specificationItems是我们定义出来的,一开始为null,所以直接return了null,此时object==null,直接走了else方法,此时我们定义的这个对象就有值了,假设他是{"attributeName":"网络制式":"attributeValue":["4G"]},这时候页面不会有回显值,当我们再点一个移动3G的时候,再次调用searchValueByKey,这时候会走循环,返回list(0)这个对象,即网络制式:4G,这时候object==list(0)是有值的,走判断,直接给网络制式(attributeName)对应的attributeValue再添加一个值3G,这时候对象就是{"attributeName":"网络制式","attributeValue":["移动3G","移动4G"]},同理当我们点击机身内存的时候也是如此,这样我们就得出了数据

接下来我们就可以进行回显了,页面调用createItemList方法,为下面的回显做数据准备,此时我们定义一个集合对象itemList用来接收数据.所有的数据都在我们上面查到的specificationItems中,我们循环遍历给我们创建的集合对象添加值.这里添加值调用的是addColumn方法.

该方法需要3个参数:接收数据的集合对象,从数据源处分别获得的属性名和属性值,addColumn方法中我们先new一个新的集合对象,当有复合条件的值就往里加,没有就进行下一次循环,最后我们返回这个newList,这就是深克隆.深克隆的时候我们把遍历集合对象得到的单个对象称为oldRow,然后再遍历传过来的attributeValue,得到规格选项数组中的每一个值,然后先通过JSON.stringify(oldRow)把oldRow转成json字符串,然后再通过JSON.parse转换成对象,赋值给newRow,然后把newRow push到数组中,这样是为了避免脏读.list[i]是下面这种形式的,第一层遍历只是为了拿出单个list[i]对象,第二层遍历有attributeValue控制此时,因为主要就是为了遍历他,

[{"attributeName":"网络制式","attributeValue":["移动3G","移动4G"]},{"attributeName":"屏幕尺寸","attributeValue":["6寸","5寸"]}]