昨晚,竟然失眠了!穷得睡不着觉!嘎嘎~

想想,既然睡不着,就起床写代码吧~

不想,很快就搞定了~!

这个功能难度较大,也不宜理解,凑合着看吧~

业务需求:

原有的规格属性功能已经可以满足基本需要了,但功能还略显单薄。其中缺少2个十分关键的功能:

  • 无法调整规格属性的顺序,只能删除后重新填写。

  • 无法一键清空所有属性;

如果能解决此2大功能需求,管理员的工作量将大幅下降,可以有效降低人工成本。

关键因素:

事实上,调整顺序的功能确实有助力操作效率的提升,该功能需求完全有必要实现。

因为对应的每一组数据,都有一个删除按钮。因而在实际操作中,“一键清空所有属性”的功能需求则并不强烈,基本可以满足日常管理需要。

此功能需求的难点在于——该数值是动态的成组出现,不仅需要同时增加,还需要同时删除,或者上移、或者下移。传统的渲染赋值方式无法实现,只能使用JS的动态组件来完成。

解决思路:

与上次的思路略有变化,原有的数据传递形式要有所变化,只得重新修改~。先从数据库中查询spec字段,渲染到后台界面。然后通过JS接收数据,然后遍历之后对每一组数据进行相应的操作。

操作步骤:

第一步:

制作一个后台操作界面的规格属性容器,为便于使用,我直接用的是table表格,方便成组数据的呈现。需要分3列。包括2列主要放文本框,最后一个放操作控件。如图:

第二步:

将数据库中的spec字段进行渲染,前端的js中接收到该值之后进行判断。spec是一个json格式的字段,需要json_decode()方法转化成数组格式。

同时,创建一个addItem方法,将这此数据渲染到第一步中所创建的模板容器中。

此时,第一步中对应的成组数据就能生效。

第三步:

创建相应的数据选项的操作控件,其中包括增加、移除、上移、下移。

此时控件生效。

第四步:

后端对数据进行校验和整理。将前端表单传递来的$data['name']和$data['value']值,通过foreach进行过滤,并通过foreach合并成一个适合json格式的二维数组,然后通过json_encode()方法转化成json格式的数据。

 

至此,全部操作完成。经不断测试,未出现bug。

总结回顾:

JS的语法是关键点,通过遍历对每一组数据赋予键值,才可以达到增加、上移、下移、删除等相应的控件操作。此功能要求对JS十分熟悉,才可以达成该功能的开发目的。

6月3日完成后端,6月7日完成小程序前端,今天又将功能在之前的基础上进行了升华和优化。细数下来,为了完善这个小小的产品属性功能,竟然花费了我3个工作时间。不过,今天的效果十分满意,达到了我预设的理想效果,还是十分开心的~。


马上致电网为科技:13071111008