我需要修复网格视图的标题。我试过jscript文件,
<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>
标题被修复但是网格视图宽度已经缩短并且标题大小已经增加..它的dsnt与d div标签一致...我已经放置了我的网格视图代码和jquery文件
答案 0 :(得分:3)
尝试像js
文件一样
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$('#<%=GridViewName.ClientID %>').Scrollable();
}
)
</script>
选中此jQuery Fixed Header Scrollable GridView
您将从Jquery orignal website获得ScrollableGrid.js
个文件。
希望它适合你。
答案 1 :(得分:1)
您的代码存在两个问题:
定位absolute
正在应用于第一个boundfield
,这意味着它将应用于第一列中的所有单元格!它也适用于templatefield's
headerstyle
和footerstyle
,但不适用于itemtemplate
(无论如何不相关)!此外,它在左上角为0-0。所以,难怪你的列合并并合并到最左边的列。
这一切都没有意义。您不能在表格单元格上应用定位!您可以将定位应用于整个表格,但单个单元格,nopes。
解决问题的两种方法:
创建自己的代码以创建可滚动表。您将必须创建单独的页眉和/或页脚表。如果不拆分thead
和/或tfoot
,则无法创建可滚动表格。
去人们推荐的图书馆。
答案 2 :(得分:0)
这可能有所帮助:http://www.fixedheadertable.com/ - 它是更可靠的跨浏览器。虽然您可能必须说服ASP.NET呈现<th>
标签:How do I get Gridview to render THEAD?