html – 在每个页面上打印标题Print.CSS

2023年5月11日 338次阅读

我有一个视图,它采用对象列表.

因此,例如,如果我有一个人员列表……按照他们所在的位置和他们所在的部门按顺序排列：

|  ID  |  Name  |  Location    |  Division  |          Age   |
--------------------------------------------------------------
    1     John      Building1      Finance              25
    2     Alex      Building1      Finance              30
    3     Chris     Building2      ISS                  22
    4     Justin    Building1      Human Resources      41
    5     Mary      Building2      Accounting           43 
    6     Ian       Building1      Human Resources      27
    7     John      Building1      Finance              35

所以我的动作return语句如下所示：

lstOfPersonnel = lstOfPersonnel.OrderBy(x => x.Location).ThenBy(x => x.Division).ThenBy(x => x.Name).ToList();

return View(lstOfPersonnel);

在我看来,我有这个：

<table class="table table-bordered no-border">
    @foreach (var item in Model)
    {
        if ((Model.IndexOf(item) == 0) || ((Model.IndexOf(item) != 0) && (!item.Building.Equals(Model.ElementAt(Model.IndexOf(item) - 1).Building) || !item.Division.Equals(Model.ElementAt(Model.IndexOf(item) - 1).Division))))
        {
                <thead>
                    <tr>
                        <th><b>@item.Building</b></th>
                        <th><b>@item.Division</b></th>
                    </tr>


                    <tr class="no-display"></tr>
                    <tr>
                        <th>Name</th>
                    </tr>
                    <tr>
                        <th>Age</th>
                    </tr>
                </thead>


                <tbody>
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Age)
                        </td>
                    </tr>
                </tbody>
        }
        else
        {
            <tbody>
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Age)
                    </td>
                </tr>
            </tbody>
        }
    }
</table>

现在,当我打印预览时,它会将同一建筑物和分区中的每个人放在各自的标题下.然而,第一个< thead> element ..让我们说这个例子是Building1和Finance,因为.OrderBy ….显示在下一个Building的顶部的每个页面上.

因此,对于视觉效果,这是我打印预览时的样子：

第1页：

// Perfect Render
Building1 | Finance

Name    |    Age
Alex          30
John          35
John          25

第2页：

// Repeat of Page 1's headers
Building1 | Finance

Name    |    Age

Building1 | Human Resources

Name    |    Age
Ian          27
Justin       41

第3页：

// Repeat of Page 1's headers
Building1 | Finance

Name    |    Age

Building2 | Accounting

Name    |    Age
Mary         43

第4页：

// Repeat of Page 1's headers
Building1 | Finance

Name    |    Age

Building2 | ISS

Name    |    Age
Chris         43

最佳答案
Multiple thead in a single table可能不可行.这就是说你必须为你想要创建的每个thead创建一个新表.

要在一个循环中完成此任务,看起来像这样：

var lastBuilding = null, lastDivision = null;

foreach(var item in Model) {

    if(!item.Building.Equals(lastBuilding) || !item.Division.Equals(lastDivision)) {
        if(lastBuilding != null && lastDivision != null) {
            </tbody></table>
        }
        <table>
            <thead>
                <tr>
                    <th><b>@item.Building</b></th>
                    <th><b>@item.Division</b></th>
                </tr>
                <tr class="no-display"></tr>
                <tr>
                    <th>Name</th>
                </tr>
                <tr>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
    }
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Age)
        </td>
    </tr>
    lastBuilding = item.Building;
    lastDivision = item.Division;
}

这里逻辑的关键是：

1. Each item ultimately equates to a row in a table so the item outputs each iteration. The rest is just checking for whether or not a new table should be started (and the last one ended).
2. Setting lastBuilding and lastDivision to null for the first iteration avoids the first table being ended immediately.
点赞