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

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

---

页面部分：

<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>
                 foreach ($category as $key=>$value) : ?>
                    <option value="" > echo $value['name']?>option>
                 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 += '
';
                    for (var i = 0;i'
' +
                            '
' +
                            '
'+msg.data[i].name+'
' +
                            '
';
                        for(var j = 0;j'attrConfig'].length;j++){
                            htm += ''" name="attrconfig['+msg.data[i]['attrConfig'][j]['id']+']" lay-skin="primary" title="'+msg.data[i]['attrConfig'][j]['name']+'" lay-filter="forTable">';
                        }

                        htm += '
' +
                            '
' +
                            '
' +
'
' +
'
' +
'
' +
'
' +
'
';
}
htm += '
';
$("#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].title
check_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;iif(map['attrconfig'+i] == undefined){
new_arr[i] = "";
}else{
new_arr[i]=map['attrconfig'+i];
}
}
for(var i = 0;ifor(var j=i;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;iif(new_arr[i].length != 0){
var v1 = [];
for(var j=0;jvar arr = doExchange(sort_arr);
var htm = '';
var htm_tr = '';
$('.attributeTable').remove()
layui.use('form', function(){
var form = layui.form;
form.render();
});
htm += '
' +
'
' +
'' +
'' +
'';
for (var i=0;iif(new_arr[i].length != 0){
htm += '';
}
}
if(arr != undefined){
for (var i = 0;i//判断arr[i]类型，是否为string或者object
//如果为string，则之间增加
if(typeof arr[i] == 'string'){
htm_tr += '';
htm_tr += '';
htm_tr += '';
htm_tr += ''
}else{
for(var j=0;j'';
}
htm_tr += '';
htm_tr += '';
htm_tr += ''
}
}
htm += '' +
'';
htm += '' +
'' +
'';
htm += htm_tr;
htm += '' +
'
'+$('input[name="'+new_arr[i][0].name+'"]').parent().prev().text()+'
'+$('input[name="'+arr[i]+'"]')[0].title+'
']"/>
']"/>
'+$('input[name="'+arr[i][j]+'"]')[0].title+'
']"/>
']"/>
价格
数量
' +
'
' +
'
';
$("#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; ifor(var j=0; jif(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;i1] = arr[i];
}
newArr[0] = items;
return doExchange(newArr);
}else{
return arr[0];
}
}