創(chuàng)建自滾動的DataGrid
2024-07-21 02:30:02
供稿：網(wǎng)友
在使用datagrid時，如果頁面很長，可能需要用戶自己來拉動滾動條，下面的例子實現(xiàn)了自動滾動的功能。其基本原理就是利用了linkbutton的錨點的功能，如果使用pushbutton，那還必須自己添加錨點。另外必須弄明白的是page的postback時的客戶端腳本：
<script language="<a target="_blank">javascript</a>">
<!--
function __dopostback(eventtarget, eventargument) {
var theform = document.form1;
theform.__eventtarget.value = eventtarget;
theform.__eventargument.value = eventargument;
theform.submit();
}
// -->
</script>
這段腳本中__dopostback函數(shù)有兩個參數(shù)：第一個eventtarget是觸發(fā)postback的控件的uniqueid；第二參數(shù)eventargument是一個對象，包含postback的額外信息。因此我們使用uniqueid來作為錨點的值。
源代碼如下：
查看例子
datagridautoscroll.aspx
<%@ page language="<a target="_blank">vb</a>" autoeventwireup="false" codebehind="datagridautoscroll.aspx.vb"
inherits="aspx<a 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 target="_blank">.net</a> 7.0">
<meta name="code_language" content="visual basic 7.0">
<meta name="vs_defaultclientscript" content="<a 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開發(fā)者園地"
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
'創(chuàng)建 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)))
'示例數(shù)據(jù)
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
