VIP会员
购物车
私信
发表新帖
立即签到ASP.NET开发实战1200例（第一卷）216例：《创建表头固定、表体可滚动的Gridview控件》遇到的新问题
发表在ASP.NET图书答疑
2012-10-25
是否精华
是
否
版块置顶:
是
否
我给GridView添加了一个固定的表头，利用了Script脚本，其中粗体字部分是重点。后面有完整的前台和后台代码，可以正常运行。
但是当我将这个脚本用到另外一个GridView上却出现了错位的问题，如图1. 这主要是表头的宽度没有设置。我应该如何改进呢？
--------------------------------前台-----------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Try_Default4" %>
<!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 id="Head1" runat="server">
<title>创建表头固定，表体可滚动的GridView</title>
<script type="text/javascript">
[strong]function s()
{
var t = document.getElementById("<%=GridView1.ClientID%>");
var t2 = t.cloneNode(true)
for(i = t2.rows.length -1;i > 0;i--)
t2.deleteRow(i)
t.deleteRow(0)
a.appendChild(t2)
}
window.onload = s
</script>
[/strong]
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
[strong]<div id="a">
</div>
<div style="overflow: scroll; height: 200px">[/strong]
<asp:GridView ID="GridView1" runat="server" Font-Size="12px"
GridLines="None" CellPadding="4" Width="560px" ForeColor="#333333"
AutoGenerateColumns="False" DataKeyNames="ContractNumberID"
DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="ContractNumberID" HeaderText="合同ID"
InsertVisible="False" ReadOnly="True" SortExpression="ContractNumberID" />
<asp:BoundField DataField="ContractNumber" HeaderText="合同编号"
SortExpression="ContractNumber" />
<asp:BoundField DataField="LeaseDateFrom" HeaderText="起始日"
SortExpression="LeaseDateFrom" />
<asp:BoundField DataField="Month" HeaderText="Month" SortExpression="Month" />
<asp:BoundField DataField="MonthRent" HeaderText="MonthRent"
SortExpression="MonthRent" />
<asp:BoundField DataField="MonthRentPaid" HeaderText="MonthRentPaid"
SortExpression="MonthRentPaid" />
</Columns>
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#E3EAEB" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#EDEDED" Height="26px" />
<EditRowStyle BackColor="#7C6F57" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:长铁物业公司资产数据库ConnectionString %>"
SelectCommand="SELECT [ContractNumberID], [ContractNumber], [LeaseDateFrom], [Month], [MonthRent], [MonthRentPaid] FROM [RentTableA]">
</asp:SqlDataSource>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
--------------------------------后台---------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Try_Default4 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridView1.Attributes.Add("style", "table-layout:fixed");
}
}
}
[img src=http://social.msdn.microsoft.com/Forums/getfile/183939/img]
但是当我将这个脚本用到另外一个GridView上却出现了错位的问题，如图1. 这主要是表头的宽度没有设置。我应该如何改进呢？
--------------------------------前台-----------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Try_Default4" %>
<!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 id="Head1" runat="server">
<title>创建表头固定，表体可滚动的GridView</title>
<script type="text/javascript">
[strong]function s()
{
var t = document.getElementById("<%=GridView1.ClientID%>");
var t2 = t.cloneNode(true)
for(i = t2.rows.length -1;i > 0;i--)
t2.deleteRow(i)
t.deleteRow(0)
a.appendChild(t2)
}
window.onload = s
</script>
[/strong]
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
[strong]<div id="a">
</div>
<div style="overflow: scroll; height: 200px">[/strong]
<asp:GridView ID="GridView1" runat="server" Font-Size="12px"
GridLines="None" CellPadding="4" Width="560px" ForeColor="#333333"
AutoGenerateColumns="False" DataKeyNames="ContractNumberID"
DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="ContractNumberID" HeaderText="合同ID"
InsertVisible="False" ReadOnly="True" SortExpression="ContractNumberID" />
<asp:BoundField DataField="ContractNumber" HeaderText="合同编号"
SortExpression="ContractNumber" />
<asp:BoundField DataField="LeaseDateFrom" HeaderText="起始日"
SortExpression="LeaseDateFrom" />
<asp:BoundField DataField="Month" HeaderText="Month" SortExpression="Month" />
<asp:BoundField DataField="MonthRent" HeaderText="MonthRent"
SortExpression="MonthRent" />
<asp:BoundField DataField="MonthRentPaid" HeaderText="MonthRentPaid"
SortExpression="MonthRentPaid" />
</Columns>
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#E3EAEB" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#EDEDED" Height="26px" />
<EditRowStyle BackColor="#7C6F57" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:长铁物业公司资产数据库ConnectionString %>"
SelectCommand="SELECT [ContractNumberID], [ContractNumber], [LeaseDateFrom], [Month], [MonthRent], [MonthRentPaid] FROM [RentTableA]">
</asp:SqlDataSource>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
--------------------------------后台---------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Try_Default4 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridView1.Attributes.Add("style", "table-layout:fixed");
}
}
}
[img src=http://social.msdn.microsoft.com/Forums/getfile/183939/img]
分享到：
关注
回复
支持(
反对(
