GridView的標題欄、列凍結效果(跨瀏覽器版)

不甘心事情只做一半，又挖了一下，驚喜地發現另一個版本: Super Tables，可以支援Firefox 2+, Internet Explorer 5.5+, Safari 3+, Opera 9+ 以及Chrome，而且也支援直欄的凍結效果，在功能上大勝ScrollableTable，二話不說，通通包起來。

SuperTable的原理與ScrollableTable不同，它需要額外的CSS以及在Table外包一層<div>，可視範圍大小由<div> Style決定，設定時參數也較多(如:fixedCols, headerRows...)，所以我寫了一個jQuery Plugin(jquery.superTable.js)把它包起來。有了Plugin的加持，只要一個toSuperTable(options)就可立即升級成有凍結效果的GridView了。

排版顯示純文字複製文字
/////////////////////////////////////////////////////////////////////////////////////////// Super Tables Plugin for jQuery - MIT Style License// Copyright (c) 2009 Jeffrey Lee --- blog.darkthread.net//// A wrapper for Matt Murphy's Super Tables http://www.matts411.com/post/super_tables///// Contributors:///////////////////////////////////////////////////////////////////////////////////////////////// TO CALL: // $("...").toSuperTable(options)//////// OPTIONS: (order does not matter )// cssSkin : string ( eg. "sDefault", "sSky", "sOrange", "sDark" )// headerRows : integer ( default is 1 )// fixedCols : integer ( default is 0 )// colWidths : integer array ( use -1 for auto sizing )// onStart : function ( any this.variableNameHere variables you create here can be used later ( eg. onFinish function ) )// onFinish : function ( all this.variableNameHere variables created in this script can be used in this function )// margin, padding, width, height, overflow...: Styles for "fakeContainer"//////// Example:// $("#GridView1").toSuperTable(//              { width: "640px", height: "480px", fixedCols: 2,//                onFinish: function() { alert('Done!'); } }) (function($) {    $.fn.extend(            {                toSuperTable: function(options) {                    var setting = $.extend(                    {                        width: "640px", height: "320px",                        margin: "10px", padding: "0px",                        overflow: "hidden", colWidths: undefined,                        fixedCols: 0, headerRows: 1,                        onStart: function() { },                        onFinish: function() { },                        cssSkin: "sSky"                    }, options);                    return this.each(function() {                        var q = $(this);                        var id = q.attr("id");                        q.removeAttr("style").wrap("<div id='" + id + "_box'></div>");                         var nonCssProps = ["fixedCols", "headerRows", "onStart", "onFinish", "cssSkin", "colWidths"];                        var container = $("#" + id + "_box");                         for (var p in setting) {                            if ($.inArray(p, nonCssProps) == -1) {                                container.css(p, setting[p]);                                delete setting[p];                            }                        }                                                var mySt = new superTable(id, setting);                     });                }            });})(jQuery);/////////////////////////////////////////////////////////////////////////////////////////
// Super Tables Plugin for jQuery - MIT Style License
// Copyright (c) 2009 Jeffrey Lee --- blog.darkthread.net
//
// A wrapper for Matt Murphy's Super Tables http://www.matts411.com/post/super_tables/
//
// Contributors:
//
/////////////////////////////////////////////////////////////////////////////////////////
////// TO CALL:
// $("...").toSuperTable(options)
//
////// OPTIONS: (order does not matter )
// cssSkin : string ( eg. "sDefault", "sSky", "sOrange", "sDark" )
// headerRows : integer ( default is 1 )
// fixedCols : integer ( default is 0 )
// colWidths : integer array ( use -1 for auto sizing )
// onStart : function ( any this.variableNameHere variables you create here can be used later ( eg. onFinish function ) )
// onFinish : function ( all this.variableNameHere variables created in this script can be used in this function )
// margin, padding, width, height, overflow...: Styles for "fakeContainer"
//
////// Example:
// $("#GridView1").toSuperTable(
//              { width: "640px", height: "480px", fixedCols: 2,
//                onFinish: function() { alert('Done!'); } })

(function($) {
    $.fn.extend(
            {
                toSuperTable: function(options) {
                    var setting = $.extend(
                    {
                        width: "640px", height: "320px",
                        margin: "10px", padding: "0px",
                        overflow: "hidden", colWidths: undefined,
                        fixedCols: 0, headerRows: 1,
                        onStart: function() { },
                        onFinish: function() { },
                        cssSkin: "sSky"
                    }, options);
                    return this.each(function() {
                        var q = $(this);
                        var id = q.attr("id");
                        q.removeAttr("style").wrap("<div id='" + id + "_box'></div>");

                        var nonCssProps = ["fixedCols", "headerRows", "onStart", "onFinish", "cssSkin", "colWidths"];
                        var container = $("#" + id + "_box");

                        for (var p in setting) {
                            if ($.inArray(p, nonCssProps) == -1) {
                                container.css(p, setting[p]);
                                delete setting[p];
                            }
                        }
                       
                        var mySt = new superTable(id, setting);

                    });
                }
            });
})(jQuery);
完整的Demo程式如下:

