css - 在 asp.net 中跨多个页面打印具有许多列标题的 Datagrid 表

Question

我无法根据以下链接进一步解释标题。我在 ASP.net 中使用 VB 代码使用 DataGrid(不是 GridView)。

这是我当前在数据网格中的显示 click here to view picture1，我想把它变成这样clck here to view picture2

如果我有多个列，我的目的是将我的数据网格拆分为多个数据网格。我需要拆分它们，以便我可以很好地打印 Google Chrome。因为图 1 中使用 javascript 的 window.print 的打印预览是它自动将我的多列调整到一个数据网格中，因此，如果我有，比方说，20 列数据，我的列间距会很小而且不会用户可读。像这样click here to view picture3

如果您对如何在浏览器中打印我的数据网格有任何建议，我将不胜感激，TIA。

<asp:DataGrid Visible ="true" OnItemDataBound="Item_Bound" ID="dgSheet" 
   runat="server" BackColor="White" BorderColor="black"  BorderStyle="None" 
   BorderWidth="1px" CellSpacing="0" CellPadding="0" Width="100%" PageSize="5"
   CssClass="Narrow" ForeColor="Black">
 <EditItemStyle BackColor="#999999" />
 <FooterStyle BackColor="#2980b9" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="#2980b9" ForeColor="White" HorizontalAlign="Center" />
 <ItemStyle Font-Size="12px" Width="200"  ForeColor="#333333" />
 <HeaderStyle Font-Bold="true" Font-Size="12px" Width="200"  ForeColor="black" />
 <SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
</asp:DataGrid>

我在数据网格中显示数据的部分代码:

   Dim o_Row As DataRow
    Dim o_AdmDates As New Collection()
    Dim s_LastAdmDate As String = ""
    Dim s_AdmDate As String = ""
    Dim o_DerivedTable As New DataTable()

    With o_DerivedTable

        .Columns.Add("TransDate")
        .Columns.Add("Medication")
        .Columns.Add("Dosage")
        .Columns.Add("TransNum")
        .Columns.Add("AdministeredDate")
        .Columns.Add("newAdmed")
    End With

    'Sort by administered dates
    Dim o_FoundRows As DataRow() = o_Dataset.Tables(0).Select("", "AdministeredDate Desc")

    'Extract distinct  administered dates
    For Each o_Row In o_FoundRows
        s_AdmDate = Format(CDate(o_Row.Item("AdministeredDate")), KC_Date_Format2)

        If s_LastAdmDate <> s_AdmDate Then
            s_LastAdmDate = s_AdmDate
            o_AdmDates.Add(s_LastAdmDate)
        End If
    Next

    'Add administred date to derived table
    Dim o_Item As String
    For Each o_Item In o_AdmDates
        o_DerivedTable.Columns.Add(o_Item)
    Next


    'Loop through the administred date
    Dim o_NewRow As DataRow
    Dim o_NextRow As DataRow
    Dim i_Ctr As Integer
    Dim x_isNewRow As Boolean = True
    Dim i_MaxRec As Integer

    i_MaxRec = o_Dataset.Tables(0).Rows.Count - 1

    For i_Ctr = 0 To i_MaxRec
        o_Row = o_Dataset.Tables(0).Rows(i_Ctr)
        If i_Ctr <> i_MaxRec Then
            o_NextRow = o_Dataset.Tables(0).Rows(i_Ctr + 1)
        End If

        If x_isNewRow Then
            o_NewRow = o_DerivedTable.NewRow()
        End If

        o_NewRow("TransDate") = o_Row("TransDate")
        o_NewRow("Medication") = o_Row("Medication")
        o_NewRow("Dosage") = o_Row("Dosage")
        o_NewRow("TransNum") = o_Row("TransNum")
        o_NewRow("AdministeredDate") = Format(CDate(o_Row("AdministeredDate")), KC_Date_Format2)
        o_NewRow("newAdmed") = o_Row("newAdmed")


        'Fill approriate result date column based on query
        For Each o_Item In o_AdmDates
            s_AdmDate = Format(CDate(o_Row("AdministeredDate")), KC_Date_Format2)
            Dim AdmTim As DateTime = DateTime.Parse(o_Row("AdministeredDate"))
            If s_AdmDate = o_Item Then
                o_NewRow(s_AdmDate) = AdmTim.ToString("hh:mm tt") + " - " + o_Row("UserID")
            End If
        Next

        If i_Ctr < i_MaxRec _
            AndAlso Not o_NextRow Is Nothing _
            AndAlso o_Row("TransDate") = o_NextRow("TransDate") _
            AndAlso o_Row("Medication") = o_NextRow("Medication") _
            AndAlso o_Row("AdministeredDate") = o_NextRow("AdministeredDate") Then
            x_isNewRow = False
        Else
            o_DerivedTable.Rows.Add(o_NewRow)
            x_isNewRow = True
        End If

    Next
    dgSheetPrint.DataSource = o_DerivedTable
    dgSheetPrint.DataBind()

Answer 1

首先我想说的是，您不是在打印数据网格，而是在打印由它生成的 html。因此，您需要在客户端做一些事情。因为你已经写了你需要打破表格然后打印我附上了一个 html 页面，你可以从那里复制代码并将其更改为与数据网格生成的 html 一起使用，你将需要至少更改数据网格的 ID。

