淘寶後臺添加顏色尺碼動態sku

時間 2019-11-18
標籤淘寶後臺添加顏色尺碼動態 sku 简体版
原文原文鏈接
廢話很少說,直接上代碼,用了vue,可直接copy運行javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://select2.github.io/vendor/js/jquery.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <style>
        label{
            padding-right:10px
        }
    </style>
</head>
<body>
<div id="root">
     <div class="form-group">
         <span>color:</span>
         <label @change="labelChange(color,'color')" v-for="color in colors"><input type="checkbox">{{color}}</label>
     </div>
    <div class="form-group">
        <span>size:</span>
        <label @change="labelChange(size,'size')" v-for="size in sizes"><input type="checkbox">{{size}}</label>
    </div>
    <div class="form-group">
        <span>capacity:</span>
        <label @change="labelChange(capacity,'capacity')" v-for="capacity in capacitys"><input type="checkbox">{{capacity}}</label>
    </div>
    <div class="form-group">
        <span>jixings:</span>
        <label @change="labelChange(jixing,'jixing')" v-for="jixing in jixings"><input type="checkbox">{{jixing}}</label>
    </div>
    <div id="createTable"></div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#root',
        data: {
             colors:['red','blue','black'],
             sizes:['S','M','L'],
             capacitys:['8G','16G','32G','64G'],
             jixings:['thin','thick'],
             columNum:0,
             arrayColumn:[],
             res:{},
             result : []
        },
        methods:{
            labelChange(v,title){
                if( !this.res[title] ){
                    this.res[title] = [v];

                }else{
                    if( indexofArr(this.res[title],v) ==-1 ){
                        this.res[title].push(v);
                    }else{
                        var index =  indexofArr( this.res[title] , v )  ;
                        this.res[title].splice(index,1);
                    }
                }

                var arr1 = [];
                for(var title in this.res){
                    if( this.res[title].length > 0 ){
                        arr1.push(this.res[title])
                    }
                }
                this.result = doExchange(arr1);
                this.createTable();

                for(var i=0;i<4;i++){
                    this.mergeCell( $('table'),i);
                }
            },
            createTable(){
                if( $('#createTable').children().length == 0 ){
                    $('<table id="process" border="1" cellpadding="1" cellspacing="0"><thead><tr></tr></thead><tbody></tbody></table>').appendTo($('#createTable'));
                }
                var str = '';
                for(var title in this.res){
                    str+= '<th>'+title+'</th>';
                }
                $('#createTable thead tr').html(str);

                var strBody = '';

                for(var i=0;i<this.result.length ; i++){
                    var newArr = this.result[i].split(',');
                    console.log(newArr);
                    var str2='';
                    for(var j=0;j<newArr.length;j++){
                        str2 +='<td>'+newArr[j]+'</td>'
                    }
                    strBody +='<tr>'+str2+'</tr>';
                }
                $('#createTable tbody').html(strBody);
            },
            mergeCell($table,colIndex){
                $table.data('col-content', ''); // 存放單元格內容
                $table.data('col-rowspan', 1); // 存放計算的rowspan值 默認爲1
                $table.data('col-td', $()); // 存放發現的第一個與前一行比較結果不一樣td(jQuery封裝過的), 默認一個"空"的jquery對象

                $table.data('trNum', $('tbody tr', $table).length); // 要處理表格的總行數, 用於最後一行作特殊處理時進行判斷之用
                // 咱們對每一行數據進行"掃面"處理 關鍵是定位col-td, 和其對應的rowspan
                $('tbody tr', $table).each(function (index) {
                    // td:eq中的colIndex即列索引
                    var $td = $('td:eq(' + colIndex + ')', this);

                    // 取出單元格的當前內容
                    var currentContent = $td.html();

                    // 第一次時走此分支
                    if ($table.data('col-content') == '') {
                        $table.data('col-content', currentContent);
                        $table.data('col-td', $td);
                    } else {
                        // 上一行與當前行內容相同
                        if ($table.data('col-content') == currentContent) {
                            // 上一行與當前行內容相同則col-rowspan累加, 保存新值
                            var rowspan = $table.data('col-rowspan') + 1;
                            $table.data('col-rowspan', rowspan);
                            // 值得注意的是 若是用了$td.remove()就會對其餘列的處理形成影響
                            $td.hide();
                            // 最後一行的狀況比較特殊一點
                            // 好比最後2行 td中的內容是同樣的, 那麼到最後一行就應該把此時的col-td裏保存的td設置rowspan
                            if (++index == $table.data('trNum'))
                                $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
                        } else { // 上一行與當前行內容不一樣
                            // col-rowspan默認爲1, 若是統計出的col-rowspan沒有變化, 不處理
                            if ($table.data('col-rowspan') != 1) {
                                $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
                            }
                            // 保存第一次出現不一樣內容的td, 和其內容, 重置col-rowspan
                            $table.data('col-td', $td);
                            $table.data('col-content', $td.html());
                            $table.data('col-rowspan', 1);
                        }
                    }
                });
            }
        }
    })
    /**檢查 某個元素v 在數組中是否存在,存在返回1  不存在返回-1**/
    function indexofArr(arr,v){
        for(var i=0;i<arr.length;i++){
            if(arr[i]==v){
                return i  //存在
            }
        }
        return -1  //不存在
    }

   function  doExchange (doubleArrays) {
        var len = doubleArrays.length;
        if (len >= 2) {
            var arr1 = doubleArrays[0];
            var arr2 = doubleArrays[1];
            var len1 = doubleArrays[0].length;
            var len2 = doubleArrays[1].length;
            var newlen = len1 * len2;
            var temp = new Array(newlen);
            var index = 0;

            for (var i = 0; i < len1; i++) {
                for (var j = 0; j < len2; j++) {
                    temp[index] = arr1[i] + "," + arr2[j];
                    index++;
                }
            }
            var newArray = new Array(len - 1);
            newArray[0] = temp;

            if (len > 2) {
                var _count = 1;
                for (var i = 2; i < len; i++) {
                    newArray[_count] = doubleArrays[i];
                    _count++;
                }
            }
            return doExchange(newArray);
        }
        else {
            return doubleArrays[0];
        }
    }

</script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。