Question

我想要一个带固定标题的gridview。我试过这个link和this

我能够一直这样做但是网格标题宽度和列宽度没有设置相同的问题。所以它看起来并不好看，但滚动和冻结确实可以正常工作。如果我不使用冻结逻辑，那么标题宽度显示正确。

当我观察代码并与我进行比较时，我发现他们曾经在设计中设置列，因为我没有在设计中指定列，我从后面的代码设置SQL数据源并且设置了列作为SQL数据源的一部分。所以在设计中我有

 <form id="form1" runat="server">
  <div>

  </div>

   <asp:GridView ID="GridView1" runat="server" Font-Size=12px CellPadding="4" 
    ForeColor="#333333" GridLines="Vertical">

   <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <EditRowStyle BackColor="#999999" />
    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
   </asp:GridView>

</form>

这是一个显示问题的屏幕截图（您可以观察标题宽度和列的变化）

enter image description here 但是这些链接中给出的示例指定了标记和列名称。这是问题所在吗？

我如何解决我的问题？如何将标题宽度设置为与列宽相同。

修改

下面是页面的呈现HTML（但是这个HTML显示了一些与asp页面在浏览器中显示的不同。第一行显示为在HTML中移位，但在asp中是正确的。但是头文件问题仍然存在于两者中）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="./Scrollable Gridview with Fixed Header_files/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="./Scrollable Gridview with Fixed Header_files/ScrollableGridPlugin.js" type="text/javascript"></script>
<title>
Scrollable Gridview with Fixed Header
</title>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#GridView1').Scrollable();
}
)
</script>
</head>
<body>
    <form name="form1" method="post" action="./Scrollable Gridview with Fixed Header_files/Scrollable Gridview with Fixed Header.htm" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/">
</div>

<div>

</div>


    <div>

<div></div><div><table cellspacing="0" cellpadding="4" rules="cols" border="1" style="color: rgb(51, 51, 51); font-size: 12px; width: 900px; border-collapse: collapse;"><tbody><tr style="color:White;background-color:#5D7B9D;font-weight:bold;">
        <th scope="col" style="width: 105px;">name</th><th scope="col" style="width: 241px;">Status</th><th scope="col" style="width: 59px;">Error</th><th scope="col" style="width: 96px;">No.</th><th scope="col" style="width: 37px;">date</th><th scope="col" style="width: 100px;">date1</th><th scope="col" style="width: 59px;">Received</th><th scope="col" style="width: 51px;">time1</th><th scope="col" style="width: 100px;">time2</th><th scope="col" style="width: 22px;">AY</th><th scope="col" style="width: 26px;">we</th><th scope="col" style="width: 84px;">Setft</th>
    </tr></tbody></table></div><div style="overflow: auto; height: 200px; width: 917px;"><table cellspacing="0" cellpadding="4" rules="cols" border="1" id="GridView1" style="color:#333333;font-size:12px;width:900px;border-collapse:collapse;">
    <tbody><tr style="color:#333333;background-color:#F7F6F3;">
        <td style="width: 105px;">Sews</td><td style="width: 241px;">fggghtg</td><td style="width: 59px;">thtthgtrtht</td><td style="width: 96px;">&nbsp;</td><td style="width: 37px;">&nbsp;</td><td style="width: 100px;">&nbsp;</td><td style="width: 59px;">17:52:53</td><td style="width: 51px;">&nbsp;</td><td style="width: 100px;">&nbsp;</td><td style="width: 22px;">14-15</td><td style="width: 26px;">1</td><td style="width: 84px;">sdgg</td>
    </tr><tr style="color:#284775;background-color:White;">
        <td>Ses</td><td>dffggg</td><td>Invalid </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>18:00:31</td><td>&nbsp;</td><td>&nbsp;</td><td>14-15</td><td>1</td>
        <td>DtyuFGtyuty</td>
    </tr><tr style="color:#333333;background-color:#F7F6F3;">
        <td>Ses</td><td>qwerty</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>18:03:42</td><td>&nbsp;</td><td>&nbsp;</td><td>14-15</td><td>1</td>
        <td>yuutyutu</td>
    </tr><tr style="color:#284775;background-color:White;">
        <td>rttty N</td><td>dffggg</td><td>Invalid </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>20:31:14</td><td>&nbsp;</td><td>&nbsp;</td><td>14-15</td><td>1</td>
        <td>tyuutu</td>
    </tr><tr style="color:#333333;background-color:#F7F6F3;">
        <td>tyu tyu tyu</td><td>qwerty</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>17:37:02</td><td>&nbsp;</td><td>&nbsp;</td><td>14-15</td><td>2</td>
        <td>tyutu</td>
    </tr><tr style="color:#284775;background-color:White;">
        <td>tyu tyu tyu</td><td>rerty tht.</td><td>Invalid</td>
        <td>ytutyutu</td><td>13-08-2014</td><td>13-08-2014</td><td>11:43:23</td><td>10:37:26</td><td>10:37:26</td><td>14-15</td><td>2</td>
        <td>tyuutyty</td>
    </tr><tr style="color:#333333;background-color:#F7F6F3;">
        <td>Testing</td><td>qwerty</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>11:45:34</td><td>&nbsp;</td><td>&nbsp;</td><td>14-15</td><td>1</td>
        <td>tyutyu</td>
    </tr><tr style="color:#284775;background-color:White;">
        <td>Testing</td><td>qwerty</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>11:48:22</td><td>&nbsp;</td><td>&nbsp;</td><td>14-15</td><td>1</td>
        <td>tyuutut</td>
    </tr>
