GridView样式及排序问题

公告

View Post

　　回来了，又是一年，公司牛鬼蛇神什么人都有，真是呆不下去了，哎

　　咳咳咳，正题，正题，最近有一个项目，数据列表要显示为header不动，但列表值要有竖的滚动条那

种。控件嘛，自然还是选GridView，基于Framework 2.0，采用的是sqlserver 2000的pubs数据库，今天

就说说这个样式及GridView排序的小问题。
　　最终想要的样式如下图　　

　　
　　大家可以看到，当一页数据过多时，控件会出现下拉滚动条，要实现这种效果，有两种方式，一种是

用javascript来实现，一种是自定义控件来实现这个功能。但不管是哪种方式,实现的方式都是将GridView

放到一个层里，并将层的style设置如下overflow:auto，将GridView的头隐去，并将HTML代码复

制出来，在另一个层里显示。
　　先说说javascript脚本的方式。在页面body的onload事件里，取到GridView生成的Table，并将Table

克隆到一个新的对象里，再去掉除了header以外的行，最后将GridView的header隐去，并将新对象显示在

GridView上方的层，设置GridView所在层的高。代码如下

代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ScriptGridViewStyle.aspx.cs" Inherits="GridViewForm.ScriptGridViewStyle" %>

<!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 runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
    function showHeader() {
        var ele = document.getElementById("<%=GridView1.ClientID%>");   //取得GridView生成Table的ID
        var table = ele.cloneNode(ele);                                 //clone Table的无素
        var count = table.rows.length;                                  //取得Table的行数

        for (var i = 1; i < count; i++) {                               //删除表格行，只保存表头，即header
            table.deleteRow(1);
        }

        var header = document.getElementById("header");
        header.appendChild(table);                                      //此时table只有header了，将其加到层里
        ele.deleteRow(0);                                               //删除原数据表的header

    }


</script>
</head>
<body onload="showHeader();">
    <form id="form1" runat="server">
    <table>
    <tr>
    <td>
     <div id="header">
                </div>
                <div style="overflow:auto;height:200px" >
     <asp:GridView ID="GridView1" Width="500px"
            AutoGenerateColumns="False" runat="server" CellPadding="4" ForeColor="#333333"
                        GridLines="Both">
         <RowStyle BackColor="#EFF3FB" />
        <Columns>
                <asp:BoundField HeaderStyle-Width="5%" ItemStyle-Width="5%"
                    HeaderText="stor_id" DataField="stor_id" >
<HeaderStyle Width="5%"></HeaderStyle>

<ItemStyle Width="5%"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField HeaderStyle-Width="5%" ItemStyle-Width="5%"
                    HeaderText="ord_num" DataField="ord_num">
<HeaderStyle Width="5%"></HeaderStyle>

<ItemStyle Width="5%"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField HeaderStyle-Width="5%" ItemStyle-Width="5%" HeaderText="qty"
                    DataField="qty" >
<HeaderStyle Width="5%"></HeaderStyle>

<ItemStyle Width="5%"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField HeaderStyle-Width="5%" ItemStyle-Width="5%"
                    HeaderText="title_id" DataField="title_id" >
<HeaderStyle Width="5%"></HeaderStyle>

<ItemStyle Width="5%"></ItemStyle>
                </asp:BoundField>
        </Columns>
         <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
         <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
         <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
         <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
         <EditRowStyle BackColor="#2461BF" />
         <AlternatingRowStyle BackColor="White" />
    </asp:GridView>
    </div>
    </td>
    </tr>
    </table>
    </form>
</body>
</html>

　　再来说说自定义控件的方式。建立自定义控件，继承GridView，重写RenderContents方法，将

GridView的header在一个新的层里render一下，并将GridView的HeaderRow的Visible属性设置为false，

同时控件外放一个属性来设置GridView所在层的高度。代码如下（附自定义控件的原代码）

代码

        /// <summary>
        /// 重写rendercontents方法
        /// 如设置了GridHeight属性，超出显示高度会出现滚动条
        /// </summary>
        /// <param name="output">HTML输出</param>
        protected override void RenderContents(HtmlTextWriter output)
        {
            if (this.ShowHeader && this._gridheight != String.Empty && this.Rows.Count > 0)
            {
                RenderGrid(output);
            }
            else
            {
                base.RenderContents(output);
            }
        }

  /// <summary>
        /// 显示层数据
        /// </summary>
        /// <param name="output">HTML输出</param>
        private void RenderGrid(HtmlTextWriter output)
        {

            Table table = new Table();

            table.MergeStyle(base.ControlStyle);

            table.RenderBeginTag(output);
            base.HeaderRow.RenderControl(output);
            table.RenderEndTag(output);
            base.HeaderRow.Visible = false;
            output.Write("<div style={overflow:auto;height:" + this._gridheight + "}>");

            base.RenderContents(output);

            output.Write("</div>");

        }

　　好了，现在来看看排序的问题。使用GridView时，GridView控件会自己帮你排好序，但是请注意，

GridView控件支持的是内存排序，不是数据库级的，也就是说，如果你用的是数据库分页，并使用自带的

排序功能的话，得到的结果和你预期的会不同。GridView有两个属性记录了某个字段下一次排序的方向，

分别是SortExpression及SortDirection，可以使用这两个属性的值来进行自己定义排序，但是，不幸的

是，这两个属性的值只有在使用SqlDataSource等数据控件做数据源时，才会被设置。所以，如果你是用

DataSet的话，这两个属性的值是不会被记录的，另外，SortExpression只记录当前所使用的排序列，

SortDirection记录下次当前排序列的排序方向。于是我改写了GridView的OnSorting方法，并外放了一个

只读的Dictionary类型的字段SortExpreAndDirec此字段记录所有已排序字段的名称及方向的键值对，

特殊的是，这个属性记录得是排序列当前的排序方向。详情请见所附代码，希望对大家有所帮助。

GridViewStyle代码示例

posted on 2010-01-22 10:19 我不是冷狐冲，我就是一酒壶阅读(1931) 评论(1) 收藏举报

刷新页面返回顶部

令狐冲和酒壶

公告

View Post

GridView样式及排序问题