商城sku选择组合

最新推荐文章于 2022-12-23 09:06:23 发布
最新推荐文章于 2022-12-23 09:06:23 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： html 文章标签： sku 商城
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zlxtkk/article/details/51841352
版权

整了2天，终于出来了,具体看代码，注释




	
		
   
   
		SKU
		<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
		
		<script type="text/javascript">
			var startTime = new Date().getTime();
			//后台读取结果集
			var p_json = {
				"1:颜色": {
					"1:1001": "红色",
					"1:1002": "绿色",
					"1:1003": "蓝色",
					"1:1004": "黑色",
					"1:1005": "白色"
				},
				"2:内存": {
					"2:2001": "16G",
					"2:2002": "32G",
					"2:2003": "64G",
					"2:2004": "128G",
					"2:2005": "256G"
				},
				"3:产地": {
					"3:3006": "国产",
					"3:3007": "港产",
					"3:3008": "日产",
					"3:3009": "欧美"
				}
			}
			var data = {
					"1:1001,2:2001,3:3006": {

						price: 366,
						count: 46,
						img: ""
					},
					"1:1002,2:2001,3:3007": {
						price: 355,
						count: 422,
						img: ""
					},
					"1:1004,2:2001,3:3008": {
						price: 355,
						count: 422,
						img: ""
					},
					"1:1005,2:2001,3:3009": {
						price: 355,
						count: 422,
						img: ""
					},
					"1:1003,2:2001,3:3009": {
						price: 355,
						count: 422,
						img: ""
					},
					"1:1003,2:2002,3:3009": {
						price: 355,
						count: 422,
						img: ""
					},
					"1:1002,2:2002,3:3008": {
						price: 355,
						count: 422,
						img: ""
					},
					"1:1003,2:2003,3:3009": {
						price: 355,
						count: 422,
						img: ""
					},
					"1:1003,2:2004,3:3009": {
						price: 355,
						count: 422,
						img: ""
					},
					"1:1003,2:2005,3:3009": {
						price: 355,
						count: 422,
						img: ""
					},
					"1:1002,2:2002,3:3009": {
						price: 355,
						count: 422,
						img: ""
					},
					"1:1003,2:2002,3:3008": {
						price: 355,
						count: 422,
						img: ""
					},
					"1:1003,2:2003,3:3008": {
						price: 355,
						count: 422,
						img: ""
					}

				}
			/*选中状态的button的attr_id属性值的数组*/
			var key = [];
			//点击事件
			$(function() {
				$(".sku").click(function() {
					/*标签属性：属性值*/
					var this_attr = $(this).attr("attr_id");
					/*属性选中*/
					if ($(this).hasClass("sku-select")) {
						/*移除变色样式*/
						$(this).removeClass("sku-select");

						/*集合去掉属性:属性值*/
						remove_key(key, this_attr);

					} else {

						/*行变色样式清空*/
						$(this).parent().children().removeClass("sku-select");

						/*自身添加变色样式*/
						$(this).addClass("sku-select");
						
						var key_cop=key;
						/*数组增加属性：属性值*/
						check_key(key, this_attr);
						
					}
					
					//可选中按钮筛选
					enable_select(key);
					
					
					/*数组转字符串显示*/
					var _key = key.toString();
					//显示用户的组合元素
					var value = view_key(key);
					//满足一个SKU组合
					if (data.hasOwnProperty(_key)) {
						$("#u_select").html("已选择:" + value + "库存:" + data[key].count + "价格:" + data[key].price);
					} else {
						$("#u_select").html("已选择:" + value);
					}

				});
			}); 
			
			/*替换key中已存在的本组属性的值，并排序*/
			function check_key(key, this_attr) {
				if (!key.length) {
					key.push(this_attr);
					return key;
				}
				var _att = this_attr.split(":");
				var _AttKey = "" + _att[0]
				var _index = -1;
				for (var j = 0; j < key.length; j++) {
					var arrA = key[j].split(":");
					if (arrA[0] == _AttKey) {
						key.splice(j, 1);
						break;
					}

				}
				key.push(this_attr);
				key.sort();
			}
			
			/*删除key中已存在的本组属性的值，并排序*/
			function remove_key(key, this_attr) {
				if (!key.length) {
					return;
				}
				var _att = this_attr.split(":");
				var _AttKey = "" + _att[0]
				for (var j = 0; j < key.length; j++) {
					var arrA = key[j].split(":");
					if (arrA[0] == _AttKey) {
						key.splice(j, 1);
						break;
					}
				}
				key.sort();
			}

			//获取选择的数据的值
			function view_key(key) {

				var result = "";
				if (!key.length) {
					return result;
				}
				for (var a = 0; a < key.length; a++) {
					var temp = key[a];
					var s = temp.split(":")[0];
					for (var p_json_key in p_json) {
						var p_json_key_arr = p_json_key.split(":");
						if (s == p_json_key_arr[0]) {
							var value = p_json[p_json_key][temp];
							break;
						}

					}

					result += value + " ";
				}
				return result;
			}

			/*
			 *设置所有按钮的可选择
			 * 已选属性组和未选属性组分开处理
			 *key:所有选中状态的sku值数组，["1:2001","2:2002"]
			 *attr:当前点击按钮的attr_id属性值,  "1:2001"
			*/
			function enable_select(key) {
				
				//如果key的长度为1，则这个选中状态的按钮的同组按钮都可选
				var attr_arr=[];
				var attr_key='';
				if(key.length==1){
					attr_arr = key[0].split(":");
					attr_key = attr_arr[0];
				}
				
				//先把所有按钮都不可选
				$(".sku").attr("disabled", true);
				
				//可选的按钮的属性值数组
				var able = [];
				
				/*
				 * 未选属性，匹配已选属性的正则表达式
				*/
				//正则表达式
				var reg = '';
				var a = 0;
				if (key.length) {
					for (var json_key in p_json) {
						var json_key_arr = json_key.split(":");
						var key_arr = key[a].split(":");
						if (key_arr[0] == json_key_arr[0]) {
							reg = reg + key[a];
							if (key.length - 1 > a) {
								a++;
								reg += ',';
							}

						} else {
							reg += '[0-9:,]*';
						}

					}
				}
				var zz = new RegExp(reg);
				//遍历所有data
				for (var data_key in data) {
					//匹配正则表达式
					if (zz.test(data_key)) {
						var data_key_arr=data_key.split(",");
						//符合的正则表达式的项，保存未选属性的按钮
						for(var data_key_arr_i in data_key_arr){
							if(!contains( data_key_arr[data_key_arr_i],key)){
								able.push(data_key_arr[data_key_arr_i])
							}
						}
					}

				}
				
				
				/*
				 * 已选属性，每一组已选属性的每一个所属按钮的值，与另外的已选属性值组合进行匹配，如匹配后的结果在data中有项，则可点击
				 * */
				if (key.length > 1) {
					for (var key_i in key) {
						//得到本次循环要查询的属性组
						var key_arr = key[key_i].split(":");
						var key_arr_key = key_arr[0];
						//得到key的复制数组，直接处理key的话，key的值会改变
						var key_cop = key.slice(0);
						
						remove_key(key_cop, key[key_i]);

						//正则表达式
						var reg2 = '';
						var b = 0;
						for (var json_key in p_json) {
							var json_key_arr = json_key.split(":");
							var key_cop_arr = key_cop[b].split(":");
							if (key_cop_arr[0] == json_key_arr[0]) {
								reg2 = reg2 + key_cop[b];
								if (key_cop.length - 1 > b) {
									b++;
									reg2 += ',';
								}

							} else {
								reg2 += '[0-9:,]*';
							}

						}
						
						var zz2 = new RegExp(reg2);
						
						for (var data_key in data) {
							if (zz2.test(data_key)) {
								var data_key_arr=data_key.split(",");
								for(var data_key_arr_i in data_key_arr){
									var data_key_arr_arr=data_key_arr[data_key_arr_i].split(":");
									//只保存本次循环要查询的属性组中的值
									if(data_key_arr_arr[0]==key_arr_key){
										able.push(data_key_arr[data_key_arr_i]);
									}
								}
							}

						}
						
						
					}
				}
				
				//遍历所有按钮
				for(var i=0;i<100;i++){
					var sku_v = $('.sku')[i];
					var s=$('body').find( sku_v );
					//按钮的attr_id属性
					var str = $(s).attr("attr_id");
					if (typeof(str) != "undefined") {
						var str_arr = str.split(":");
						if (contains(str, able)||(str_arr[0]==attr_key&&key.length==1)) {
							$(s).attr("disabled", false);
						}
					}else{
						break;
					}
				}
				//已选中状态的按钮可以用
				$(".sku-select").attr("disabled", false);
				
			}

			
			//判断arr数组是否包含str
			function contains(str, arr) {
				var i = arr.length;
				while (i--) {
					if (arr[i] === str) {
						return true;
					}
				}
				return false;
			}
			//对p_json进行排序
			function sortJson(j) {
				var str = JSON.stringify(j)
				str = str.substring(1);
				str = str.substring(0, str.length - 2);
				var str_arr = str.split("},");
				str_arr.sort();
				str = str_arr.join("},");
				str = "{" + str + "}}";
				return JSON.parse(str);
			}
		</script>
	

	
		
   
   

    
    
			颜色：
			
    
    
			
    
    
			
    
    
			
    
    
			
    
    
		
   
   

		
   
   

    
    
			内存：
			
    
    
			
    
    
			
    
    
			
    
    
			
    
    
		
   
   

		
   
   

    
    
			产地：

