JavaScript的动态分组(Javascript Dynamic Grouping)

2019-08-01 01:25发布

我想创建一个表,与一些分组报头。 一切都很好,当我有1组,但如何创建动态组?

这是我迄今(1组):

var groupby = '';
arrdata.each(function(element){
    if (groupby != element.groupby) {
        groupby = element.groupby;
        tbody.push(groupby)
    }
    tbody.push(element)
})

我如何让它创建动态组?

Answer 1:

你可以将其整合到一个Object首先:

Array.prototype.groupBy = function(keyName) {
  var res = {};
  this.forEach(function(x) {
    var k = x[keyName];
    var v = res[k];
    if (!v) v = res[k] = [];
    v.push(x);
  });
  return res;
};

然后..通过对象:

var employees = [{first: ..., last: ..., job: ...}, ...];
var byJob = employees.groupBy('job');
for (var job in byJob) {
  document.write('<h3>Job: '+job+'</h3>');
  byJob[job].forEach(function(e) {
    document.write('<p>'+e.last+', '+e.first+'</p>');
  });
}


Answer 2:

尝试用这种结构:

arrdata = [
    {
       "groupby": {fields},
       "data":[{fields},{fields},{fields}]
    },
    {
       "groupby": {fields},
       "data":[{fields},{fields},{fields}]
    },
    {
       "groupby": {fields},
       "data":[{fields},{fields},{fields}]
    },
]

jQuery.each(arrdata, function(element){
   tbody.push(element.groupby)
   jQuery.each(element.data , function(elementData){
        tbody.push(elementData);
   }) 
})


Answer 3:

更通用的解决方案。 您可以直接使用它。 使用对象的深层复制。 请注意,这个解决方案是多项式时间

Array.prototype.groupBy=function(property){
"use strict";function deepCopy(p) {
var c = {};
for (var i in p) {
      if (typeof p[i] === 'object') {
        c[i] = (p[i].constructor === Array)?[]:{};
        deepCopy(p[i],c[i]);
      } 
else {
        c[i] = p[i];
      }
}
return c;
}
var retarr=[];
var len=this.length;
for(var i=0;i<len;i++){
    var groupedlen=retarr.length,found=false;
    for(var j=0;j<groupedlen;j++){
        if(this[i][property]===retarr[j].key){
            retarr[j].values.push(deepCopy(this[i]));
            found=true;
            break;
        }
    }
    if (found === false) {
        retarr.push({
            key: this[i][property],
            values: []
        });
        retarr[retarr.length-1].values.push(deepCopy(this[i]));
    }
}
return retarr;    
};

测试用例:

var arr=[{num: 1,key:911},{num: 2,key:22},{num: 3,key:23},{num: 4,key:222},{num: 4,key:2222},{num: 2,key:2},{num: 1,key:29},{num: 3,key:26},{num: 4,key:24}];

var grouped=arr.groupBy('num');

console.log(grouped);


文章来源: Javascript Dynamic Grouping