Gridview固定表头最佳实现方式(转)_IT徐胖子

http://blog.sina.com.cn/u/1739256900

首页博文目录关于我

个人资料

微博

加好友发纸条

写留言加关注

博客等级：
博客积分：

博客访问：
关注人气：
获赠金笔：0支
赠出金笔：0支
荣誉徽章：

正文字体大小：大中小

Gridview固定表头最佳实现方式(转)

(2011-06-26 17:45:19)

标签：

it

最近经常用到gridview固定表头，并且gridview数据太多时出现下拉scroll条，虽然实现了但一直没有找到最好的方法。终于让我找到并最完美的实现。

就像这样

http://s9/middle/67aaf4444a69a5e849388&690

使用“ScrollableTable.js”这个小js代码，网上有下，很小，主要是通过对Table表格由THead、Tbody、TFooter的表格进行表头和表尾的固定，非常棒。

1 引用这个js

<body onload="makeScrollableTable('GridView1',true,'500px')">   // ------这里是重点
    <form id="form1" runat="server">
    <div>        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px"
            CellPadding="3" DataSourceID="SqlDataSource1"
            onprerender="GridView1_PreRender">
            <RowStyle ForeColor="#000066" />
            <Columns>
                <asp:BoundField DataField="username" HeaderText="用户名"
                    SortExpression="username" />
                <asp:BoundField DataField="deptname" HeaderText="公司"
                    SortExpression="deptname" />
                <asp:BoundField DataField="officename" HeaderText="部门"
                    SortExpression="officename" />
                <asp:BoundField DataField="suboffice" HeaderText="科室车间"
                    SortExpression="suboffice" />
                <asp:BoundField DataField="ipaddres" HeaderText="ip地址"
                    SortExpression="ipaddres" />
            </Columns>
            <FooterStyle BackColor="White" ForeColor="#000066" />
            <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
            <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
        </asp:GridView>
</div>
</form>
<body>

3 编写gridview1的PreRender事件

    protected void GridView1_PreRender(object sender, EventArgs e)
    {
        GridView1.UseAccessibleHeader = true;
        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
    }

据我试验得知：这个地方主要是为了将gridview转化为Thead、Tbody的形式，因为“ScrollableTable.js”只有在这种形式下才会发挥作用。

4 删除页面表头的这部分内容

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

我就纳了闷了，如果存在这部分声明就不会实现效果，其实这部分完全可以删除，但是这个地方实在是郁闷，我找了好长时间才解决这个问题，但是不知道为什么，希望高手能解决！怀疑是不是ScrollableTable.js的一个bug，不知道。

优点：代码少，简练，结构简单，兼容性好，至少在我这里还没发现兼容性问题

原帖地址：http://www.cnblogs.com/A_ming/archive/2011/06/24/2089011.html

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：MVC ActionResult之JavaScriptResult，JsonResult(转)

后一篇：该用Tryparse了

新浪BLOG意见反馈留言板　欢迎批评指正