快捷導(dǎo)航

js實現(xiàn)的GridView即表頭固定表體有滾動條且可滾動

更新時間：2014年02月19日 11:37:08 作者：

實現(xiàn)GridView，表頭固定，表體有滾動條且可滾動，下面有個不錯的示例，希望對大家有所幫助

 
<%@ Page Language="C#" AutoEventWireup="true" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<script runat="server"> 
// 計算數(shù)據(jù)，完全可以從數(shù)據(jù)看取得 
ICollection CreateDataSource( ) 
{ 
System.Data.DataTable dt = new System.Data.DataTable(); 
System.Data.DataRow dr; 
dt.Columns.Add(new System.Data.DataColumn("學(xué)生班級", typeof(System.String))); 
dt.Columns.Add(new System.Data.DataColumn("學(xué)生姓名", typeof(System.String))); 
dt.Columns.Add(new System.Data.DataColumn("語文", typeof(System.Decimal))); 
dt.Columns.Add(new System.Data.DataColumn("數(shù)學(xué)", typeof(System.Decimal))); 
dt.Columns.Add(new System.Data.DataColumn("英語", typeof(System.Decimal))); 
dt.Columns.Add(new System.Data.DataColumn("計算機(jī)", typeof(System.Decimal))); 

for (int i = 0; i < 50; i++) 
{ 
System.Random rd = new System.Random(Environment.TickCount * i); ; 
dr = dt.NewRow(); 
dr[0] = "班級" + i.ToString(); 
dr[1] = "測試" + i.ToString(); 
dr[2] = System.Math.Round(rd.NextDouble() * 100, 2); 
dr[3] = System.Math.Round(rd.NextDouble() * 100, 2); 
dr[4] = System.Math.Round(rd.NextDouble() * 100, 2); 
dr[5] = System.Math.Round(rd.NextDouble() * 100, 2); 
dt.Rows.Add(dr); 
} 
System.Data.DataView dv = new System.Data.DataView(dt); 
return dv; 
} 

protected void Page_Load( object sender, EventArgs e ) 
{ 
if (!IsPostBack) 
{ 
GridView1.Attributes.Add("style", "table-layout:fixed"); 
GridView1.DataSource = CreateDataSource(); 
GridView1.DataBind(); 
} 
} 

</script> 

<script type="text/javascript"> 
function s() { 
var t = document.getElementById("<%=GridView1.ClientID%>"); 
var t2 = t.cloneNode(true) 
for (i = t2.rows.length - 1; i > 0; i--) 
t2.deleteRow(i) 
t.deleteRow(0) 
a.appendChild(t2) 
} 
window.onload = s 
</script> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>創(chuàng)建表頭固定，表體可滾動的GridView</title> 
</head> 
<body> 
<form id="Form1" runat="server"> 
<table> 
<tr> 
<td> 
<div id="a"> 
</div> 
<div style="overflow-y: scroll; height: 200px"> 
<asp:GridView ID="GridView1" runat="server" Font-Size="12px" BackColor="#FFFFFF" 
GridLines="Both" CellPadding="4" Width="560"> 
<HeaderStyle BackColor="#EDEDED" Height="26px" /> 
</asp:GridView> 
</div> 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

基于electron的音視頻播放器
本文主要介紹了基于electron的音視頻播放器，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02
JS構(gòu)造函數(shù)與原型prototype的區(qū)別介紹
下面小編就為大家?guī)硪黄狫S構(gòu)造函數(shù)與原型prototype的區(qū)別介紹。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
在微信小程序中渲染HTML內(nèi)容的方法示例
這篇文章主要介紹了在微信小程序中渲染HTML內(nèi)容的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
深入淺析JS Function()構(gòu)造函數(shù)
這篇文章給大家介紹了js function()構(gòu)造函數(shù)的知識以及關(guān)于function()構(gòu)造函數(shù)需要注意的幾個要點，本文介紹的非常不錯，具有參考借鑒價值，感興趣的朋友一起看下吧
2016-08-08
微信小程序?qū)崿F(xiàn)分享到朋友圈功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)分享到朋友圈功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-07-07
javascript發(fā)送短信驗證碼實現(xiàn)代碼
我們在注冊賬號，或者是參加活動時，都會向手機(jī)發(fā)送收短信驗證碼，短信驗證碼到底是如何實現(xiàn)的，本文為大家揭曉，并為大家分項1javascript發(fā)送短信驗證碼實現(xiàn)代碼，感興趣的小伙伴們可以參考一下
2015-11-11
Echarts地圖實例詳解(地圖樣式、合并地圖、增加地圖)
ECharts是一個使用JavaScript實現(xiàn)的開源可視化庫,涵蓋各行業(yè)圖表,滿足各種需求,下面這篇文章主要給大家介紹了關(guān)于Echarts地圖的相關(guān)資料,包括地圖樣式、合并地圖、增加地圖,需要的朋友可以參考下
2022-06-06
JavaScript手寫一個前端存儲工具庫
在項目開發(fā)的過程中，為了減少提高性能，減少請求，開發(fā)者往往需要將一些不易改變的數(shù)據(jù)放入本地緩存中。本文就來用JavaScript手寫一個前端存儲工具庫，希望對大家有所幫助
2023-02-02
js 動態(tài)文字滾動的例子
在文本框中動態(tài)滾動文字的例子,需要的朋友可以參考下。
2011-01-01
Axios?get?post請求傳遞參數(shù)的實現(xiàn)代碼
axios是基于promise用于瀏覽器和node.js的http客戶端，支持瀏覽器和node.js，能攔截請求和響應(yīng)，這篇文章主要介紹了axios?get?post請求傳遞參數(shù)的操作代碼,需要的朋友可以參考下
2022-11-11