创建固定表头、表格体滚动的DataGrid
2024-07-21 02:23:06
供稿：网友
中国最大的web开发资源网站及技术社区，
在使用datagrid时，有时候需要表头表头固定、表格体的内容可以滚动，下面的代码就是实现这个功能的代码。
showfixedheader.aspx
<%@ page language="vb" enableviewstate="false" autoeventwireup="false" codebehind="showfixedheader.aspx.vb"
inherits="aspxweb.mengxianhui.com.showfixedheader"%>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title id="lucky_elove" runat="server"></title>
<meta name="generator" content="microsoft visual studio.net 7.0">
<meta name="code_language" content="visual basic 7.0">
<meta name="vs_defaultclientscript" content="javascript">
<meta name="vs_targetschema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body ms_positioning="gridlayout" leftmargin="0">
<table align="center">
<tr>
<td>
<form id="form1" method="post" runat="server">
<table id="table1" runat="server" cellspacing="1" cellpadding="2" width="720" border="1"
bgcolor="#cc6633" bordercolor="#cc9966" style="font-size:9pt;border-bottom:0px">
<tr align="center">
<td colspan="2" width="430"></td>
<td width="190" colspan="2"></td>
</tr>
<tr align="center">
<td width="360" bgcolor="#66cc99"></td>
<td width="180" bgcolor="white"></td>
<td width="140" bgcolor="#99cccc"></td>
<td width="40" bgcolor="#009999"></td>
</tr>
</table>
<div style="border:0px;padding:0px;margin:0px;overflow:auto;width:736px;height:200px">
<asp:datagrid id="datagrid1" width="720px" cellpadding="2" cellspacing="1"
bordercolor="#cc9966" font-size="9pt" alternatingitemstyle-backcolor="#6699ff"
runat="server" showheader="false" autogeneratecolumns="false">
<columns>
<asp:boundcolumn datafield="title">
<itemstyle width="360px"></itemstyle>
</asp:boundcolumn>
<asp:boundcolumn datafield="createdate">
<itemstyle width="180px" horizontalalign="center"></itemstyle>
</asp:boundcolumn>
<asp:boundcolumn datafield="pid">
<itemstyle width="140px" horizontalalign="center"></itemstyle>
</asp:boundcolumn>
<asp:boundcolumn datafield="hitcount">
<itemstyle width="40px" horizontalalign="center"></itemstyle>
</asp:boundcolumn>
</columns>
</asp:datagrid>
</div>
</form>
</td>
</tr>
</table>
</body>
</html>
showfixedheader.aspx.vb
imports system
imports system.data
imports system.data.oledb
public class showfixedheader
inherits system.web.ui.page
protected withevents table1 as system.web.ui.htmlcontrols.htmltable
protected withevents datagrid1 as system.web.ui.webcontrols.datagrid
protected withevents form1 as system.web.ui.htmlcontrols.htmlform
protected withevents lucky_elove as htmlcontrols.htmlgenericcontrol
#region " web form designer generated code "
'this call is required by the web form designer.
<system.diagnostics.debuggerstepthrough()> private sub initializecomponent()
end sub
private sub page_init(byval sender as system.object, byval e as system.eventargs) handles mybase.init
'codegen: this method call is required by the web form designer
'do not modify it using the code editor.
initializecomponent()
end sub
#end region
private sub page_load(byval sender as system.object, byval e as system.eventargs) handles mybase.load
lucky_elove.innertext = "【孟宪会之精彩世界】 - 跨栏表头的实现"
table1.rows(0).cells(0).innertext = "【孟宪会之精彩世界】.net版本之最新文章"
table1.rows(0).cells(1).innertext = "文章信息"
table1.rows(1).cells(0).innertext = "文章标题"
table1.rows(1).cells(1).innertext = "发布时间"
table1.rows(1).cells(2).innertext = "所属栏目"
table1.rows(1).cells(3).innertext = "点击率"
table1.rows(0).style.add("color", "white")
table1.rows(0).style.add("font-weight", "bold")
table1.rows(0).cells(0).attributes.add("onclick",_
"window.open('http://lucky_elove.www1.dotnetplayground.com/')")
table1.rows(0).cells(0).style.add("cursor", "hand")
try
dim cnstring as string = "provider=microsoft.jet.oledb.4.0;data source="_
+ server.mappath("test.mdb")
dim cn as new oledbconnection(cnstring)
cn.open()
dim strsql as string = "select top 30 d.title,d.createdate,s.title as pid,d.hitcount "_
+ "from document d inner join subject s on d.pid = s.id order by createdate desc"
dim cmd as new oledbcommand(strsql, cn)
datagrid1.datasource = cmd.executereader
datagrid1.databind()
cn.close()
cn = nothing
catch eole as oledbexception
response.write("产生错误：" + eole.message)
end try
end sub
private sub datagrid1_itemdatabound(byval sender as object, _
byval e as system.web.ui.webcontrols.datagriditemeventargs) handles datagrid1.itemdatabound
if e.item.itemtype = listitemtype.item or e.item.itemtype = listitemtype.alternatingitem then
if e.item.cells(0).text.length > 26 then
e.item.cells(0).attributes.add("title", e.item.cells(0).text)
e.item.cells(0).text = e.item.cells(0).text.substring(0, 26) + "…"
end if
e.item.cells(1).text = format(system.convert.todatetime(e.item.cells(1).text),_
"yyyy年m月d日 h点m分s秒")
end if
end sub
end class
