在gridview中冻结标题期间正确设置标题宽度和列

Posted

技术标签:

【中文标题】在gridview中冻结标题期间正确设置标题宽度和列【英文标题】:Set header width and column properly during freeze the header in gridview 【发布时间】:2014-09-30 10:52:15 【问题描述】:

我想要一个带有固定标题的网格视图。我试过这个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>

这是显示问题的屏幕截图(您可以观察标题宽度和列的变化)

但是这些链接中给出的示例指定了标签和列名。那么这是问题所在吗?

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

编辑:

下面是页面的渲染 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>

【问题讨论】:

似乎您添加了一些与表格混淆的 CSS。您可以将其添加到您的问题中。表头和正文列不会“同步”,除非您对其进行一些不好的样式设置。 我想帮助你,但我没有使用 asp.net。你能给我们展示一下渲染的 html 吗? 【参考方案1】:

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

它对我有用。

【讨论】:

它对我的情况很有用。但是,如果我以 px 为单位给出高度和宽度,那么它在不同的分辨率下会显示不同。所以我尝试使用 % ,当我用它来制作整个页面大小时,我得到了页面的滚动条,并且网格没有滚动,而是页面正在滚动。那么如何解决呢?【参考方案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));

【讨论】:

不,它不起作用。它不会将标题列宽设置为统一。在您的代码中,您从宽度中减去 16 以设置标题宽度。 16 是滚动条的宽度吗?

以上是关于在gridview中冻结标题期间正确设置标题宽度和列的主要内容,如果未能解决你的问题,请参考以下文章

表格的宽度因显示而冻结:块

如何设置winform中gridview的表头宽度,及编号

冻结 gridview 标头和 SUB 标头

带有冻结标题和前四列的 GridView?

在 GridView 中编辑行时如何设置文本框的宽度?

颤动-在gridview上换行时如何设置宽度?