嵌套表Comlex JSON Jquery模板

Question

我正在使用实体框架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\"}]"}

以下是示例。

---

| Deptarment |过程|检查|

|部门1 |过程A |检查A

| ------------ | ------------- |检查B

| ------------ |过程B |检查A

| ------------ | ------------- |检查B

| ------------ | ------------- |检查C

| ------------ | ------------- |检查D

|部门2 |过程A |检查A

| ------------ | ------------- |检查A

我想使用Jquery模板绑定数据，如上例所示，但我不想使用嵌套表，因为它会为流体模板创建问题，并且标题将无法正确显示。这是我在上述问题中的模板。

 <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>