Source:Http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/02/18/supertable-plugin-for-jquery.aspx
The title column freezing effect of the gridview was published earlier, which is sufficient to meet work requirements. However, there are two disadvantages: only ff and IE6/7 are supported. Columns cannot be frozen (rows )...
I was unwilling to do only half of the work, but I dug it up again. I was pleasantly surprised to find another version: Super tables, which supports Firefox 2 +, Internet Explorer 5.5 +, Safari 3 +, opera 9 +, and chrome, in addition, it also supports the freezing effect of direct columns, which is more powerful than scrollabletable in terms of functionality.
The principle of Supertable is different from that of scrollabletable. It requires additional CSS and an external layer of <div> in table. The visible range is determined by <div> style, and there are many parameters when set (for example: fixedcols, headerrows ...), so I wrote a jquery plugin (jquery. supertable. JS. With the support of plugin, you can immediately upgrade a tosupertable (options) to a frozen gridview.
Typographical display Plain text Copy text//////////////////////////////////////// //////////////////////////////////////// /////////
// 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 ){
VaRSetting = $. 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(){
VaRQ = $ (This);
VaRId = Q. ATTR ("ID");
Q. removeattr ("Style"). Wrap ("<Div id = '"+ ID +"_ Box'> </div>");
VaRNoncssprops = ["Fixedcols","Headerrows","Onstart","Onfinish","Cssskin","Colwidths"];
VaRContainer = $ ("#"+ ID +"_ Box"); For(VaRPInSetting ){
If($. Inarray (p, noncssprops) =-1 ){
Container.css (p, setting [p]);
Delete setting [p];
}
}
VaRMyst =NewSupertable (ID, setting );
});
}
});
}) (Jquery );
The complete demo program is as follows:
Typographical display Plain text Copy text<% @ 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 VoidPage_load (ObjectSender, eventargs E)
{
Datatable T =NewDatatable ();
T. Columns. Add ("No",Typeof(Int));
T. Columns. Add ("Item No",Typeof(String));
T. Columns. Add ("Unit price",Typeof(Decimal));
For(IntI = 1; I <= 10; I ++)
T. Columns. Add ("Inventory"+ I,Typeof(Int));
Random RND =NewRandom ();
For(IntI = 0; I <80; I ++)
{
Datarow ROW = T. newrow ();
Row ["No"] = I + 1;
Row ["Item No"] = Guid. newguid (). tostring (). substring (0, 13). toupper ();
Row ["Unit price"] = RND. nextdouble () * 100;
For(IntJ = 1; j <= 10; j ++)
Row ["Inventory"+ J] = RND. Next (10000 );
T. Rows. Add (ROW );
}
Gridview1.autogeneratecolumns =False;
Foreach(Datacolumn CInT. columns)
{
Boundfield BF =NewBoundfield ();
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: # ddddddff ;}
</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>
I put an Online Demo in http://www.darkthread.net/MiniAjaxLab/ScrollTable, or you can download the schedule package back to play.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
