我建立一个网格组件,将允许用户执行多行分组。
我工作的原始数据是与股票的物品,例如:
let stock = [
{ order: "200", type: "production", qty: 200, item: "IT282" },
{ order: "200", type: "production", qty: 90, item: "IT283" },
{ order: "200", type: "customer", qty: 80, item: "IT102" },
{ order: "200", type: "production", qty: 110, item: "IT283" },
{ order: "200", type: "customer", qty: 130, item: "IT102" },
{ order: "200", type: "production", qty: 45, item: "IT233" },
{ order: "200", type: "stock", qty: 30, item: "IT282" },
{ order: "210", type: "production", qty: 300, item: "IT282" },
{ order: "210", type: "production", qty: 190, item: "IT283" },
{ order: "210", type: "customer", qty: 180, item: "IT102" },
{ order: "210", type: "production", qty: 210, item: "IT283" },
{ order: "210", type: "customer", qty: 230, item: "IT102" },
{ order: "210", type: "production", qty: 145, item: "IT233" },
{ order: "210", type: "stock", qty: 130, item: "IT282" }
];
我需要做到的是要能够使用该数据的多个字段以不同的顺序,像下面的结果组:
let result = groupBy(stock, ["order"]);
[
{
field: "order",
value: "200",
rows: [
{ order: "200", type: "production", qty: 200, item: "IT282" },
{ order: "200", type: "production", qty: 90, item: "IT283" },
{ order: "200", type: "customer", qty: 80, item: "IT102" },
{ order: "200", type: "production", qty: 110, item: "IT283" },
{ order: "200", type: "customer", qty: 130, item: "IT102" },
{ order: "200", type: "production", qty: 45, item: "IT233" },
{ order: "200", type: "stock", qty: 30, item: "IT282" }
]
},
{
field: "order",
value: "210",
rows: [
{ order: "210", type: "production", qty: 300, item: "IT282" },
{ order: "210", type: "production", qty: 190, item: "IT283" },
{ order: "210", type: "customer", qty: 180, item: "IT102" },
{ order: "210", type: "production", qty: 210, item: "IT283" },
{ order: "210", type: "customer", qty: 230, item: "IT102" },
{ order: "210", type: "production", qty: 145, item: "IT233" },
{ order: "210", type: "stock", qty: 130, item: "IT282" }
]
}
];
let result = groupBy(stock, ["item"]);
[
{
field: "item",
value: "IT282",
rows: [
{ order: "200", type: "production", qty: 200, item: "IT282" },
{ order: "200", type: "stock", qty: 30, item: "IT282" },
{ order: "210", type: "production", qty: 300, item: "IT282" },
{ order: "210", type: "stock", qty: 130, item: "IT282" }
]
},
{
field: "item",
value: "IT283",
rows: [
{ order: "200", type: "production", qty: 90, item: "IT283" },
{ order: "200", type: "production", qty: 110, item: "IT283" },
{ order: "210", type: "production", qty: 190, item: "IT283" },
{ order: "210", type: "production", qty: 210, item: "IT283" }
]
},
{
field: "item",
value: "IT102",
rows: [
{ order: "200", type: "customer", qty: 80, item: "IT102" },
{ order: "200", type: "customer", qty: 130, item: "IT102" },
{ order: "210", type: "customer", qty: 180, item: "IT102" },
{ order: "210", type: "customer", qty: 230, item: "IT102" }
]
},
{
field: "item",
value: "IT233",
rows: [
{ order: "200", type: "production", qty: 45, item: "IT233" },
{ order: "210", type: "production", qty: 145, item: "IT233" }
]
}
];
let result = groupBy(stock, ["order", "item"]);
[
{
field: "order",
value: "200",
rows: [
{
field: "item",
value: "IT282",
rows: [
{
order: "200",
type: "production",
qty: 200,
item: "IT282"
},
{ order: "200", type: "stock", qty: 30, item: "IT282" },
{
order: "210",
type: "production",
qty: 300,
item: "IT282"
}
]
},
{
field: "item",
value: "IT283",
rows: [
{
order: "200",
type: "production",
qty: 90,
item: "IT283"
},
{
order: "200",
type: "production",
qty: 110,
item: "IT283"
}
]
},
{
field: "item",
value: "IT102",
rows: [
{ order: "200", type: "customer", qty: 80, item: "IT102" },
{ order: "200", type: "customer", qty: 130, item: "IT102" }
]
},
{
field: "item",
value: "IT233",
rows: [
{
order: "200",
type: "production",
qty: 45,
item: "IT233"
}
]
}
]
},
{
field: "order",
value: "210",
rows: [
{
field: "item",
value: "IT282",
rows: [{ order: "210", type: "stock", qty: 130, item: "IT282" }]
},
{
field: "item",
value: "IT283",
rows: [
{
order: "210",
type: "production",
qty: 190,
item: "IT283"
},
{
order: "210",
type: "production",
qty: 210,
item: "IT283"
}
]
},
{
field: "item",
value: "IT102",
rows: [
{ order: "210", type: "customer", qty: 180, item: "IT102" },
{ order: "210", type: "customer", qty: 230, item: "IT102" }
]
},
{
field: "item",
value: "IT233",
rows: [
{
order: "210",
type: "production",
qty: 145,
item: "IT233"
}
]
}
]
}
];
let result = groupBy(stock, ["item", "order"]);
[
{
field: "item",
value: "IT282",
rows: [
{
field: "order",
value: "200",
rows: [
{
order: "200",
type: "production",
qty: 200,
item: "IT282"
},
{ order: "200", type: "stock", qty: 30, item: "IT282" }
]
},
{
field: "order",
value: "210",
rows: [
{
order: "210",
type: "production",
qty: 300,
item: "IT282"
},
{ order: "210", type: "stock", qty: 130, item: "IT282" }
]
}
]
},
{
field: "item",
value: "IT283",
rows: [
{
field: "order",
value: "200",
rows: [
{
order: "200",
type: "production",
qty: 90,
item: "IT283"
},
{
order: "200",
type: "production",
qty: 110,
item: "IT283"
}
]
},
{
field: "order",
value: "210",
rows: [
{
order: "210",
type: "production",
qty: 190,
item: "IT283"
},
{
order: "210",
type: "production",
qty: 210,
item: "IT283"
}
]
}
]
},
{
field: "item",
value: "IT102",
rows: [
{
field: "order",
value: "200",
rows: [
{ order: "200", type: "customer", qty: 80, item: "IT102" },
{ order: "200", type: "customer", qty: 130, item: "IT102" }
]
},
{
field: "order",
value: "210",
rows: [
{ order: "210", type: "customer", qty: 180, item: "IT102" },
{ order: "210", type: "customer", qty: 230, item: "IT102" }
]
}
]
},
{
field: "item",
value: "IT233",
rows: [
{
field: "order",
value: "200",
rows: [
{ order: "200", type: "production", qty: 45, item: "IT233" }
]
},
{
field: "order",
value: "210",
rows: [
{
order: "210",
type: "production",
qty: 145,
item: "IT233"
}
]
}
]
}
];
我的群功能将收到任何订单项目和组任意数量的数组字段的任何阵列。
因为我想一个基于ES6功能,今天我用下面groupBy
函数从该链接 ,对于单次的作品,但我有那么困难嵌套在一起。
这是我工作的代码:
groupBy = (rows, groups) => {
if (groups.length === 0) return rows;
return this.groupByField(rows, groups, 0);
};
groupByField = (rows, groups, index) => {
if (index >= groups.length) return rows;
let grouped = this.groupRows(rows, groups[index]);
index++;
let ret = [];
grouped.rows.map(row => {
ret.push(this.groupByField(row.rows, groups, index));
});
grouped.rows = ret;
return grouped;
};
groupRows = (rows, field) => {
return rows.reduce(function(groups, x) {
let val = helper.getValueByFieldNameString(x.data, field);
let found = groups.find(item => {
return item.groupedValue === val;
});
if (!found) {
let rows = [];
rows.push(x);
groups.push({
groupedField: field,
groupedValue: val,
rows: rows
});
} else {
found.rows.push(x);
}
return groups;
}, []);
};
似乎递归性工作不正常。