排版顯示純文字複製文字
<%@ Page Language="C#" %><%@ Import Namespace="System.Data" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server">    protected void Page_Load(object sender, EventArgs e)    {        DataTable t = new DataTable();        t.Columns.Add("序號", typeof(int));        t.Columns.Add("料號", typeof(string));        t.Columns.Add("單價", typeof(decimal));        for (int i = 1; i <= 10; i++)            t.Columns.Add("庫存" + i, typeof(int));        Random rnd = new Random();        for (int i = 0; i < 80; i++)        {            DataRow row = t.NewRow();            row["序號"] = i + 1;            row["料號"] = Guid.NewGuid().ToString().Substring(0, 13).ToUpper();            row["單價"] = rnd.NextDouble() * 100;            for (int j = 1; j <= 10; j++)                row["庫存" + j] = rnd.Next(10000);            t.Rows.Add(row);                    }        GridView1.AutoGenerateColumns = false;        foreach (DataColumn c in t.Columns)        {            BoundField bf = new BoundField();            bf.DataField = c.ColumnName;            bf.HeaderText = c.ColumnName;            if (c.DataType == typeof(decimal))                bf.DataFormatString = "{0:#,0.00}";            else if (c.DataType == typeof(int))                bf.DataFormatString = "{0:#,0}";            bf.ItemStyle.HorizontalAlign =                (!string.IsNullOrEmpty(bf.DataFormatString)) ?                HorizontalAlign.Right : HorizontalAlign.Center;                            GridView1.Columns.Add(bf);        }        GridView1.DataSource = t;        GridView1.DataBind();    }</script> <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <style type="text/css">    .altRow { background-color: #ddddff; }    </style>    <link href="superTables.css" rel="stylesheet" type="text/css" />    <script type="text/javascript" src="jquery-1.3.1.js"></script>    <script type="text/javascript" src="superTables.js"></script>    <script type="text/javascript" src="jquery.superTable.js"></script>    <script type="text/javascript">        $(function() {            $("#GridView1").toSuperTable({ width: "640px", height: "480px", fixedCols: 2 })            .find("tr:even").addClass("altRow");        });    </script></head><body>    <form id="form1" runat="server">    <asp:GridView ID="GridView1" runat="server" Font-Size="9pt" EnableViewState="false">    </asp:GridView>    </form></body></html><%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable t = new DataTable();
        t.Columns.Add("序號", typeof(int));
        t.Columns.Add("料號", typeof(string));
        t.Columns.Add("單價", typeof(decimal));
        for (int i = 1; i <= 10; i++)
            t.Columns.Add("庫存" + i, typeof(int));
        Random rnd = new Random();
        for (int i = 0; i < 80; i++)
        {
            DataRow row = t.NewRow();
            row["序號"] = i + 1;
            row["料號"] = Guid.NewGuid().ToString().Substring(0, 13).ToUpper();
            row["單價"] = rnd.NextDouble() * 100;
            for (int j = 1; j <= 10; j++)
                row["庫存" + j] = rnd.Next(10000);
            t.Rows.Add(row);           
        }
        GridView1.AutoGenerateColumns = false;
        foreach (DataColumn c in t.Columns)
        {
            BoundField bf = new BoundField();
            bf.DataField = c.ColumnName;
            bf.HeaderText = c.ColumnName;
            if (c.DataType == typeof(decimal))
                bf.DataFormatString = "{0:#,0.00}";
            else if (c.DataType == typeof(int))
                bf.DataFormatString = "{0:#,0}";
            bf.ItemStyle.HorizontalAlign =
                (!string.IsNullOrEmpty(bf.DataFormatString)) ?
                HorizontalAlign.Right : HorizontalAlign.Center;
               
            GridView1.Columns.Add(bf);
        }
        GridView1.DataSource = t;
        GridView1.DataBind();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    .altRow { background-color: #ddddff; }
    </style>
    <link href="superTables.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery-1.3.1.js"></script>
    <script type="text/javascript" src="superTables.js"></script>
    <script type="text/javascript" src="jquery.superTable.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#GridView1").toSuperTable({ width: "640px", height: "480px", fixedCols: 2 })
            .find("tr:even").addClass("altRow");
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="GridView1" runat="server" Font-Size="9pt" EnableViewState="false">
    </asp:GridView>
    </form>
</body>
</html>