JS种对数组数据进行分组及动态生成table表格

1、对数组数据进行分组

        var arr = [
                {"id":"1001","name":"值1","value":"111"},
                {"id":"1001","name":"值1","value":"11111"},
                {"id":"1002","name":"值2","value":"25462"},
                {"id":"1002","name":"值2","value":"23131"},
                {"id":"1002","name":"值2","value":"2315432"},
                {"id":"1003","name":"值3","value":"333333"}
        ];

        var map = {},
                dest = [];
        for(var i = 0; i < arr.length; i++){
                var ai = arr[i];
                if(!map[ai.id]){
                        dest.push({
                                id: ai.id,
                                name: ai.name,
                                data: [ai]
                        });
                        map[ai.id] = ai;
                }else{
                        for(var j = 0; j < dest.length; j++){
                                var dj = dest[j];
                                if(dj.id == ai.id){
                                        dj.data.push(ai);
                                        break;
                                }
                        }
                }
        }

        console.log(dest);

2、动态生成table表

下面代码是在实际开发中根据选中的两个复选框列表动态的创建table,并且创建表格时保留了原始数据

     //选择服务企业类型时更换表格展示内容
                handleCheckedEntTypeChange(){
                    if(this.serviceEntType){
                        this.serviceEntType.sort()
                        //获取选中服务企业类型,转成中文名称
                        var typeNameList = new Array()
                        for(var i=0;i<this.serviceEntType.length;i++){
                            switch(this.serviceEntType[i]) {
                                case 1 : typeNameList.push('合资')
                                    break;
                                case 2 : typeNameList.push('独资')
                                    break;
                                case 3 : typeNameList.push('国有')
                                    break;
                                case 4 : typeNameList.push('私营')
                                    break;
                                case 5 : typeNameList.push('全民所有制')
                                    break;
                                case 6 : typeNameList.push('集体所有制')
                                    break;
                                case 7 : typeNameList.push('股份制')
                                    break;
                                default: typeNameList.push('其他')
                            }
                        }
                        this.serviceTypeNameList = typeNameList
                    }
                    //生成总的表格数据
                    var financingScope = new Array()
                    for(var i=0;i<this.serviceEntRat.length;i++){
                        //创建数据对象
                        var obj1 = new Object()
                        obj1.enterpriseLevelId = this.serviceEntRat[i]
                        //根据企业等级Id 获取对应的名称
                        switch(obj1.enterpriseLevelId) {
                            case 1 : obj1.enterpriseLevelName ='AAA'
                                break;
                            case 2 : obj1.enterpriseLevelName ='AA'
                                break;
                            case 3 : obj1.enterpriseLevelName ='A'
                                break;
                            case 4 : obj1.enterpriseLevelName ='B'
                                break;
                            case 5 : obj1.enterpriseLevelName ='C'
                                break;
                            default: obj1.enterpriseLevelName ='其他'
                        }
                        var oldtypeAndMaxList = new Array()
                        for(var k=0;k<this.financingScope.length;k++){
                            if(this.serviceEntRat[i]==this.financingScope[k].enterpriseLevelId){
                                oldtypeAndMaxList = this.financingScope[k].typeAndMaxList
                            }
                        }
                        //在原来老数据的基础上生成新数据数组
                        var newtypeAndMaxList = new Array()
                        for(var j=0;j<this.serviceEntType.length;j++){
                            var obj2 = new Object()
                            for(var m=0; m<oldtypeAndMaxList.length;m++){
                                if(this.serviceEntType[j]==oldtypeAndMaxList[m].enterpriseTypeId){
                                    obj2.enterpriseTypeId = oldtypeAndMaxList[m].enterpriseTypeId
                                    obj2.financingMax = oldtypeAndMaxList[m].financingMax
                                }
                            }
                            if(!obj2.enterpriseTypeId){
                                obj2.enterpriseTypeId = this.serviceEntType[j]
                                obj2.financingMax = 0
                            }
                            newtypeAndMaxList.push(obj2)
                        }
                        obj1.typeAndMaxList = newtypeAndMaxList
                        financingScope.push(obj1)
                    }
                    this.financingScope = financingScope
                },
                //选择服务等级时更换封装数据
                handleCheckedEntRatChange(){
                    this.serviceEntRat.sort()
                    //生成总的表格数据
                    var financingScope = new Array()
                    for(var i=0;i<this.serviceEntRat.length;i++){
                        //创建数据对象
                        var obj1 = new Object()
                        obj1.enterpriseLevelId = this.serviceEntRat[i]
                        //根据企业等级Id 获取对应的名称
                        switch(obj1.enterpriseLevelId) {
                            case 1 : obj1.enterpriseLevelName ='AAA'
                                break;
                            case 2 : obj1.enterpriseLevelName ='AA'
                                break;
                            case 3 : obj1.enterpriseLevelName ='A'
                                break;
                            case 4 : obj1.enterpriseLevelName ='B'
                                break;
                            case 5 : obj1.enterpriseLevelName ='C'
                                break;
                            default: obj1.enterpriseLevelName ='其他'
                        }
                        
                        var oldtypeAndMaxList = new Array()
                        for(var k=0;k<this.financingScope.length;k++){
                            if(this.serviceEntRat[i]==this.financingScope[k].enterpriseLevelId){
                                oldtypeAndMaxList = this.financingScope[k].typeAndMaxList
                            }
                        }
                        //在原来老数据的基础上生成新数据数组
                        var newtypeAndMaxList = new Array()
                        for(var j=0;j<this.serviceEntType.length;j++){
                            var obj2 = new Object()
                            if(oldtypeAndMaxList.length>0){
                                for(var m=0; m<oldtypeAndMaxList.length;m++){
                                    if(this.serviceEntType[j]==oldtypeAndMaxList[m].enterpriseTypeId){
                                        obj2.enterpriseTypeId = oldtypeAndMaxList[m].enterpriseTypeId
                                        obj2.financingMax = oldtypeAndMaxList[m].financingMax
                                    }
                                }
                            }else{
                                obj2.enterpriseTypeId = this.serviceEntType[j]
                                obj2.financingMax = 0
                            }
                            newtypeAndMaxList.push(obj2)
                        }
                        obj1.typeAndMaxList = newtypeAndMaxList
                        financingScope.push(obj1)
                    }
                    this.financingScope = financingScope
                },

 

猜你喜欢

转载自blog.csdn.net/weixin_41888013/article/details/83374297