自定义商品分类，选择分类之后，添加商品附属性；仿淘宝后台添加商品附属性的价格和数量

效果图（图片较大，加载较慢）

页面部分：

<div class="layui-form-item" id="add_attribute"><label class="layui-form-label">商品分类</label><div class="layui-input-inline" style="width: 13%;"><select name="cate_id" id="cate_id"  data="attribute" lay-filter="forAttribute"><option value="">请选择所属分类</option><?php foreach ($category as $key=>$value) : ?><option value="<?php echo $value['id']?>" ><?php echo $value['name']?></option><?php endforeach;?></select></div></div>

JS部分

layui.use(['form', 'layedit', 'laydate'], function() {var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate;form.on('select(forAttribute)',function (data) {$('#forAttributeTable').remove()$('.attributeTable').remove()layui.use('form', function(){var form = layui.form;form.render();});$.ajax({type:"post",url:"admin/attrconfig/get_attribute",data:{'cate_id':data.value},dataType:"json",success:function (msg) {var htm = '';var length = msg.data.length;htm += '<div id="forAttributeTable">';for (var i = 0;i<length;i++){htm += '<div class="add"><div class="layui-form-item">' +'<div class="layui-input-block" style="height: 10px;">' +'<p>'+msg.data[i].name+'</p>' +'<div>';for(var j = 0;j<msg.data[i]['attrConfig'].length;j++){htm += '<input type="checkbox" class="attrconfig" id="attrconfig'+i+'" name="attrconfig['+msg.data[i]['attrConfig'][j]['id']+']" lay-skin="primary" title="'+msg.data[i]['attrConfig'][j]['name']+'" lay-filter="forTable">';}htm += '</div>' +'</div>' +'</div>' +'<div class="layui-form-item">' +'<div class="layui-input-block" >' +'<hr class="layui-bg-gray">' +'</div>' +'</div></div>';}htm += '</div>';$("#add_attribute").append(htm);layui.use('form', function(){var form = layui.form;form.render();});}})})form.on('checkbox(forTable)',function (data) {//获取复选框选中数据//console.log($('input:checkbox[id="'+data.elem.id+'"]:checked').val());//获取到复选框选中值的长度//console.log($('input:checkbox[id="'+data.elem.id+'"]:checked').length);//获取该分类下有多少个组//console.log($('.add').length);/*** 当点击复选框时，遍历各组之间被选择的个数的多少，将个数最少的那组，放置于数组最前。*/var len = $('.add').length;var arr = new Array();
//console.log(data.elem.name)
//console.log(data.elem.title)//当点击时，获取所有选中的checkbox的值var check_len = $('input:checkbox[id="'+data.elem.id+'"]:checked').length;var check_arr = new Array();$('input:checkbox[class="attrconfig"]:checked').each(function () {//获取所有选中的checkbox的name值//$(this)[0].name//获取所有选中的checkbook的title值//$(this)[0].titlecheck_arr.push({name:$(this)[0].name,title:$(this)[0].title,id:$(this)[0].id})})//得到拼接后的数组//将数组中id相同的数组合并成同一个数组var map = {};check_arr.forEach(function (item) {if(map[item.id] == undefined){var list = [];list.push(item);map[item.id] = list;}else{map[item.id].push(item);}})var new_arr = new Array();for (var i = 0;i<len;i++){if(map['attrconfig'+i] == undefined){new_arr[i] = "";}else{new_arr[i]=map['attrconfig'+i];}}for(var i = 0;i<len;i++){for(var j=i;j<len;j++){//console.log(new_arr[i].length)if(new_arr[i].length > new_arr[j].length){var temp = new_arr[i];new_arr[i] = new_arr[j];new_arr[j] = temp;}}}//console.log(new_arr)var sort_arr = [];for(var i=0;i<new_arr.length;i++){if(new_arr[i].length != 0){var v1 = [];for(var j=0;j<new_arr[i].length;j++){v1.push(new_arr[i][j].name)}sort_arr.push(v1)}}var arr = doExchange(sort_arr);var htm = '';var htm_tr = '';$('.attributeTable').remove()layui.use('form', function(){var form = layui.form;form.render();});htm += '<div class="attributeTable"><div class="layui-form-item">' +'<div class="layui-input-block">' +'<table class="layui-table">' +'<thead>' +'<tr>';for (var i=0;i<len;i++){if(new_arr[i].length != 0){htm += '<th>'+$('input[name="'+new_arr[i][0].name+'"]').parent().prev().text()+'</th>';}}if(arr != undefined){for (var i = 0;i<arr.length;i++){//判断arr[i]类型，是否为string或者object//如果为string，则之间增加if(typeof arr[i] == 'string'){htm_tr += '<td >'+$('input[name="'+arr[i]+'"]')[0].title+'</td>';htm_tr += '<td><input style="width: 100%;height: 100%;border: 0px;background-color: transparent;" name="price['+arr[i]+']"/></td>';htm_tr += '<td><input style="width: 100%;height: 100%;border: 0px;background-color: transparent;" name="number['+arr[i]+']"/></td>';htm_tr += '</tr>'}else{for(var j=0;j<arr[i].length;j++){htm_tr += '<td >'+$('input[name="'+arr[i][j]+'"]')[0].title+'</td>';}htm_tr += '<td><input style="width: 100%;height: 100%;border: 0px;background-color: transparent;" name="price['+arr[i]+']"/></td>';htm_tr += '<td><input style="width: 100%;height: 100%;border: 0px;background-color: transparent;" name="number['+arr[i]+']"/></td>';htm_tr += '</tr>'}}htm += '<th>价格</th>' +'<th>数量</th>';htm += '</tr>' +'</thead>' +'<tbody>';htm += htm_tr;htm += '</tbody>' +'</table>' +'</div>' +'</div></div>';$("#forAttributeTable").append(htm);layui.use('form', function(){var form = layui.form;form.render();});}})});function doExchange(arr){var len = arr.length;// 当数组大于等于2个的时候if(len >= 2){// 第一个数组的长度var len1 = arr[0].length;// 第二个数组的长度var len2 = arr[1].length;// 2个数组产生的组合数var lenBoth = len1 * len2;//  申明一个新数组var items = new Array(lenBoth);// 申明新数组的索引var index = 0;for(var i=0; i<len1; i++){for(var j=0; j<len2; j++){if(arr[0][i] instanceof Array){items[index] = arr[0][i].concat(arr[1][j]);}else{items[index] = [arr[0][i]].concat(arr[1][j]);}index++;}}var newArr = new Array(len -1);for(var i=2;i<arr.length;i++){newArr[i-1] = arr[i];}newArr[0] = items;return doExchange(newArr);}else{return arr[0];}}

自定义商品分类，选择分类之后，添加商品附属性；仿淘宝后台添加商品附属性的价格和数量相关推荐

仿淘宝后台设置商品SKU
仿淘宝后台设置商品SKU 效果图关键代码 function getVariantFun(doubelArrays) {let len = doubelArrays.length; //获取最外层的长 ...
Android仿淘宝首页UI（附代源代码及示例图片）
Android仿淘宝首页UI(附代源代码及示例图片) 可以收获运行出来的效果部分代码源代码可以收获更改Layout中的文字和drawble中的图片即可生成适应于不同情景的APP,帮助开发者完 ...
ecshop 商品颜色尺寸仿淘宝选择功能教程(2.7.0版本)
牵涉到的修改文件(default模板为例) /themes/default/style.css /themes/default/goods.dwt 注:此路径待修改模板路径. 修改步骤: 一:控制样式 ...
【ECSHOP插件】商品颜色尺寸仿淘宝选择功能免费发布
先放效果图,如此实用的功能是不是迫不及待的要添加到自己的网店中了呢牵涉到的修改文件(default模板为例) /themes/default/style.css /themes/default/ ...
android 仿淘宝、京东商品详情页向上拖动查看图文详情控件
一.淘宝商品详情页效果先看一下淘宝详情页的效果我们的效果二.实现思路使用两个scrollView,两个scrollView 竖直排列,通过自定义viewGroup来控制两个scrollView ...
Android 仿淘宝2018添加地址
先来看看淘宝2018的添加收货地址的效果分析实现的原理: bottomDialog=tabLayout+RecyclerView 其中的2个特点: 1.tablayout的动态添加的,并且选中ite ...
Android 仿淘宝2017添加地址
最近想做个商城仿淘宝收货地址选择,在网上搜索"android 淘宝收货地址",就看到了想要的效果. 文章写的不错,可惜菜鸟级的我很多看不懂,所以用例外一种方式实现了. 这里用到的数 ...
【jquery】优化仿淘宝五星评价打分(附注释)
在前面的博文http://blog.csdn.net/lzgs_4/article/details/47913629,我们已经把仿淘宝五星评价打分功能实现出来了,实现五星打分的思路基本就是前面博文提到 ...
仿淘宝中的评价晒单中选择图片可以预览，添加，删除
前一篇文章写了如何把input="file"的默认样式改为自己想要的样式所以这篇是在这个的基础上写的,也就是说改变成了自己想要的样式之后,点击选择图片,可以放在一个div中预览,同 ...

自定义商品分类，选择分类之后，添加商品附属性；仿淘宝后台添加商品附属性的价格和数量

自定义商品分类，选择分类之后，添加商品附属性；仿淘宝后台添加商品附属性的价格和数量相关推荐

最新文章

热门文章