创建按列分组的矩阵表 [英] Creating matrix table grouped by columns
问题描述
我需要列出在特定区域内运行的所有项目。所有项目都应作为列添加到表中。项目数量可以增加，因此需要动态创建具有动态列的表。此外，表格应以两列开头，其中包括有关每个项目应重复的类别和区域的信息。我们还需要按状态对项目进行分组。所以我们需要列分组。我不知道下面的JSON结构是否准确无法满足要求，或者我们是否需要更改
我有类似的JSON，
[{
category：a，
region：Region 1，
项目：[{
项目：A，
资源：2，
状态：绿色
}，{
项目： B，
资源：2，
状态：绿色
}，{
项目：C，
资源： 2，
状态：绿色
}]
}，{
类别：b，
地区：地区2，
项目：[{
项目：F，
资源：2，
状态：红色
}，{
project：A，
资源：4，
状态：绿色
}]
}]
是否可以动态创建按状态列分组的表。
或者我们应该从服务器端处理这些表的创建。
该表应与此类似，
< table> ; < TR> < th rowspan =2> Category< / th> < th rowspan =2> Region< / th> < th colspan =4> Green< / th> < th colspan =3> Red< / th> < / TR> < TR> <第>一种与LT; /第> <的第i; B< /第> <的第i;℃下/次> <的第i; d< /第> <的第i; E< /第> <的第i; F< /第> <的第i; G< /第> < / TR> < TR> < TD>一种与LT; / TD> < td>区域1< / td> < TD> 2'; / TD> < TD> 2'; / TD> < TD> 2'; / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < / TR> < TR> < TD> B< / TD> < td>区域2< / td> < TD> 4℃; / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < TD> 2'; / TD> < TD>< / TD> < / TR> < / table>
我想这是否可以动态实现通过jQuery使用上面的JSON结构或我们是否需要修改JSON结构。
您可以使用诸如
<$等函数在JavaScript中执行此操作p $ p>
use strict;
function groupBy（array，selectKey）{
return array.reduce（（groups，element）=> {
const key = selectKey（element）;
if（groups [key]）{
groups [key] .push（element）;
}
else {
groups [key] = [element];
}
返回组;
}，{}）;
}
这会将数组投影到一个对象中，该对象具有从中投射的每个不同键的属性数组中的对象。每个属性的值将是在我们传递的任何 selectKey 函数下生成该键的值的数组。
注意： selectKey 应该返回一个字符串或一个数字，无论如何，它的结果将被强制转换成一个字符串。
现在，根据您的数组，我们可以对其进行分组。
让我们按类别分组：
use strict; function groupBy（array，selectKey）{return array.reduce（（groups，element）=> {const key = selectKey（element）; if（groups [key]）{groups [key] .push（element）;} else {groups [key] = [element];} return groups;}，{}）;} const xs = [{category：a，region：Region 1，pro jects：[{project：A，resources：2，status：green}，{project：B，resources：2，status：green} ，{project：C，resources：2，status：green}]}，{category：b，region：Region 2，项目：[{ project：F，resources：2，status：red}，{project：A，resources：4，status：green}]}]; const byCategory = groupBy（xs，x => x.category）; console.log（byCategory）;
现在，如果我们需要按多列分组呢？我们可以使用逻辑来扩充groupBy以获取自定义比较函数，但我们可以通过使用字符串连接来作弊。
在以下示例中，我们按区域：
use strict; function groupBy（array，selectKey）{return array.reduce（（groups，element）=> { const key = selectKey（element）; if（groups [key]）{groups [key] .push（element）;} else {groups [key] = [element];} return groups;}，{}）;} const xs = [{category：a，region：Region 1，项目：[{project：A，resources：2，status：'green'}，{ project：B，resources：2，status：green}，{project：C，resources：2，s tatus：'green'}]}，{category：b，region：Region 2，项目：[{project：F，resources：2，status： 'red'}，{project：A，resources：4，status：'green'}]}]; const byCategoryAndRegion = groupBy（xs，x => `category：$ {x.category}，region：$ {x.region}`）; console.log（byCategoryAndRegion）;
我对数据的结构和方向并不完全清楚，但这应该足以让你走了。
I have requirement where I need to list all the projects running inside a specific region. All the project should be added as columns in a table. The number of projects can increase so the table needs to be dynamically created having dynamic columns. Also the table should start with two columns which include information about the category and region which should be repeated for every project. Also we need to group the project by status. So we need column grouping. I don't know whether the below JSON structure is accurate to meet the requirements or do we need to change that
I have JSON similar to this,
[{
"category": "a",
"region": "Region 1",
projects: [{
"project": "A",
"resources" : 2,
"status": green
}, {
"project": "B",
"resources" : 2,
"status": green
}, {
"project": "C",
"resources" : 2,
"status": green
}]
}, {
"category": "b",
"region": "Region 2",
projects: [{
"project": "F",
"resources" : 2,
"status": red
}, {
"project": "A",
"resources" : 4,
"status": green
}]
}]
Is it possible to dynamically create a table grouped by status column. Or should we handle creation of such tables from server side. The table should look similar to this,
<table>
<tr>
<th rowspan="2">Category</th>
<th rowspan="2">Region</th>
<th colspan="4">Green</th>
<th colspan="3">Red</th>
</tr>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
</tr>
<tr>
<td>A</td>
<td>Region 1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>B</td>
<td>Region 2</td>
<td>4</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>2</td>
<td></td>
</tr>
</table>
I want whether this can be achieved dynamically via jQuery using the above JSON structure or do we need to modify the JSON structure.
You can do this in JavaScript using a function such as
"use strict";
function groupBy(array, selectKey) {
return array.reduce((groups, element) => {
const key = selectKey(element);
if (groups[key]) {
groups[key].push(element);
}
else {
groups[key] = [element];
}
return groups;
}, {});
}
This will project an array into an object with properties for each distinct key projected from the objects in the array. The value of each property will be an array of the values that produced that key under whatever selectKey function we passed.
Note: selectKey should return a string or a number and, irregardless, its result will be coerced into a string.
Now, given your array, we can group it.
Lets start by grouping by category:
"use strict";
function groupBy(array, selectKey) {
return array.reduce((groups, element) => {
const key = selectKey(element);
if (groups[key]) {
groups[key].push(element);
}
else {
groups[key] = [element];
}
return groups;
}, {});
}
const xs = [{
"category": "a",
"region": "Region 1",
projects: [{
"project": "A",
"resources": 2,
"status": 'green'
}, {
"project": "B",
"resources": 2,
"status": 'green'
}, {
"project": "C",
"resources": 2,
"status": 'green'
}]
}, {
"category": "b",
"region": "Region 2",
projects: [{
"project": "F",
"resources": 2,
"status": 'red'
}, {
"project": "A",
"resources": 4,
"status": 'green'
}]
}];
const byCategory = groupBy(xs, x => x.category);
console.log(byCategory);
Now, what if we need to group by multiple columns? We could augment groupBy with logic to take a custom comparison function, but we can cheat by using string concatenation.
In the following example, we group by category and by region:
"use strict";
function groupBy(array, selectKey) {
return array.reduce((groups, element) => {
const key = selectKey(element);
if (groups[key]) {
groups[key].push(element);
}
else {
groups[key] = [element];
}
return groups;
}, {});
}
const xs = [{
"category": "a",
"region": "Region 1",
projects: [{
"project": "A",
"resources": 2,
"status": 'green'
}, {
"project": "B",
"resources": 2,
"status": 'green'
}, {
"project": "C",
"resources": 2,
"status": 'green'
}]
}, {
"category": "b",
"region": "Region 2",
projects: [{
"project": "F",
"resources": 2,
"status": 'red'
}, {
"project": "A",
"resources": 4,
"status": 'green'
}]
}];
const byCategoryAndRegion = groupBy(
xs,
x => `category: ${x.category}, region: ${x.region}`
);
console.log(byCategoryAndRegion);
I'm not entirely clear on the structure and orientation of your data, but this should be enough to get you going.
这篇关于创建按列分组的矩阵表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