诸葛从容
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+element实现sku表格
02-12
vue编写，基于elementUI实现的商品库存表格，添加属性和规格，自动生成对应表格
模拟淘宝产品SKU信息的组合添加规格组合
03-25
模拟淘宝产品SKU信息的组合添加规格组合
商城项目11_商品SPU、SKU、详解表结构、属性分组列表展示、修改、新增、分类级联更新
所得皆惊喜
09-12 2291
商品SPU、SKU、详解表结构、属性分组列表展示、修改、新增、分类级联更新
京东商城SPU、SKU是如何设计的
AkiraNicky的博客
04-07 1万+
SPU全称Standard Product Unit，即标准化产品单元。简单理解就是某一种产品 SKU全称Stock Keeping Unit，即库存量单元。即具体的一件商品
sku选择
weixin_42596011的博客
12-23 150
SKU是商品库存单位(Stock Keeping Unit)的缩写。在商店、电商平台或仓库中，SKU通常用于描述一种特定的商品，并且可以用于区分不同的商品型号、尺寸、颜色等。 在选择SKU时，通常要考虑以下几点： 能否简单、清晰地描述商品的特征：SKU通常由字母、数字和符号组成，因此要考虑如何使用有限的字符来描述商品的不同特征。 能否方便地区分不同的商品：SKU应该具有唯一性，这样才能保证不会...
商品SKU选择实现
热门推荐
csdn924618338的博客
05-19 2万+
商品SKU选择实现 发表回复 在客户购买商品的时候，若这个商品存在多种”规格”（SKU），就需要客户手动选择自己想要的哪款。当时并不是每种我们都有库存， 所有就需要提供提供一个筛选功能，当客户选中一个条件的时候，需要设置其他条件中的一些值不可选。 这样就能保证不论客户怎么选择，到最后的选择都是有库存的”规格”（SKU） 开始之前先定义几种术语 属性集: 一个商品全部属性的集合 属
sku商品选择
前端踩坑之路
05-07 4630
需求（商城购物，规格的选择） 商品属性（多种）：尺寸，颜色，款式 存在的组合方式是确定的：即就是所存在的库存并且大于0的sku 思路：点击的时候，记录当前点击的值，遍历sku，当前点击的sku中的每个元素，合并去重，还等于当前本身，则该元素里的子规格都是可点击的，子规格的其他就说不可点击，置灰。再次点击，拿到已经点击过的值。重复上述操作。 主要有三组数据： 所有的主规格(去重）数组对象 ma...
SKU 相关代码及知识
01-23
3、HeadSearchView 商城的商品有多规格的时候的选择页面。能够无限制的添加规格类型如：颜色，尺码，风格，等 4、html.zip可以自定义sku属性，根据自己的需求来填写数据后生成想要的表格数据 5、SKUDemo (1) 销售...
yshop商城系统前端
06-16
yshop基于当前流行技术组合的前后端分离商城系统： SpringBoot2+MybatisPlus+SpringSecurity+jwt+redis+Vue的前后端分离的商城系统， 包含分类、sku、运费模板、素材库、小程序直播、拼团、砍价、商户管理、 秒杀、...
yshop基于当前流行技术组合的前后端分离商城系统
最新发布
04-16
yshop基于当前流行技术组合的前后端分离商城系统： SpringBoot2+MybatisPlus+SpringSecurity+jwt+redis+Vue的前后端分离的商城系统， 包含商城、sku、运费模板、素材库、小程序直播、拼团、砍价、商户管理、 秒杀、...
商城sku之数据表设计
08-22
主要是描述了一些关于sku方面的知识点，还加入数据表的设计结构，主要针对产品方面的多规格设计结构，从而实现了目前市场主流的商品sku设计。
Android 商品属性SKU选择
03-14
Android商品属性SKU选择，效仿淘宝的选择样式，选择多种属性。
实现了排列组合算法的类（JAVA）.rar
08-04
所使用的算法应该是效率最高的算法，而且这两个类都只是对需要排列组合的数组的下标进行处理，所以能对任何类型的数组进行排列组合。
基于当前流行技术组合的前后端分离意象商城系统
03-24
yshop基于当前流行技术组合的前后端分离商城系统： SpringBoot2+MybatisPlus+SpringSecurity+jwt+redis+Vue的前后端分离的商城系统， 包含分类、sku、运费模板、素材库、小程序直播、拼团、砍价、商户管理、 秒杀、...
网页商品SKU(规格)选择
mengty的博客
12-16 1万+
什么是sku 维基百科如下 最小存货单位(Stock Keeping Unit) 在连锁零售门店中有时称单品为一个SKU，定义为保存库存控制的最小可用单位，例如 例如： iPhone有规格有：颜色【红、金、黑】，内存大小【32g、64g、128g】 红色+32g就是一个sku，当然还可以分的更细 后台数据如下：(表1) 颜色 内存 屏幕大小 库存 红色-a1 16G-
android用sku算法仿淘宝选择颜色分类弹框。
qq_26602021的博客
11-30 5013
颜色分类规格超出边界会自动换行，点击规格会根据算法判断关联规格，无则灰显。
谷粒商城--SPU和SKU（属性分组、规格参数、销售属性）
全网粉丝10W+、全栈领域优质创作者、掘金、阿里云等社区博客专家、专注于全栈领域和毕业项目实战
09-08 2377
开发接口就是开发Controller、service、dao在线接口文档如下别人告诉你需要什么功能，需要返回什么样的数据，你就通过接口的形式把他们呢实现出来即可！以后工作了也是这种形式，主要是开发接口为多，前端其实不用写太多，能看懂即可！！！
sku组合查询算法探索
WEBCODE
07-22 1425
sku组合查询算法探索 byhanwen 标签：sku组合查询 在前端领域，很少会遇到算法问题，这不能说不是一种遗憾。不过，随着前端处理的任务越来越复杂和重要，偶尔，也能遇到一些算法上的问题。本文，所要讨论的，就是这样一样问题。 什么是SKU 问题来自垂直导购线周会的一次讨论，sku组合查询，这个题目比较俗，是我自己取得。首先，...
商城sku测试用例怎么写
04-24
写商城sku测试用例时，需要考虑以下几个方面： 1. SKU属性测试：测试每个SKU属性是否正确填写，例如SKU名称、SKU单价、SKU库存等。 2. SKU组合测试：测试SKU属性的组合是否正确，例如测试不同颜色和尺码的商品是否正确组合。 3. SKU库存测试：测试SKU库存是否正确，包括测试库存数量、库存变化等。 4. SKU价格测试：测试SKU价格是否正确，包括测试销售价格、促销价格、折扣价格等。 5. SKU图片测试：测试SKU图片是否正确，包括测试图片格式、图片大小、图片清晰度等。 6. SKU搜索测试：测试SKU搜索功能是否正确，包括测试搜索关键字、搜索结果、搜索排序等。 7. SKU下单测试：测试SKU下单功能是否正确，包括测试下单流程、订单金额、订单数量等。 总之，商城SKU测试用例的编写需要综合考虑SKU的各个方面，确保产品质量和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值