📄 如何在datagrid里面产生滚动条.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0033)http://www.hyd8.com/info/7597.htm -->
<HTML><HEAD><TITLE>河源软件园 - 资讯中心 - Web开发文档 - ASP.NET - 如何在DataGrid里面产生滚动条 - [www.hyd8.com]</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content=如何在DataGrid里面产生滚动条 name=keywords>
<META content=如何在DataGrid里面产生滚动条的内容页 name=description><LINK
href="如何在DataGrid里面产生滚动条.files/css.css" type=text/css rel=stylesheet>
<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<BODY text=#000000 bgColor=#ffffff leftMargin=0 topMargin=0>
<SCRIPT language=javascript src="如何在DataGrid里面产生滚动条.files/in_top2.js"></SCRIPT>
<TABLE height=4 cellSpacing=0 cellPadding=0 width=750 bgColor=#999999
border=0><TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<DIV align=center>
<CENTER></CENTER></DIV>
<DIV align=center>
<CENTER>
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0
cellPadding=0 width=750 border=0>
<TBODY>
<TR>
<TD vAlign=top width=180>
<TABLE style="BORDER-COLLAPSE: collapse" height="100%" cellSpacing=0
cellPadding=0 width=165 bgColor=#f4f4f4 border=0>
<TBODY>
<TR>
<TD vAlign=top width="100%">
<TABLE cellSpacing=0 cellPadding=0 width=178 align=center
border=0><TBODY>
<TR>
<TD><IMG height=37 alt=""
src="如何在DataGrid里面产生滚动条.files/left_news.gif" width=178
border=0></TD></TR>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=178 border=0>
<TBODY>
<TR>
<TD width=8
background=如何在DataGrid里面产生滚动条.files/left_r2_c1.gif></TD>
<TD vAlign=top bgColor=#f6f6f6>
<TABLE cellSpacing=0 cellPadding=0 width=154
bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD><IMG height=40
src="如何在DataGrid里面产生滚动条.files/menu4.gif"
width=154></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=154
bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD><A
href="http://www.hyd8.com/info/39_1.htm"><IMG
height=25 src="如何在DataGrid里面产生滚动条.files/news1.gif"
width=150 border=0></A></TD></TR>
<TR>
<TD><A
href="http://www.hyd8.com/info/50_1.htm"><IMG
height=25 src="如何在DataGrid里面产生滚动条.files/news2.gif"
width=150 border=0></A></TD></TR>
<TR>
<TD><A
href="http://www.hyd8.com/info/55_1.htm"><IMG
height=25 src="如何在DataGrid里面产生滚动条.files/news3.gif"
width=150 border=0></A></TD></TR>
<TR>
<TD><A
href="http://www.hyd8.com/info/62_1.htm"><IMG
height=25 src="如何在DataGrid里面产生滚动条.files/news4.gif"
width=150 border=0></A></TD></TR>
<TR>
<TD><A
href="http://www.hyd8.com/info/67_1.htm"><IMG
height=25 src="如何在DataGrid里面产生滚动条.files/news5.gif"
width=150 border=0></A></TD></TR>
<TR>
<TD><A
href="http://www.hyd8.com/info/72_1.htm"><IMG
height=25 src="如何在DataGrid里面产生滚动条.files/news6.gif"
width=150 border=0></A></TD></TR>
<TR>
<TD><A
href="http://www.hyd8.com/info/77_1.htm"><IMG
height=25 src="如何在DataGrid里面产生滚动条.files/news7.gif"
width=150 border=0></A></TD></TR>
<TR>
<TD><A
href="http://www.hyd8.com/info/85_1.htm"><IMG
height=25
src="如何在DataGrid里面产生滚动条.files/news10.gif"
width=150 border=0></A></TD></TR>
<TR>
<TD><A
href="http://www.hyd8.com/info/101_1.htm"><IMG
height=25
src="如何在DataGrid里面产生滚动条.files/news11.gif"
width=150 border=0></A></TD></TR>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD vAlign=top width=16
background=如何在DataGrid里面产生滚动条.files/left_r6_c3.gif><IMG
height=130 alt=""
src="如何在DataGrid里面产生滚动条.files/left_r2_c3.gif" width=16
border=0></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD bgColor=#e6e6e6><IMG height=17 alt=""
src="如何在DataGrid里面产生滚动条.files/left_r7_c1.gif" width=178
border=0></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
<TD vAlign=top width=577 height=2>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD background=如何在DataGrid里面产生滚动条.files/diandian.gif></TD></TR>
<TR>
<TD background=如何在DataGrid里面产生滚动条.files/dot_line_bg.gif height=21>
<DIV align=left><SPAN class=style1><IMG height=5
src="如何在DataGrid里面产生滚动条.files/spacer.gif" width=15><A
href="http://www.hyd8.com/index.htm">河软 </A><IMG height=10
src="如何在DataGrid里面产生滚动条.files/to.gif" width=7> <A
href="http://www.hyd8.com/info/index.htm">资讯中心</A></SPAN>-> <A
href="http://www.hyd8.com/info/85_1.htm">Web开发文档</A>-> <A
href="http://www.hyd8.com/info/91_1.htm">ASP.NET</A><SPAN
class=style1> <IMG height=10 src="如何在DataGrid里面产生滚动条.files/to.gif"
width=7></SPAN> 如何在DataGrid里面产生滚动条<BR></DIV></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=559 align=center border=0>
<TBODY>
<TR>
<TD background=如何在DataGrid里面产生滚动条.files/teach_head.gif
height=14></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=559 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=559 border=0>
<TBODY>
<TR>
<TD width=10
background=如何在DataGrid里面产生滚动条.files/teach_left.gif></TD>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=515 align=center
border=0>
<TBODY>
<TR>
<TD width=30
background=如何在DataGrid里面产生滚动条.files/xianxian.gif
height=20><IMG height=20
src="如何在DataGrid里面产生滚动条.files/teach_topic.gif"
width=30></TD>
<TD background=如何在DataGrid里面产生滚动条.files/xianxian.gif>
<DIV align=left><FONT
color=#0d00aa><B>如何在DataGrid里面产生滚动条</B></FONT>
</DIV></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=515 align=center
border=0>
<TBODY>
<TR>
<TD height=4></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=515 align=center
border=0>
<TBODY>
<TR>
<TD bgColor=#bbbbbb height=2></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=515 align=center
border=0>
<TBODY>
<TR>
<TD align=middle height=25><SPAN class=style1>作者：未知 |
来源：未知 | 时间： 2004-11-15 |
浏览次数：18</SPAN></TD></TR></TBODY></TABLE></TD>
<TD width=9
background=如何在DataGrid里面产生滚动条.files/teach_right.gif></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD background=如何在DataGrid里面产生滚动条.files/teach_r4_c2.gif
height=13></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=545 align=center border=0>
<TBODY>
<TR>
<TD class=content
id=txts>我们在开发的时候一定遇到使用DataGrid的时候由于不想分页（数据没有那么多）但是又显示不在一页里面，此时我们希望在DataGrid里面出现一个滚动条，可以上下滚动DataGrid里面的数据而不用上下滚动页面，由于写本文的目的是为了说明如何实现，所以对于细节性的问题读者可以自己思考完成（比如：既要分页又要滚动等等）。为了可以滚动DataGrid我们需要一个可以让客户端的Table滚动js脚本（该js代码我是从CodeProject上面下载的），但又不能滚动Table的题头（也就是第一行）。我们都知道DataGrid在解释到客户端以后将会生成一个Table，但是这个Table是由
<TR>
<TD>组成的，我们的脚本里面是需要使用到Table的Thead和Tbody的（在大多数的客户端的应用中都要用到此功能比如：客户端的排序、以及列的托拽等等），因此我们接下来的任务就是如何为我们客户端的这个DataGrid添加</TR>
<THEAD>
<TBODY>了。如果你对用户的自定义控件以及ASP.NET页面的原理有所了解，我们知道控件最后都是要呈现(Render)在页面上的，因此我们可以重写这个方法来完成DataGrid的自定义呈现。听一听真的有些吓人，那么复杂的控件怎么呈现？不要着急，首先我们创建一个自定义控件如下所示：public
class PowerDataGrid :
System.Web.UI.WebControls.DataGrid<BR> 由此可以看出我们的控件是继承于DataGrid的，所以我们现在的这个控件在不用写一行代码的情况下我们的这个控件已经具有DataGrid的所有的功能。接下来我们要将我们准备的js代码内嵌到我们的控件里，好让放这个控件的页面上最终在客户端都会有这段js代码用来完成我们滚动的任务。为了完成这个工作我们要重写预呈现的方法：<BR>protected
override void OnPreRender(System.EventArgs
e)<BR>{<BR> base.OnPreRender(e); <BR> ResourceManager
manager = new ResourceManager( this.GetType()
);<BR> ResourceSet resources =
manager.GetResourceSet(System.Globalization.CultureInfo.CurrentCulture,
true, true);<BR> if(
!Page.IsClientScriptBlockRegistered( "SkySword.WebControl.PowerDataGrid
Library" ) ) {<BR> String
script =
resources.GetString("ScrollTable");<BR> this.Page.RegisterClientScriptBlock("SkySword.WebControl.PowerDataGrid
Library", script
);<BR> this.Page.RegisterStartupScript("SkySword.WebControls.PowerDataGrid
Init", "
<SCRIPT>makeScrollableTable'" + this.ID + "',true,'auto');</SCRIPT>
"
);<BR> }<BR>}<BR> 在该方法中我们访问了资源文件。哦！忘了说我们还要建立一个资源文件，用来保存我们的js代码。我们首先将资源代码中对应ScrollTable的数据（一段js脚本）注册到客户端的脚本块里。最后我们为了可以初始化，将
<SCRIPT>makeScrollableTable('" + this.ID + "',true,'auto');</SCRIPT>
段脚本注册到页面加载时开始执行（我想就应该和body里面onload的方法一样吧）。当你需要加载客户端脚本的时候使用该方法是个不错的选择。好了，客户端脚本也有了，剩下的就是处理我们的客户端DataGrid了（也就是DataGrid呈现的客户端Table）。为了可以呈现我们自己的DataGrid我们需要重写呈现方法如下所示：<BR>protected
override void Render(HtmlTextWriter
output)<BR>{<BR> output.Write(this.parseMarkup());<BR>}<BR> 其中调用了一个parseMarkup的函数，改函数将产生一个输出的脚本（字符串），该脚本就是一个包含thead和tbody的Table。由于此方法只是由该控件自己使用所以我们将它设置成私有的代码如下：<BR>private
string parseMarkup(){<BR> //
插入THead标签和TBody标签<BR> StringWriter writer = new
StringWriter();<BR> HtmlTextWriter buffer = new
HtmlTextWriter(writer);<BR> base.Render(buffer);<BR> string
pMarkup = writer.ToString();<BR><BR> //
找到第一个table标签的结尾也就是第一个>字符<BR> pMarkup =
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -