エンティティ フレームワーク LINQ を使用して、部門、プロセス、情報を確認しています。各部門には複数のプロセスがあり、各プロセスは複数のチェックを持つことができます。部門が複数のプロセスに対して一度だけ表示され、各プロセスのチェックがプロセスの前に表示されるようにデータを表示したい。
{"d":"[{\"DataEntryProcessInfos\":[{\"DataEntryCheckInfos\":[{\"CheckId\":21,\"CheckName\":\"Fahad \",\"Frequency\":\"Weekly\"},{\"CheckId\":22,\"CheckName\":\"Fahad \",\"Frequency\":\"Weekly\"},{\"CheckId\":63,\"CheckName\":\"Check Test\",\"Frequency\":\"Fortnightly\"}],\"ProcessId\":7,\"ProcessName\":\"Process 1\"}],\"DepartmentId\":2,\"DepartmentName\":\"Dept 2\"},{\"DataEntryProcessInfos\":[{\"DataEntryCheckInfos\":[{\"CheckId\":86,\"CheckName\":\"afdassd \",\"Frequency\":\"Yearly\"}],\"ProcessId\":8,\"ProcessName\":\"Wasqur Process\"}],\"DepartmentId\":7,\"DepartmentName\":\"Dept 6\"},{\"DataEntryProcessInfos\":[{\"DataEntryCheckInfos\":[{\"CheckId\":65,\"CheckName\":\"New Check \",\"Frequency\":\"Weekly\"},{\"CheckId\":66,\"CheckName\":\"abc \",\"Frequency\":\"Monthly\"},{\"CheckId\":67,\"CheckName\":\"2333 \",\"Frequency\":\"Weekly\"},{\"CheckId\":84,\"CheckName\":\"adafdasdfs\",\"Frequency\":\"Fortnightly\"},{\"CheckId\":85,\"CheckName\":\"Test check\",\"Frequency\":\"Fortnightly\"}],\"ProcessId\":9,\"ProcessName\":\"Process 2 Wasqur\"},{\"DataEntryCheckInfos\":[{\"CheckId\":65,\"CheckName\":\"New Check \",\"Frequency\":\"Weekly\"},{\"CheckId\":66,\"CheckName\":\"abc \",\"Frequency\":\"Monthly\"},{\"CheckId\":67,\"CheckName\":\"2333 \",\"Frequency\":\"Weekly\"},{\"CheckId\":84,\"CheckName\":\"adafdasdfs\",\"Frequency\":\"Fortnightly\"},{\"CheckId\":85,\"CheckName\":\"Test check\",\"Frequency\":\"Fortnightly\"}],\"ProcessId\":14,\"ProcessName\":\"My New Procees\"}],\"DepartmentId\":8,\"DepartmentName\":\"Dept 7\"},{\"DataEntryProcessInfos\":[{\"DataEntryCheckInfos\":[{\"CheckId\":68,\"CheckName\":\"CHeck 1 \",\"Frequency\":\"Weekly\"},{\"CheckId\":73,\"CheckName\":\"New Check \",\"Frequency\":\"Fortnightly\"},{\"CheckId\":74,\"CheckName\":\"Checker \",\"Frequency\":\"Weekly\"},{\"CheckId\":77,\"CheckName\":\"Wasi \",\"Frequency\":\"Weekly\"}],\"ProcessId\":10,\"ProcessName\":\"My New Process\"},{\"DataEntryCheckInfos\":[{\"CheckId\":68,\"CheckName\":\"CHeck 1 \",\"Frequency\":\"Weekly\"},{\"CheckId\":73,\"CheckName\":\"New Check \",\"Frequency\":\"Fortnightly\"},{\"CheckId\":74,\"CheckName\":\"Checker \",\"Frequency\":\"Weekly\"},{\"CheckId\":77,\"CheckName\":\"Wasi \",\"Frequency\":\"Weekly\"}],\"ProcessId\":12,\"ProcessName\":\"Tes\"}],\"DepartmentId\":13,\"DepartmentName\":\"Dept 11\"}]"}
これが例です。
| | 部門 | プロセス | チェック |
| | 部門 1 | プロセスA | チェックA
|------------|-------------| チェックB
|------------| プロセスB | チェックA
|------------|-------------| チェックB
|------------|-------------| チェックC
|------------|-------------| チェック D
| | 部門 2 | プロセスA | チェックA
|------------|-------------| チェックA
上記の例のように Jquery Template を使用してデータをバインドしたいのですが、流動的なテンプレートに問題が発生し、ヘッダーが正しく表示されないため、ネストされたテーブルを使用したくありません。これが上記の質問の私のテンプレートです。
<tr>
<td>
<div class="btn-group row-fluid" style="margin-top: 4px">
<button class="btn">
${DepartmentId}</button>
<button class="btn btn-success">
${DepartmentName}</button></div>
</td>
<td colspan="4">
<table class="table table-striped table-bordered dataTable" border="0" cellspancing="0"
cellpadding="0" style="width: 100%">
{{each DataEntryProcessInfos}}<tr>
<td style="width: 20%">
<div class="btn-group row-fluid" style="margin-top: 4px">
<button class="btn">
${ProcessId}</button>
<button class="btn btn-warning">
${ProcessName}</button></div>
</td>
<td style="width: 60%">
<table style="width: 100%" class="table table-striped table-bordered dataTable">
{{each DataEntryCheckInfos}}<tr>
<td style="width: 33%">
<div class="btn-group row-fluid" style="margin-top: 4px">
<button class="btn">
${CheckId}</button>
<button class="btn btn-danger">
${CheckName}</button></div>
</td>
<td style="width: 33%">
<button class="btn">
${Frequency}
</button>
</td>
<td style="width: 33%">
<a class="btn-link" href="CheckItems.aspx?checkId=${CheckId}&mode=entry">Action
</a>
</td>
</tr>
{{/each}}
</table>
</td>
</tr>
{{/each}}
</table>
</td>
</tr>