GridView的標題欄、列凍結效果(跨瀏覽器版)
本文來源：http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/02/18/supertable-plugin-for-jquery.aspx
稍早發表了GridView 的標題列凍結效果，足以滿足工作上的需求，不過存在兩個缺點:只支援FF及IE6/7、只能凍結列不能凍結欄(行)...
不甘心事情只做一半，又挖了一下，驚喜地發現另一個版本: 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);
完整的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>
我放了一個線上Demo在http://www.darkthread.net/MiniAjaxLab/ScrollTable ，或者你也可以下載程 式包回去玩。
)
