js实现的GridView即表头固定表体有滚动条且可滚动

前端技术 2023/09/06 JavaScript
复制代码 代码如下:

<%@ 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\">
// 计算数据，完全可以从数据看取得
ICollection CreateDataSource( )
{
System.Data.DataTable dt = new System.Data.DataTable();
System.Data.DataRow dr;
dt.Columns.Add(new System.Data.DataColumn(\"学生班级\", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn(\"学生姓名\", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn(\"语文\", typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn(\"数学\", typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn(\"英语\", typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn(\"计算机\", 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>创建表头固定，表体可滚动的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>

本文地址：https://www.stayed.cn/item/15618

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案