动态创建具有一定复杂性的HTML表
本文关键字：HTML 复杂性 创建 具有一 动态 | 更新日期: 2023-09-27 18:16:06
下面是我的json结构:
{
"list": [
{
"Variant": "V1",
"Id": 1,
"TestList": [
{
"SubVariantList": [
{
"Id": 10,
"Name": "A",
"Fluctuation":100
},
{
"Id": 20,
"Name": "B",
"Fluctuation":100
},
{
"Id": 30,
"Name": "C",
"Fluctuation":200
}
]
}
]
},
{
"Variant": "V2",
"Id": 2,
"TestList": [
{
"SubVariantList": [
{
"Id": 40,
"Name": "A",
"Fluctuation":1100
},
{
"Id": 50,
"Name": "B",
"Fluctuation":1200
},
{
"Id": 60,
"Name": "C",
"Fluctuation":1300
}
]
}
]
},
{
"Variant": "V3",
"Id": 3,
"TestList": [
{
"SubVariantList": [
{
"Id": 40,
"Name": "A",
"Fluctuation":500
},
{
"Id": 50,
"Name": "C",
"Fluctuation":600
}
]
}
]
}
]
}
现在有json结构，下面有2个行程:
V1:A - B - C
V2:A - C
基于上面的json结构，我正在创建动态表，如下所示:
Table1:
A - B | B - C (Headers)
VariantName AValue BValue CValue (Columns)
V1 100 100 200
V2 1100 1200 1300
Table2:
A - C (Headers)
VariantName AValue CValue (columns)
V3 500 600
我总是有固定顺序的子变量，从1点开始，如下所示:
A - B - C - D
第一个A将被固定，剩下的我可以有这样的组合:
A - B - C - D
A - B - C
A - C
A- D
A - B - C - D
A - B - C
A - D
A- C
子变量流的一些组合出现如下问题:
V1: A - B - C
V2 : A - B - C - D
上面的数据，我得到表结构如下:
Table1 : <thead>
A - B | B - C
Table2:<thead>
A - B | B - C | C - D
但是已经在表中创建了A - B和B - C结构，因为顺序是正确的，所以只有一个表，如下所示:
Table1 : <thead>
A - B | B - C | C - D
只有当出现如下的跳转时才会创建新表:
A - C
A - D
这是我的代码:
<div>
@{
var tableHeaders = new List<string>();
for (int i = 0; i < Model.Count; i++)
{
var subvariants = string.Join(",", Model[i].TestList[0].SubVariantList.Select(cd => cd.Name)); //creating unique combination
if (tableHeaders.Count == 0)
{
tableHeaders.Add(subvariants);
}
else if (!tableHeaders.Contains(subvariants))
{
tableHeaders.Add(subvariants);
}
}
}
@for (int i = 0; i < tableHeaders.Count; i++)
{
string[] subvariants = tableHeaders[i].Split(',');
<table>
<thead>
<tr>
@for (int cnt = 0; cnt < tableHeaders.Count() - 1; cnt++) // for 2 subvariants
{
<td>
@subvariants[cnt] <span>-</span> @subvariants[cnt + 1]
</td>
}
</tr>
<tr>
<th style="border: 1px solid black;">VariantName</th>
@for (int cnt = 0; cnt < subvariants.Count() - 1; cnt++)
{
if (cnt == 0)
{
<th style="border: 1px solid black;">@subvariants[cnt]</th>
}
<th style="border: 1px solid black;">@subvariants[cnt + 1]</th>
}
</tr>
</thead>
<tbody>
@for (int m = 0; m < Model.Count; m++)
{
string subvariants = string.Join(",", Model[m].TestList[0].SubVariantList.Select(cd => cd.Name));
var headers = tableHeaders[i];
if (headers.Contains(subvariants))
{
<tr>
<td>@Model[m].Variant</td>
<td>@Model[m].TestList[0].SubVariantList[0].Value</td>
@for (int j = 1; j < Model[m].TestList[0].SubVariantList.Count; j++)
{
<td>@Model[m].TestList[0].SubVariantList[j].Value</td>
}
</tr>
}
}
</tbody>
</table>
}
</div>
我想知道我是否因为各种场景和子变体的组合而被困在这个复杂的逻辑中。
您需要做的第一件事是(1)从视图中删除所有逻辑并将其放置在它所属的控制器中，以及(2)使用视图模型来表示您希望如何在视图中显示数据。
视图模型应该是
public class TableVM
{
public TableVM()
{
Variants = new List<RowVM>();
}
public string Title { get; set; }
public IEnumerable<string> Headers { get; set; }
public List<RowVM> Variants { get; set; }
// The following properties are used for 'grouping' your data
public string Sequence { get; set; }
public bool IsSequential { get; set; }
public int MaxColumns { get; set; }
}
public class RowVM
{
public RowVM()
{
Fluctuations = new List<ColumnVM>();
}
public string Variant { get; set; }
public List<ColumnVM> Fluctuations { get; set; }
}
public class ColumnVM
{
public decimal Fluctuation { get; set; }
}
，它允许您在视图中使用简单的循环来生成每个表，并且在每个表中，每个Variant对应一行，每个Fluctuation对应一行。
@model List<TableVM>
@foreach(var table in Model)
{
<h4>@table.Title</h4>
@foreach(var row in table.Variants)
{
<td>@row.Variant</td>
@foreach(var column in row.Fluctuations)
{
<td>@column.Fluctuation</td>
}
}
}
然后在控制器中，循环遍历数据并构建视图模型以返回到视图。
为了解决为序列的每个"组"创建一个新表的问题，您可以基于"组"创建一个"键"(TableVM的Sequence属性)。如果Sequence不存在，则添加一个新的TableVM，否则添加一个新的TableVM
为了解决将序列ABC和ABCD包含在同一个表中的问题，需要一种方法来识别序列中的字符是否连续(TableVM的IsSequental属性)。如果你真的要使用这些字符，那么就像
private bool IsSequential(string sequence)
{
char[] c = sequence.ToCharArray();
return c[0] + c.Length - 1 == c[c.Length - 1];
}
虽然这也暗示了一个不灵活和脆弱的设计，你应该真正考虑和int属性在数据库中的序列/顺序。
A-B-C-D的附加数据。注意:我发现你的表头有点混乱，并建议在fiddle替代。