使用者接口的可视化_动网_社区论坛·开发者网络源动力

上述范例利用点选使用者姓名的方式，来呈现该使用者所购买过的东西，这样的使用者接口还不够美观及直觉。接下来我们利用图示以来表示被点选到的字段为何，并将被点选到的字段以蓝底白字显示，如下图所示：

<%@import namespace=system.data%>
<%@import namespace=system.data.ado%>
<html>
<form runat="server">
<asp:datagrid id="dga" allowpaging="true" pagesize="5"
onpageindexchanged="dga_pagechg" runat="server"
pagerstyle-mode="numericpages" bordercolor="#808080"
headerstyle-font-names="courier new"
headerstyle-backcolor="#d1dceb"
headerstyle-font-bold="true"
headerstyle-horizontalalign="center"
autogeneratecolumns="false"
onitemcommand="dga_icmd"
alternatingitemstyle-backcolor="#ffff99">
<property name="pagerstyle">
<asp:datagridpagerstyle
horizontalalign="center" backcolor="gainsboro"
pagebuttoncount="4" mode="numericpages"/></property>
<property name="alternatingitemstyle">
<asp:tableitemstyle forecolor="black"
backcolor="gainsboro"/></property>
<property name="selecteditemstyle">
<asp:tableitemstyle forecolor="white" backcolor="blue"
font-bold="true"/></property>
<property name="itemstyle">
<asp:tableitemstyle forecolor="#000040"/></property>
<property name="headerstyle">
<asp:tableitemstyle font-names="courier new" font-bold="true"
horizontalalign="center"
backcolor="#d1dceb"/></property>
<property name="columns">
<asp:buttoncolumn text="<img border=0 src=select.gif>" headertext="选
择"
itemstyle-horizontalalign="center"/>
<asp:boundcolumn datafield="username" headertext="姓名"/>
<asp:boundcolumn datafield="usertel" headertext="电话"/>
<asp:boundcolumn datafield="useradd" headertext="住址"/>
<asp:boundcolumn datafield="useremail" headertext="电邮"/>
</property>
</asp:datagrid><p>
<asp:datagrid id="dgb" runat="server"
pagerstyle-mode="numericpages" bordercolor="#808080"
headerstyle-font-names="courier new"
headerstyle-backcolor="#d1dceb"
headerstyle-font-bold="true"
headerstyle-horizontalalign="center"
autogeneratecolumns="false" backcolor="transparent" >
<property name="pagerstyle">
<asp:datagridpagerstyle mode="numericpages"/>
</property>
<property name="alternatingitemstyle">
<asp:tableitemstyle forecolor="black" backcolor="gainsboro"/>
</property>
<property name="itemstyle">
<asp:tableitemstyle forecolor="#000040" backcolor="white"/>
</property>
<property name="headerstyle">
<asp:tableitemstyle font-names="新细明体" font-bold="true"
horizontalalign="center" backcolor="#d1dceb"/>
</property>
<property name="columns">
<asp:boundcolumn datafield="orderdate" headertext="日期"
dataformatstring="{0:d}"/>
<asp:boundcolumn datafield="productname" headertext="产品名称"/>
<asp:boundcolumn datafield="unitprice" headertext="单价"
dataformatstring="nt${0:n0}"/>
<asp:boundcolumn datafield="quantity" headertext="数量"/>
<asp:boundcolumn datafield="total" headertext="小计"
dataformatstring="nt${0:n0}"/>
</property>
</asp:datagrid>
</form>
<asp:label id="label1" runat="server"/>
<script language="vb" runat="server">
dim dsca as adodatasetcommand=new adodatasetcommand("select * from
members", _
"provider=microsoft.jet.oledb.4.0;data
source=c:\inetpub\wwwroot\cr\ch08\myweb.mdb")
dim dsdataset as dataset=new dataset
sub page_load(sender as object, e as eventargs)
if page.ispostback=false then
dsca.selectcommand.commandtext="select * from members"
dsca.filldataset(dsdataset, "members")
dga.datasource=dsdataset.tables("members").defaultview
dga.databind()
end if
dga.selectedindex=-1
label1.text="您目前没有点选任何记录."
end sub
sub dga_pagechg(sender as object, e as datagridpagechangedeventargs)
dsca.filldataset(dsdataset, "members")
dga.datasource=dsdataset.tables("members").defaultview
dga.databind()
dgb.visible=false
end sub
sub dga_icmd(sender as object, e as datagridcommandeventargs)
dim shtr as short=(dga.currentpageindex * dga.pagesize) +
e.item.itemindex
sub dga_icmd(sender as object, e as datagridcommandeventargs)
if e.item.itemindex>-1 then
dim shtr as short=(dga.currentpageindex * dga.pagesize) +
e.item.itemindex
dga.selectedindex=e.item.itemindex
dim dgia as datagriditem=dga.selecteditem
dim celsel as tablecell = dgia.controls(0)
celsel.text="<img border=0 src=open.gif>"
dsca.filldataset(dsdataset, "members")
dsca.selectcommand.commandtext="select * from orders where
userid='" & _
dsdataset.tables("members").rows(shtr)("userid") & "'"
dsca.filldataset(dsdataset, "orders")
dgb.datasource=dsdataset.tables("orders").defaultview
dgb.databind()
dgb.visible=true
label1.text="总共有" & dsdataset.tables("orders").rows.count & "
笔记录"
else
dga.selectedindex=-1
end if
end sub
</script>
</html>

上述程序代码中，我们定义了selecteditemstyle 属性，并设定其前景色为白色、背景色为蓝色，以及字型为粗体；如下程序代码范例所示：

然后我们增加一个buttoncolumn 字段，并设定其text 属性为「"<img border=0src=select.gif>"」，这样的结果会让字段显示图钉的影像，如下程序代码片段所示：

<property name="columns">
<asp:buttoncolumn text="<img border=0 src=select.gif>" headertext="选
择"
itemstyle-horizontalalign="center"/>
<asp:boundcolumn datafield="username" headertext="姓名"/>
<asp:boundcolumn datafield="usertel" headertext="电话"/>
<asp:boundcolumn datafield="useradd" headertext="住址"/>
<asp:boundcolumn datafield="useremail" headertext="电邮"/>
</property>

接下来就要处理使用者点选图形的动作了。我们设定onitemcommand 属性为dga_icmd，所以当使用者点选图形时便执行下列程序：

sub dga_icmd(sender as object, e as datagridcommandeventargs)
if e.item.itemindex>-1 then
dim shtr as short=(dga.currentpageindex * dga.pagesize) +
e.item.itemindex
dga.selectedindex=e.item.itemindex
dim dgia as datagriditem=dga.selecteditem
dim celsel as tablecell = dgia.controls(0)
celsel.text="<img border=0 src=open.gif>"
dsca.filldataset(dsdataset, "members")
dsca.selectcommand.commandtext="select * from orders where
userid='" & _
dsdataset.tables("members").rows(shtr)("userid") & "'"
dsca.filldataset(dsdataset, "orders")
dgb.datasource=dsdataset.tables("orders").defaultview
dgb.databind()
dgb.visible=true
label1.text="总共有" & dsdataset.tables("orders").rows.count & "
笔记录"
end if
end sub

上述程序代码先判断触发这个事件时，使用者是否有点选一个项目；倘若点选了任何一个项目，就将dga 这个datagrid web 控件的selectedindex 属性设为被点选的项目；接下来的三行程序将图钉改成钉住的影像：

dim dgia as datagriditem=dga.selecteditem
dim celsel as tablecell = dgia.controls(0)
celsel.text="<img border=0 src=open.gif>"

上述程序代码片段第一行宣告一个datagriditem 对象变量dgia，并指向被选到的datagriditem参考；然后取回被点选项目中的第一个控件，也就是显示图钉影像的第一个字段，并将其text属性改成被钉下去的图形「open.gif」。