代码如下

[因为你没有提供生成的 html 我做了一个类似的表格]

<table id="previousOrderExports" class="chromeTheme">
    <tr>
        <td class="bold">Export ID</td>
        <td class="bold">Request Type</td>
        <td class="bold">Timeframe</td>
        <td class="bold">Search Filter</td>
        <td class="bold">Search Term</td>
        <td class="bold">Requested on</td>
        <td class="bold">Processed on</td>
        <td class="bold">Export Status</td>
        <td class="bold">Download</td>
    </tr>
    <tr>
        <td>143306</td>
        <td>manual</td>
        <td>11/8/14 - 12/8/14</td>
        <td>Timespan</td>
        <td></td>
        <td>12/08/14 03:37:00 AM PST</td>
        <td>12/08/14 03:37:08 AM PST</td>
        <td>Done</td>
        <td><a href="fghhsd.dsfd/sfre/143306">Download</a></td>
    </tr>
    <tr>
        <td>142873</td>
        <td>auto</td>
        <td>12/7/14 - 12/8/14</td>
        <td>Timespan</td>
        <td></td>
        <td>12/08/14 01:01:10 AM PST</td>
        <td>12/08/14 01:03:00 AM PST</td>
        <td>Done</td>
        <td><a href="fghhsd.dsfd/sfre/142873">Download</a></td>
    </tr>
    <tr>
        <td>142766</td>
        <td>auto</td>
        <td>12/7/14 - 12/8/14</td>
        <td>Timespan</td>
        <td></td>
        <td>12/07/14 11:01:03 PM PST</td>
        <td>12/07/14 11:02:04 PM PST</td>
        <td>Done</td>
        <td><a href="fghhsd.dsfd/sfre/142766">Download</a></td>
    </tr>
    <tr>
        <td>142752</td>
        <td>auto</td>
        <td>12/7/14 - 12/8/14</td>
        <td>Timespan</td>
        <td></td>
        <td>12/07/14 10:01:03 PM PST</td>
        <td>12/07/14 10:02:05 PM PST</td>
        <td>Done</td>
        <td><a href="fghhsd.dsfd/sfre/142752">Download</a></td>
    </tr>
    <tr>
        <td>142738</td>
        <td>auto</td>
        <td>12/7/14 - 12/8/14</td>
        <td>Timespan</td>
        <td></td>
        <td>12/07/14 09:01:03 PM PST</td>
        <td>12/07/14 09:02:07 PM PST</td>
        <td>Done</td>
        <td><a href="fghhsd.dsfd/sfre/142738">Download</a></td>
    </tr>
    <tr>
        <td>142723</td>
        <td>auto</td>
        <td>12/7/14 - 12/8/14</td>
        <td>Timespan</td>
        <td></td>
        <td>12/07/14 08:01:02 PM PST</td>
        <td>12/07/14 08:02:04 PM PST</td>
        <td>Done</td>
        <td><a href="fghhsd.dsfd/sfre/142723">Download</a></td>
    </tr>
    <tr>
        <td>142709</td>
        <td>auto</td>
        <td>12/7/14 - 12/8/14</td>
        <td>Timespan</td>
        <td></td>
        <td>12/07/14 07:01:03 PM PST</td>
        <td>12/07/14 07:02:04 PM PST</td>
        <td>Done</td>
        <td><a href="fghhsd.dsfd/sfre/142709">Download</a></td>
    </tr>
</table>
<input id="Button1" type="button" value="Print" onclick="print_breakup_table()" />
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    function print_breakup_table()
    {
        var tableid = "previousOrderExports"; //id of table in this case cliend side id of your datagrid
        var fixedcols = 2;// no. of columns 0 index based that will be repeated on every page
        var eachpagecols = 3; // no. of columns that will get printed on each page
        var colCount = 0;
        $('#' + tableid + ' tr:nth-child(1) td').each(function () {
            if ($(this).attr('colspan')) {
                colCount += +$(this).attr('colspan');
            } else {
                colCount++;
            }
        });
        colCount--; //get 0 based columncount
        var col_left_after_fixed_col = colCount - fixedcols;
        var pagerequired = col_left_after_fixed_col / eachpagecols;
        if ((col_left_after_fixed_col % eachpagecols)>0) {
            pagerequired++;
        }
        for (var i = 0; i < pagerequired; i++) {
            var html = "<table>";
            var startcols = fixedcols + (i * eachpagecols);
            var endcols = startcols + eachpagecols;
            //add fixed cols
            $('#' + tableid + ' tr').each(function () {
                html += "<tr>";
                $(this).children('td').each(function (index, object) {
                    if (index <= fixedcols) {
                        html += "<td>" + $(this).html() + "</td>";
                    } else {
                        if (index <= endcols && index >= startcols) {
                            html += "<td>" + $(this).html() + "</td>";
                        }
                    }
                });
                html += "</tr>";
            });



            html += "</table>";
            myWindow = window.open('', '', 'width=800,height=600');
            myWindow.document.write(html);


            myWindow.document.close();


            myWindow.focus();
            myWindow.print();
        }

    }
</script>