创建自滚动的DataGrid
2024-07-21 02:30:02
供稿：网友
在使用datagrid时，如果页面很长，可能需要用户自己来拉动滚动条，下面的例子实现了自动滚动的功能。其基本原理就是利用了linkbutton的锚点的功能，如果使用pushbutton，那还必须自己添加锚点。另外必须弄明白的是page的postback时的客户端脚本：
<script language="<a href="http://dev.21tx.com/web/javascript/" target="_blank">javascript</a>">
<!--
function __dopostback(eventtarget, eventargument) {
var theform = document.form1;
theform.__eventtarget.value = eventtarget;
theform.__eventargument.value = eventargument;
theform.submit();
}
// -->
</script>
这段脚本中__dopostback函数有两个参数：第一个eventtarget是触发postback的控件的uniqueid；第二参数eventargument是一个对象，包含postback的额外信息。因此我们使用uniqueid来作为锚点的值。
源代码如下：
查看例子
datagridautoscroll.aspx
<%@ page language="<a href="http://dev.21tx.com/language/vb/" target="_blank">vb</a>" autoeventwireup="false" codebehind="datagridautoscroll.aspx.vb"
inherits="aspx<a href="http://dev.21tx.com/web/" target="_blank">web</a>.datagridautoscroll"%>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title runat="server" id="mengxianhui"></title>
<meta name="generator" content="microsoft visual studio<a href="http://dev.21tx.com/dotnet/" target="_blank">.net</a> 7.0">
<meta name="code_language" content="visual basic 7.0">
<meta name="vs_defaultclientscript" content="<a href="http://dev.21tx.com/java/" target="_blank">java</a>script">
<meta name="vs_targetschema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body>
<form id="form1" method="post" runat="server">
<asp:datagrid id="datagrid1" runat="server" bordercolor="#cc9966" borderstyle="none"
borderwidth="1px" backcolor="white" cellpadding="4">
<selecteditemstyle font-bold="true" forecolor="#663399" backcolor="#ffcc66"></selecteditemstyle>
<itemstyle forecolor="#330099" backcolor="white"></itemstyle>
<headerstyle font-bold="true" forecolor="#ffffcc" backcolor="#990000"></headerstyle>
<footerstyle forecolor="#330099" backcolor="#ffffcc"></footerstyle>
<columns>
<asp:editcommandcolumn buttontype="linkbutton" updatetext="update"
canceltext="cancel" edittext="edit"></asp:editcommandcolumn>
</columns>
<pagerstyle horizontalalign="center" forecolor="#330099" backcolor="#ffffcc"></pagerstyle>
</asp:datagrid>
</form>
</body>
</html>
代码：datagridautoscroll.aspx.vb
imports system
imports system.web
imports system.web.ui.webcontrols
imports system.collections
imports system.data
imports system.data.sqlclient
public class datagridautoscroll
inherits system.web.ui.page
protected withevents datagrid1 as system.web.ui.webcontrols.datagrid
protected mengxianhui as new htmlgenericcontrol()
#region " web form designer generated code "
<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
initializecomponent()
end sub
#end region
private sub page_load(byval sender as system.object, byval e as system.eventargs) handles mybase.load
mengxianhui.innertext = "【孟宪会之精彩世界】之.net开发者园地"
if not page.ispostback then
datagrid1.datasource = createdatasource()
datagrid1.databind()
else
dim startupscript as string
startupscript = "<script language=javascript>location.href='#" _
& request.form("__eventtarget") & "';</script>"
me.registerstartupscript(me.uniqueid & "startup", startupscript)
end if
end sub
function createdatasource() as icollection
dim dt as datatable
dim dr as datarow
dim i as integer
'创建 datatable
dt = new datatable()
dt.columns.add(new datacolumn("字符型值", gettype(string)))
dt.columns.add(new datacolumn("布尔型值", gettype(boolean)))
dt.columns.add(new datacolumn("货币型值", gettype(double)))
'示例数据
for i = 1 to 150
dr = dt.newrow()
dr(0) = "item " + i.tostring()
if (i mod 2 <> 0) then
dr(1) = true
else
dr(1) = false
end if
dr(2) = 1.23 * (i + 1)
'向datatable添加 row
dt.rows.add(dr)
next
'返回datatable的dataview
createdatasource = new dataview(dt)
end function
private sub datagrid1_itemdatabound(byval sender as object, _
byval e as system.web.ui.webcontrols.datagriditemeventargs) handles datagrid1.itemdatabound
select case e.item.itemtype
case listitemtype.item, listitemtype.alternatingitem
dim editbutton as linkbutton = new linkbutton()
editbutton = ctype(e.item.cells(0).controls(0), linkbutton)
editbutton.attributes.add("name", "#" & editbutton.uniqueid)
case listitemtype.edititem
dim updatebutton as linkbutton = new linkbutton()
updatebutton = ctype(e.item.cells(0).controls(0), linkbutton)
updatebutton.attributes.add("name", "#" & updatebutton.uniqueid)
end select
end sub
private sub datagrid1_editcommand(byval source as object, _
byval e as system.web.ui.webcontrols.datagridcommandeventargs) handles datagrid1.editcommand
datagrid1.edititemindex = e.item.itemindex
datagrid1.datasource = createdatasource()
datagrid1.databind()
end sub
private sub datagrid1_cancelcommand(byval source as object, _
byval e as system.web.ui.webcontrols.datagridcommandeventargs) handles datagrid1.cancelcommand
datagrid1.edititemindex = -1
datagrid1.datasource = createdatasource()
datagrid1.databind()
end sub
private sub datagrid1_updatecommand(byval source as object, _
byval e as system.web.ui.webcontrols.datagridcommandeventargs) handles datagrid1.updatecommand
datagrid1.edititemindex = -1
datagrid1.datasource = createdatasource()
datagrid1.databind()
end sub
end class