</tbody></table></div></div>

</form>


</body></html>

Answer 1

您可以使用其他解决方案：http://www.dotnetbull.com/2011/11/scrollable-gridview-with-fixed-headers.html

它对我有用。

Answer 2

我正在使用MakeStaticHeader函数的修改版本：

function MakeStaticHeader(gridId, hasFooter) {
var height = $('#' + gridId).height();
var tbl = document.getElementById(gridId);
if (tbl) {
    var headerHeight = $('#' + gridId + ' tr:first-child').height();
    var DivHR = document.getElementById(gridId + 'DivHeaderRow');
    var DivMC = document.getElementById(gridId + 'DivMainContent');
    var DivFR = document.getElementById(gridId + 'DivFooterRow');

    //*** Set divheaderRow Properties ****
    DivHR.style.height = headerHeight + 'px';
    //DivHR.style.width = (parseInt(width) - 16) + 'px';
    DivHR.style.position = 'relative';
    DivHR.style.top = '0px';
    DivHR.style.zIndex = '10';
    DivHR.style.verticalAlign = 'top';
    DivHR.style.marginRight = '17px';

    //*** Set divMainContent Properties ****
    //DivMC.style.width = width + 'px';
    DivMC.style.height = height + 'px';
    DivMC.style.position = 'relative';
    DivMC.style.top = -headerHeight + 'px';
    DivMC.style.zIndex = '1';

    //*** Set divFooterRow Properties ****
    //DivFR.style.width = (parseInt(width) - 16) + 'px';
    DivFR.style.position = 'relative';
    DivFR.style.top = -headerHeight + 'px';
    DivFR.style.verticalAlign = 'top';
    DivFR.style.paddingtop = '2px';

    if (hasFooter) {
        var tblfr = tbl.cloneNode(true);
        tblfr.removeChild(tblfr.getElementsByTagName('tbody')[0]);
        var tblBody = document.createElement('tbody');
        //tblfr.style.width = '100%';
        tblfr.cellSpacing = "0";
        tblfr.border = "0px";
        tblfr.rules = "none";
        //*****In the case of Footer Row *******
        tblBody.appendChild(tbl.rows[tbl.rows.length - 1]);
        tblfr.appendChild(tblBody);
        DivFR.appendChild(tblfr);
    }

    //****Copy Header in divHeaderRow****
    DivHR.appendChild(tbl.cloneNode(true));
}

在网格视图中冻结标题期间正确设置标题宽度和列

2 个答案: