[转帖][强烈推荐]网页表格(Table/GridView)标题栏和列冻结(跨浏览器兼容)

最新推荐文章于 2023-04-26 08:40:42 发布

weixin_34234823

最新推荐文章于 2023-04-26 08:40:42 发布

阅读量209

点赞数

文章标签： xhtml javascript c# ViewUI

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 ，或者你也可以下载程式包回去玩。

weixin_34234823

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