问题
I need to fix header of the grid view. I tried jscript file ,
<div class="Container" style="width: 816px; height: 319px;">
<asp:GridView
ID="GrdViewMyTasks" runat="server" AllowSorting="True"
AutoGenerateColumns="False" BackColor="White" BorderColor="#0061C1"
BorderStyle="None" CaptionAlign="Bottom" EmptyDataText="No Records Found"
Font-Names="Verdana" Font-Size="X-Small" ForeColor="#0061C1"
OnRowDataBound="GrdViewMyTasks_RowDataBound" width="99%" Height="247px"
onselectedindexchanged="GrdViewMyTasks_SelectedIndexChanged" ShowFooter="True"
ShowHeaderWhenEmpty="True" >
<Columns>
<asp:BoundField DataField="TaskID" HeaderText="SL No" >
<FooterStyle BackColor="#0061C1" />
<HeaderStyle BackColor="#0061C1" HorizontalAlign="Center"
VerticalAlign="Middle" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:BoundField>
<asp:TemplateField HeaderText="Task Name">
<ItemTemplate>
<asp:Label ID="TaskName" runat="server"
Font-Names="Verdana" Font-Size="X-Small" Height="24px"
Text='<%# Eval("TaskName")%>' Width="70px"></asp:Label>
</ItemTemplate>
<FooterStyle BackColor="#0061C1" />
<HeaderStyle BackColor="#0061C1" ForeColor="White" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Due Date">
<ItemTemplate>
<asp:Label
ID="DueDate" runat="server" DataFormatString="{0:dd/MM/yyyy}"
Font-Names="Verdana" Font-Size="X-Small" Height="20px"
Text='<%# Eval("DueDate","{0:dd/MM/yyyy}")%>' Width="70px"></asp:Label>
</ItemTemplate>
<FooterStyle BackColor="#0061C1" />
<HeaderStyle BackColor="#0061C1" ForeColor="White" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:Label
ID="Description" runat="server" Font-Names="Verdana" Font-Size="X-Small"
Height="20px" Text='<%# Eval("Description")%>' Width="90px"></asp:Label>
</ItemTemplate>
<FooterStyle BackColor="#0061C1" />
<HeaderStyle BackColor="#0061C1" ForeColor="White" />
<ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Assign By">
<ItemTemplate>
<asp:Label
ID="AssignBy" runat="server" Font-Names="Verdana" Font-Size="X-Small"
Height="20px" Text='<%# Eval("AssignBy")%>' Width="80px"></asp:Label>
</ItemTemplate>
<FooterStyle BackColor="#0061C1" />
<HeaderStyle BackColor="#0061C1" ForeColor="White" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Status">
<ItemTemplate>
<asp:Label
ID="Status" runat="server" Font-Names="Verdana" Font-Size="X-Small"
Height="20px" Text='<%# Eval("Status")%>' Width="60px"></asp:Label>
</ItemTemplate>
<FooterStyle BackColor="#0061C1" />
<HeaderStyle BackColor="#0061C1" ForeColor="White" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:TemplateField>
<asp:TemplateField HeaderText="% Complete">
<ItemTemplate>
<asp:Label
ID="PercentageComplete" runat="server" Font-Names="Verdana" Font-Size="X-Small"
Height="20px" Text='<%# Eval("PercentageComplete")%>' Width="70px"></asp:Label>
</ItemTemplate>
<FooterStyle BackColor="#0061C1" />
<HeaderStyle BackColor="#0061C1" ForeColor="White" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:TemplateField>
<asp:TemplateField HeaderText="View Details">
<ItemTemplate>
<asp:HyperLink
ID="ViewDetails" runat="server" DataNavigateUrlFields="TaskID"
DataNavigateUrlFormatString="Reports.aspx?TaskID={0}" Font-Names="Verdana"
Font-Size="X-Small" ForeColor="#0061C1" Height="24px" Width="70px"
NavigateUrl="Reports.aspx" Text="ViewDetails" >View</asp:HyperLink>
</ItemTemplate>
<FooterStyle BackColor="#0061C1" />
<HeaderStyle BackColor="#0061C1" ForeColor="White" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<style type="text/css">
.Container
{
overflow: auto;
}
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="ScrollableGrid.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#<%=GrdViewMyTasks.ClientID %>').Scrollable();
}
)
</script>
header gets frixed but d grid view width has shortened and header size has been increased.. it dsnt gets fit with d div tag .. i have placed my grid view code and jquery file
回答1:
Just try to js file like
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$('#<%=GridViewName.ClientID %>').Scrollable();
}
)
</script>
Check this jQuery Fixed Header Scrollable GridView
You will get ScrollableGrid.js file from Jquery orignal website.
Hope it works for you.
回答2:
Two problems with your code:
positioning
absoluteis being applied to the firstboundfieldwhich means it will be applied to all cells in the first column! It is also applied to thetemplatefield'sheaderstyleandfooterstylebut not to theitemtemplate(anyway that is irrelevant)! Also, it picks up top-left as 0-0. So, no wonder your columns coalesce and merge to the leftmost column.All this makes no sense to the table. You can't be applying positioning on table cells! You can apply positioning to the entire table, but individual cells, nopes.
Two solutions to your problem:
Create your own code to create a scrollable table. You WILL have to create separate header and/or footer tables. You cannot create a scrollable table without splitting
theadand/ortfoot.Go by the libraries people have recommended to you.
回答3:
This may help: http://www.fixedheadertable.com/ - it's more reliable cross browser. Though you may have to persuade ASP.NET to render <th> tags: How do I get Gridview to render THEAD?
来源：https://stackoverflow.com/questions/17482311/grid-view-fixed-header