Question

有一个填充数据的网格，

<asp:Panel ID="Panel1" runat="server" ScrollBars="Auto" Width="1000px" 
  Height="8000px" BorderColor="Black" BorderWidth="1px" Visible="true" BackColor="LightGray">
<asp:GridView ID="List" runat="server" Visible="False" OnRowDataBound="List_RowDataBound" AutoGenerateColumns="true">

      <HeaderStyle CssClass="gridstyleHead" />
      <RowStyle CssClass="gridRowstyle" />

</asp:GridView>

并且有一个适用于网格的样式表

.gridstyleHead {
white-space: nowrap;
text-align: left;
font-family: Arial;
font-size: 10pt;
font-weight: lighter;
padding-left: 3px;
position: relative;
top: expression(this.offsetParent.scrollTop);
z-index: 10;
}

.gridRowstyle {
white-space: nowrap;
border-width: 1px;
background-color: white;
font-family: Arial;
font-size: 9pt;
height: 29px;

}

我正在尝试打印网格中的数据

function btnPrint_Click() {
varfoo="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,
width=500,height=600,left=50,top=25";


  varprintdata=document.getElementById('<%=Panel1.ClientID%>').innerHTML;
        var printWindow = window.open('', 'PRINT', foo);
        var radioButtons = document.getElementsByName("ordrcvd");
        var ord = '';
        for (var x = 0; x < radioButtons.length; x++) {
            if (radioButtons[x].checked) {
                ord = radioButtons[x].value;
            }
        }
        printWindow.document.write('<html><head><link rel="stylesheet" href="css/invoice.css" />');
        printWindow.document.write(' </head><body>');
        printWindow.document.write('<table>');
        printWindow.document.write('<tr><td style = "font-weight:bold;font-family:arial;font-size:12"> order Received' + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  : ');
        printWindow.document.write('</td><td style = "font-weight:normal;font-family:arial;font-size:12">');
        printWindow.document.write(document.getElementById('<%= txtordRcvd.ClientID%>').value);
        printWindow.document.write('</td></tr>');
        printWindow.document.write('<tr><td> </br>');
        printWindow.document.write('</td></tr>');
        printWindow.document.write(' </table>');
        printWindow.document.write(printContent);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.focus();

        return false;
    }

但问题是网格中的标题是不固定的上一个打印显示网格标题未固定。

网格中未固定的标题很好但是当我尝试打印该网格并向下滚动时，标题位置错位。

任何人都可以建议如何为正在打印的网格应用样式表，以便修复标题

提前致谢，

Answer 1

您需要使用打印介质查询。我无法测试它，但我相信你想要这样的东西：

@media print { 
    .gridstyleHead {
        top: 0;
    }
}

或者任何数字都可以让你的标题处于正确的位置。

Answer 2

这是我的解决方案，我试过这种方式，它对我有用，之前（如上所述）有一个名为panel1的面板，数据被绑定到该面板中的网格，样式表应用于该网格，该网格表示要修复的标题。现在，我采用了另一个类似于Panel1的面板，并将其命名为Panel2，但是应用了样式，使得它不显示，并且数据被绑定到该面板2中的网格，类似于之前的流程和样式表应用于该网格，表示标题是“不固定”。希望解释不错。

我遵循的步骤：

我在现有的css文件中包含了一个类，删除了表达式“top：expression（this.offsetParent.scrollTop）;”来自gridstyleHead

.gridstyleHeadlocal
{
white-space: nowrap;
text-align: left;
font-family: Arial;
font-size: 10pt;
font-weight: lighter;
padding-left: 3px;
position: relative;

z-index: 10;
}

现在我又采用了另一个Panel2，就像Panel1一样，它的样式为style = Display：none

<asp:Panel ID="Panel2" style = "Display:none" runat="server" 
ScrollBars="Auto" Width="1000px" 
         Height="8000px" BorderColor="Black" BorderWidth="1px" 
        Visible="true" 
       BackColor="LightGray">
       <asp:GridView ID="Listlocal" runat="server" Visible="False" 
        OnRowDataBound="List_RowDataBound" AutoGenerateColumns="true">

        <HeaderStyle CssClass="gridstyleHeadlocal" />
       <RowStyle CssClass="gridRowstyle" />

 </asp:GridView>

并使用打印按钮功能调用Panel2 的document.getElementById（ '＆LT;％= Panel2.ClientID％GT;'）。innerHTML的;

  function btnPrint_Click() {
 varfoo="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=500,height=600,left=50,top=25";


  varprintdata=document.getElementById('<%=Panel2.ClientID%>').innerHTML;
    var printWindow = window.open('', 'PRINT', foo);
    var radioButtons = document.getElementsByName("ordrcvd");
    var ord = '';
    for (var x = 0; x < radioButtons.length; x++) {
        if (radioButtons[x].checked) {
            ord = radioButtons[x].value;
        }
    }
    printWindow.document.write('<html><head><link rel="stylesheet" href="css/invoice.css" />');
    printWindow.document.write(' </head><body>');
    printWindow.document.write('<table>');
    printWindow.document.write('<tr><td style = "font-weight:bold;font-family:arial;font-size:12"> order Received' + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  : ');
    printWindow.document.write('</td><td style = "font-weight:normal;font-family:arial;font-size:12">');
    printWindow.document.write(document.getElementById('<%= txtordRcvd.ClientID%>').value);
    printWindow.document.write('</td></tr>');
    printWindow.document.write('<tr><td> </br>');
    printWindow.document.write('</td></tr>');
    printWindow.document.write(' </table>');
    printWindow.document.write(printContent);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.focus();

    return false;
   }

打印时网格的标题位置未固定，

2 个答案: