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

2009-02-18 12:10 AM

稍早發表了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 ，或者你也可以下載程式包回去玩。

Keywords: fixed column, fixed header, freeze, scroll, excel, datagrid, gridview, html table, plugin, jQuery

[2010-07-26補充]

to 各位網友，關於Super Table，陸續累積了好多網友的提問，不過坦白跟大家說，當初為要動用這個技術解決的工作需求，受限於Javascript在表格欄位超多時的捲動效能表現無法符合User需求，最後還是決定改用Silverlight實作... 因此這部分並未深入嘗試繼續研究了。

我仍有興趣解決一些"小幅修改JS就能克服"的問題，但前題必須要請大家提供"可以示範問題所在的實際網頁範例"，才好射茶包。Super Table所使用的技巧蠻Hacking的，若能簡單滿足需求很好，若必須大幅改造才能適用，我倒覺值得評估一下。(純個人意見)

Comments

# 2009-02-17 12:19 PM by leo

請問一下~我在使用您Demo網頁中的資料時料號與序號那一欄的捲動速度好像與其他右側的速度不太一樣本來以為是資料太都才會這樣但好像只有在FF才有，我用IE試了一下沒有這是怎麼樣的問題呢?

# 2009-02-17 07:21 PM by Jeffrey

to leo, SuperTable其實把Table拆成好幾個div，再用Javascript讓彼此連動，我覺得捲動上的不一致是因為Javascript在不同Browser上執行效率不夠好所致(資料表愈大愈明顯)，依我測試結果，只有FF及Opera有此現象，IE, Safari, Chrome用起來都蠻順的。換句話說，這段Javascript在FF/Opera上的執行效果較差，除非針對它們去Tune Javascript Code，不然只能默默接受，呵。

# 2009-02-17 08:34 PM by Owen

perfect and useful

# 2009-02-19 03:32 AM by sdtest

当列标题较长时,此时虽然设置了标题的宽度,但标题还是平铺显示,导致该列被拉宽.不能还有什么设置吗?

# 2009-02-19 05:18 PM by Jeffrey

to sdtest, 不太容易想像出問題畫面，要不要給個圖示或網頁範例大家研究一下。

# 2009-04-16 04:16 AM by Kevin

請問一下: 是否可以動態設定以下的width與height嗎? $("#GridView1").toSuperTable({ width: "640px", height: "480px", 因為有時GridView資料列數的總長度小於上面設定的height, 這時捲軸與GridView會分開

# 2009-05-09 07:27 AM by Shawn

Question from New bie: When you call the 'toSuperTable' function, you set the width and height, $("#GridView1").toSuperTable( { width: "640px", height: "480px", fixedCols: 2 }) .find("tr:even").addClass("altRow"); is it going to overwrite the default value in jquery.superTable.js var setting = $.extend( { width: "640px", height: "320px", .......

# 2009-05-10 10:36 PM by Jeffrey

to Shawn, yes, $.extend() is used to merge default option parameters and parameters specified by caller. It's the typical way in jQuery plugin to receive optional parameter with default values.

# 2009-05-18 03:43 AM by Danie

請問一下～我把大大的SuperTables加入MasterPage就不行耶沒有fixed的效果可是如果用獨立的Page又可以不知道有沒有大大可以解決套用MasterPage的問題謝謝囉！

# 2009-05-18 05:45 AM by Danie

Jeffrey你好～ MasterPage的問題我已經找到了就是ClientID的問題這部分我已經排除了但是我現在遇到另一個問題就是如果Gridview在UpdatePanel裡面也會沒有fixed的效果關於這部分不知道大大是否有解？謝謝～

# 2009-05-18 06:22 PM by Jeffrey

to Dannie, 您所說在UpdatePanel裡的狀況，是否在動態更新GridView內容後才發生fixed失效? 若是，我猜是更新GridView後沒有重新呼叫toSuperTable()的緣故。

# 2009-05-19 01:33 AM by Danie

to Jeffery, 的確有您說的情況所以我在DataBind()的後面寫了一行JavaScript string strScript = "$(function () {$('#" + gdv_List_ClientID + "').toSuperTable().find('tr:even').addClass('GridView_altRow');});"; ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "FixedGridView", strScript, true); 這樣就正常了，多謝大師提醒！

# 2009-05-20 10:00 PM by JIS

我在gridview中有一欄textbox讓使用者輸入數值，然後在onblur的時候觸發javascript與前一欄位做運算，最後把結果放在下一欄中顯示(innerHTML)，結果發生表格欄位的寬度沒有隨著內容數值的長度變寬，總之就是變成破格重疊顯示在下一個欄位上，但是在沒有加上supertable的情形下是可以自動調整欄寬的，我再數值回填的innerHTML中加上stytle的寬度還是不動如山，還請各位高手前輩指教，謝謝

# 2009-05-26 10:07 PM by Sean

請教一下 1.小弟我也遇到如同Kevin的問題,當資料只有一筆,而height設超過一筆資料的高度時,水平捲軸將會與資料有一段空白間隔 2.無法支援GridView的分頁功能另外,這真是一項好工具,感謝版主的分享

# 2009-06-08 06:15 AM by Maxi

我想請問,這個jQuery做的wrapper目的是甚麼? 我意思是,不用jquery也可以寫wrapper,jquery在這裡提供了甚麼幫助呢? btw,我發現用jquery的code可讀性很低

# 2009-06-08 05:39 PM by Jeffrey

@Maxi, 包成jQuery Wrapper的用意是讓它具有跟其他jQuery Plugin一致的叫用方式，讓採用jQuery寫網頁的人可以用習慣的呼叫方式應用它，而不必特地切回傳統的Javascript方式。我也認為易讀好學並不是jQuery要標榜的特色，跟Regular Expression一樣，學會一堆咒語，就可以變出魔法來。由jQuery走紅的程度來看，大家並沒有被它的低可讀性及陡峭學習曲線嚇跑。

# 2009-06-08 11:02 PM by Maxi

暗黑大,我現在用supertable做實驗,沒用jQuery,只是用他最基本的功能,0.3版.row,col都是fix = 1 IE可以看到table,但橫向的scrollbar沒出現 FF/chrome都是甚麼都看不到,DOM裡面是有建會是那裡出問題嗎?

# 2009-06-08 11:39 PM by Maxi

暗黑大,真的不好意思,我找到FF/chrome看不到的答案了因為ASP.NET在render時和IE會不一樣... IE : gridview = <table/> FF/Chrome : gridview = <div><table/></div> 所以我包在supertable外面的div的長寬,在FF/Chrome變成沒有設定...我開始明白為甚麼你要用jQuery Wrapper... 但我還是解決不了問題1,就是我的橫向scrollbar沒出現... 好像是sData的height錯了,應該要減掉scrollbar的高度現在不知道怎麼辦,看一下jQuery好了...

# 2009-06-09 12:01 AM by Maxi

暗黑大,我解決了,要用javascript動態找出supertable的parentNode,再幫它加長寬就可以.不能用先定義好的div去包裹. 感謝你

# 2009-06-09 03:25 AM by Maxi

不好意思,又打擾了我現在雖然可以用supertable了但好像用IE7打開的話,再關IE7就會當掉... 是因為Javascript有memory leak嗎? 暗黑大有遇到嗎?

# 2009-07-23 11:09 PM by lingtw

为什么我的数据集很多的时候，速度非常慢！！！

# 2009-09-07 03:07 AM by Tim

請問一下.如果在Gridview 在 Item Template 中放一個TextBox Bind一個Columns ,Postback 後 TextBox 的值並非我設的值耶!!

# 2009-09-28 09:41 PM by vien

我也遇到在Gridview 的 Item Template 中放一個TextBox Bind一個Columns,Postback後TextBox的值會改變(ex:本來值是"1",Postback一次後便成"1,1",在Postback一次就變成"1,1,1",看起來像是被Append上去.)

# 2009-10-08 04:33 AM by Vicky

請問要如何解決"捲軸與GridView分開"的問題，可否給程式範例，謝謝!!

# 2009-11-24 07:20 PM by gym

請問樓主我的GRIDVIEW有隱藏列用的樣式是 .hidden { display: none; } <asp:BoundField DataField="acce01"> <FooterStyle CssClass="hidden" /> <HeaderStyle CssClass="hidden" Width="0px" /> <ItemStyle CssClass="hidden" Width="0px" /> </asp:BoundField> 可在程式中頁面就會亂掉去掉CssClass="hidden" 又正常但隱藏列就顯示出來了有解決辦法嗎

# 2009-11-25 01:53 AM by Richard

请问gridview每列的宽都设定了怎么又被自动分配了呢

# 2009-12-04 09:57 AM by ad

请问为什么没出现滚动条啊,这段代码有什么问题吗? <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %> <!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> <link href="superTables.css" rel="stylesheet" type="text/css" /> <script src="superTables.js" type="text/javascript"></script> <style type="text/css"> .fakeContainer { PADDING: 0px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 640px; HEIGHT: 320px; } </style> </head> <body> <form id="form1" runat="server"> <div class="fakeContainer"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1" EnableViewState="False" Width="536px"> <Columns> <asp:BoundField DataField="类别名称" HeaderText="类别名称" SortExpression="类别名称" /> <asp:BoundField DataField="产品名称" HeaderText="产品名称" SortExpression="产品名称" /> <asp:BoundField DataField="产品销售额" HeaderText="产品销售额" SortExpression="产品销售额" /> <asp:BoundField DataField="发货季度" HeaderText="发货季度" SortExpression="发货季度" /> </Columns> </asp:GridView> </div> <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Northwind.mdb" SelectCommand="SELECT * FROM [1997年产品销售额]"></asp:AccessDataSource> </form> </body> <script type="text/javascript" language="javascript"> (function () { new superTable("GridView1", { cssSkin : "sDefault", fixedCols : 1 }); })(); </script> </html>

# 2009-12-16 05:53 AM by Maxi

暗黑兄,我遇到個大問題了 supertable用object.width, object.height來做寬,高設定好像沒有辦法設定成100%這樣的寬度耶我在嘗試讓他繼承parentNode的寬度也暫時沒有成功如果想要他有比例地設寬度,還有min-width要怎麼辦?

# 2010-01-08 05:40 AM by 煉金術士

請問暗黑大: 在使用這程式的同時,GRIDVIEW似乎會作REFRESH的動作? 而且似乎需要一點時間(約莫2~3秒),請問有沒有可以改善的方式呢? 謝謝!!

# 2010-01-21 10:36 PM by Maxi

我自己做的網頁用在IE7沒問題但IE6 scrollbar會不見了但用他的網頁首頁上的又沒問題黑暗兄能分析看看是甚麼原因嗎

# 2010-01-28 03:16 AM by Maxi

黑暗兄, 我有個jquery plugin的問題,這個plugin應該只能用在table tag. 但plugin內又沒有做檢查,如果我丟一個其他tag進去,例如input tag. 不就會出錯了嗎?

# 2010-01-28 04:09 AM by Jeffrey

to Maxi, 我想可以用以下的寫法簡單過濾，只留下table: return this.filter("table").each(function() { ...

# 2010-02-03 03:47 AM by Bryant

請問如何把Gridview的所有欄位都固定住並把水平捲軸拿掉，感謝您的解答

# 2010-02-03 08:20 PM by Bryant

您好，我把我的問題詳述一下，我的欄位只有三個，但資料筆數很多，所以只要需要固定標題列即可，但不論我設定fixedcol 0或是把寬和高放大，第三個欄位還是看不到需要把水平捲軸往右拉才行，請問題否能夠讓三個欄位都固定住並把水平捲軸拿掉，感謝您的解答。

# 2010-02-05 07:18 PM by Jeffrey

to 各位網友，關於Super Table，陸續累積了好多網友的提問，不過坦白跟大家說，當初為要動用這個技術解決的工作需求，受限於Javascript在表格欄位超多時的捲動效能表現無法符合User需求，最後還是決定改用Silverlight實作... 因此這部分並未深入嘗試繼續研究了。我仍有興趣解決一些"小幅修改JS就能克服"的問題，但前題必須要請大家提供"可以示範問題所在的實際網頁範例"，才好射茶包。Super Table所使用的技巧蠻Hacking的，若能簡單滿足需求很好，但必須大幅改造才能適用，我倒覺值得評估一下。(純個人意見)

# 2010-03-09 11:02 AM by Senlin

非常感谢楼主

# 2010-03-22 05:36 AM by Lisa

請問一下我用了楼主提供的GridView的標題欄、列凍結效果(跨瀏覽器版)的代碼，出現了一些問題，想請教一下，我的GRIDVIEW中有輸入的TextBox，再TextBox1中輸入值后，要帶對應值到TextBox2中，調用了jQuery包后，不能實現JS給GridView中的TextBox賦值，請問題一下，要如何解決，謝謝。

# 2010-04-02 03:47 PM by 路人甲

To Jeffrey 因為有時GridView資料列數的總長度小於上面設定的supertable, 這時捲軸與GridView會分開，請問如何解決"捲軸與GridView分開"的問題~

# 2010-04-30 03:44 AM by Boby仔

SuperTables加入MasterPage就不行.这个问题好像没有贴出结果哦，麻烦大大救救命！

# 2010-05-05 11:05 AM by Ming

當我沒有凍結欄位時，在各欄位排序相關數值時正常，但是當我凍結第一欄位時，各欄位排序數值時卻只有第一欄位的數值會改變，沒有被凍結的欄位數值都沒有被更新，請問凍結欄位時，應該要如何才可使所有欄位都能被更新？排序方法參考： http://blog.roodo.com/rocksaying/archives/2854997.html mail:papa.ming@msa.hinet.net

# 2010-05-07 02:44 AM by Ming

問題解決了，我採用另一種方法 - Sigma Grid ，請參閱： http://www.sigmawidgets.com/products/sigma_grid2/demos/

# 2010-05-07 05:13 PM by Jeffrey

to Ming, Sigma Grid看起來也是可行的解決方案，謝謝你的分享!

# 2010-05-10 05:37 AM by eric

黑暗大大想要跟您討教一下，我有兩台SERVER IE分別為7&8，在IE7上實作您的程式是OK的，相同的程式放到IE8似乎就沒有這個凍結的效果了，而且整個格式都會跑掉，就變成原本的GRIDVIEW，我不確定是不是因為IE版本的問題還是有其他的東西需要做特別的設定，希望能給予建議，有任何麻煩之處還請見諒。

# 2010-05-12 01:06 AM by Jeffrey

to eric，即便再小心，JS與CSS的東西在跨瀏覽器時還是很容易出問題，而且多半要鑽進去查才能知道問題。你看是否能提供可重演錯誤的範例，大家或許可以幫你看看。

# 2010-05-18 11:12 PM by Robert

To Jeffrey, 按Ctrl+F 搜尋之後，bar的位置會錯亂，請問這個有解法嗎? 感謝

# 2010-06-09 03:14 PM by GN

to Dannie && Danie, 如果GridView包在UpdatePanel裡的狀況，在動態更新GridView內容後會發生JS失效，根據 Danie大大的作法是，在DataBind();後重新呼叫JS，可是我使用的是SqlDataSource難道也要DataBind();??? 再來就是我要把JS嵌入到GridView裡面變成新的GridView，這樣要在哪裡重新呼叫才能使GridView隨時保有JS的功能，in OnLoad?OnPreRender?

# 2010-06-15 05:35 AM by King

請教一下，我直接使用supertables，但使用後，supertables的高度不論我設多大，大約都只會卡在高度=200左右，設200以下則會依設定值。同樣的東西，將gredview改為table就可以正常設定高度。下面是我的gridview設定值 <asp:GridView ID="GridView2" runat="server" DataKeyNames="IDX" Style="font-size: 9pt"

# 2010-06-15 05:35 AM by King

# 2010-06-22 04:54 AM by LK_MJ

請問各位, 將原本的GridView套用黑大的js後效果令人滿意,唯一就是如果用了 .hidden { display: none; } 去隱藏GridView中的欄位,就會發生表格顯示錯亂的情況, 有沒有高手有解呢? 煩請不吝指導, 謝謝.

# 2010-07-01 01:18 AM by 楊彬

Good.Thank you very much~ 簡單、方便、強大！

# 2010-07-01 01:51 AM by 楊彬

但有一個問題，就是這個當我想加一些模板列，如checkbox，textbox等，想做一些編輯動作，我發現我的Gridview中的textbox居然抓重複的值。。。

# 2010-07-14 08:00 AM by Peggy

SuperTables加入MasterPage就不行~~我也是呀~~~誰可以幫幫忙??

# 2010-07-24 11:15 PM by 羲

楼主其实很冤，他也没用了。这个js的更新肯定是个问题，或者如果你去做更新，最好不用；仅是浏览倒是个好东西

# 2010-08-17 10:12 PM by 溫

呵呵，這個效果很喜歡啊

# 2010-10-11 03:08 AM by edward

請教下，我要顯示的數據比較大，我使用superTable，瀏覽器死了，想問下大大，能不能賜教一個解決方案，謝謝！郵箱：zzcheng646@gmail.com 不勝感激！

# 2010-10-11 08:21 PM by Jeffrey

to edward, 使用HTML+JS的方式在顯示大量數據時，的確常會超過瀏覽器能負荷的極限。我自己也面臨過類似的狀況，最後是寫了Silverlight程式用DataGrid處理。

# 2010-10-27 03:09 AM by chuck

暗大您好: 我之前在msdn上發問了一個問題，連結如下: http://social.msdn.microsoft.com/Forums/zh-TW/236/thread/1595cb9a-0a17-41f2-ad24-c41e95b58ef9 我是用.NET3.5版本開發的，瀏灠器為IE7，程式的目的是透過ASP.NET的控制項DataGrid顯示多筆資料，顯示資料的樣貌有純文字和輸入文字方塊和下拉式選單等等…。問題在於我用了下面這一行敘述: $(".DetailFlexGrid").toSuperTable({ width: "700px", height: "400px", fixedCols: 1 }); 在頁面發生PostBack的事件後，我發現只要是文字方塊的內容會在舊新值之間附加一個逗號後，再一併顯示在文字方塊裡面。例如原本是0001，輸入0002，PostBack後就會顯示0001,0002 ;若如果原本是空白，PostBack後就會只顯示, ;每PostBack一次，就會再附加一次。規則如下:(中括號內容為文字方塊的內容) 原本:[0001] 清除[0001]輸入[0002] 第一次PostBack後:[0001,0002] 清除[0001,0002]輸入[0003] 第二次PostBack後:[0001,0002,0003] 似乎會有「舊值和新值用逗號隔開後一併顯示在文字方塊」上的規則。但我把那行敘述拿掉後，此情況就不會發生了。想問暗大是什麼原因造成這個問題?

# 2010-10-28 06:40 PM by Jeffrey

to chuck, 我猜我大概知道是什麼原因造成的，也想到應該有解法，但先賣個關子，這幾天我會找時間(最近時間對我來說是稀有元素)驗證測試過，再PO文說明。

# 2010-10-29 03:08 AM by chuck

好的，有勞暗大費心解決小弟遇到的問題了，謝謝。

# 2010-11-13 01:44 AM by Hugo

我有用MasterPage，一切正常,唯一的问题，是我的Menubar弹出菜单被Gridview遮挡住了，不知道这有没有解？给个思路，谢谢！

# 2010-11-13 04:32 AM by Hugo

问题解决了，必须设置Menu li 的Css z-index 比gridview的值大

# 2011-09-11 11:12 PM by Mary

我要加gridview paging, 可是gridview 页数没有出来。

# 2012-02-08 01:20 AM by vicky

請問固定標題欄寬度且讓它顯示文字可以自動換行我該怎麼在css裡面改呢?

# 2012-02-08 01:20 AM by vicky

請問固定標題欄寬度且讓它顯示文字可以自動換行我該怎麼在css裡面改呢?

# 2013-01-20 09:06 PM by Alex

請問要凍結更多欄位該修改哪邊

# 2013-01-24 12:35 AM by Likol Lee

To Jeffrey, 我也寫了一個類似的plun-in,需要的話再提供給您測試.

# 2015-01-29 01:45 AM by Neil

請問如果想要自訂上方固定的範圍，比如說希望從表頭加上Data的第一行也固定該調整哪邊呢？

# 2015-01-31 08:00 AM by Jeffrey

to Neil，前端元件的起落更迭很快，這個元件我已很久沒用了。這幾年我使用較多的是Kendo UI的KendoGrid及Angular ui-grid，供你參考。

# 2016-03-14 12:27 AM by kingice

当浏览器窗口改变大小后，如何让supertable跟着窗口大小改变而改变？谢谢，kingice595156772@163.com

# 2016-03-14 06:23 AM by Jeffrey

to kingice, 這需要自己攔截window resize事件，依視窗大小重新設定SuperTable，不過我後來都改用Kendo UI的Grid，手邊沒有可用範例。

Comments

# 2009-02-17 12:19 PM by leo

# 2009-02-17 07:21 PM by Jeffrey

# 2009-02-17 08:34 PM by Owen

# 2009-02-19 03:32 AM by sdtest

# 2009-02-19 05:18 PM by Jeffrey

# 2009-04-16 04:16 AM by Kevin

# 2009-05-09 07:27 AM by Shawn

# 2009-05-10 10:36 PM by Jeffrey

# 2009-05-18 03:43 AM by Danie

# 2009-05-18 05:45 AM by Danie

# 2009-05-18 06:22 PM by Jeffrey

# 2009-05-19 01:33 AM by Danie

# 2009-05-20 10:00 PM by JIS

# 2009-05-26 10:07 PM by Sean

# 2009-06-08 06:15 AM by Maxi

# 2009-06-08 05:39 PM by Jeffrey

# 2009-06-08 11:02 PM by Maxi

# 2009-06-08 11:39 PM by Maxi

# 2009-06-09 12:01 AM by Maxi

# 2009-06-09 03:25 AM by Maxi

# 2009-07-23 11:09 PM by lingtw

# 2009-09-07 03:07 AM by Tim

# 2009-09-28 09:41 PM by vien

# 2009-10-08 04:33 AM by Vicky

# 2009-11-24 07:20 PM by gym

# 2009-11-25 01:53 AM by Richard

# 2009-12-04 09:57 AM by ad

# 2009-12-16 05:53 AM by Maxi

# 2010-01-08 05:40 AM by 煉金術士

# 2010-01-21 10:36 PM by Maxi

# 2010-01-28 03:16 AM by Maxi

# 2010-01-28 04:09 AM by Jeffrey

# 2010-02-03 03:47 AM by Bryant

# 2010-02-03 08:20 PM by Bryant

# 2010-02-05 07:18 PM by Jeffrey

# 2010-03-09 11:02 AM by Senlin

# 2010-03-22 05:36 AM by Lisa

# 2010-04-02 03:47 PM by 路人甲

# 2010-04-30 03:44 AM by Boby仔

# 2010-05-05 11:05 AM by Ming

# 2010-05-07 02:44 AM by Ming

# 2010-05-07 05:13 PM by Jeffrey

# 2010-05-10 05:37 AM by eric

# 2010-05-12 01:06 AM by Jeffrey

# 2010-05-18 11:12 PM by Robert

# 2010-06-09 03:14 PM by GN

# 2010-06-15 05:35 AM by King

# 2010-06-15 05:35 AM by King

# 2010-06-22 04:54 AM by LK_MJ

# 2010-07-01 01:18 AM by 楊彬

# 2010-07-01 01:51 AM by 楊彬

# 2010-07-14 08:00 AM by Peggy

# 2010-07-24 11:15 PM by 羲

# 2010-08-17 10:12 PM by 溫

# 2010-10-11 03:08 AM by edward

# 2010-10-11 08:21 PM by Jeffrey

# 2010-10-27 03:09 AM by chuck

# 2010-10-28 06:40 PM by Jeffrey

# 2010-10-29 03:08 AM by chuck

# 2010-11-13 01:44 AM by Hugo

# 2010-11-13 04:32 AM by Hugo

# 2011-09-11 11:12 PM by Mary

# 2012-02-08 01:20 AM by vicky

# 2012-02-08 01:20 AM by vicky

# 2013-01-20 09:06 PM by Alex

# 2013-01-24 12:35 AM by Likol Lee

# 2015-01-29 01:45 AM by Neil

# 2015-01-31 08:00 AM by Jeffrey

# 2016-03-14 12:27 AM by kingice

# 2016-03-14 06:23 AM by Jeffrey

Post a comment