当前页面位置: » 丰搜网 » 文档中心 » 详细内容
强化datagrid web 控件的编辑接口
接下来的议题比较复杂，不过详细研究了解后可以产生亲和力较佳的使用者接口。datagrid web控件在进入编修模式时，可以自订一些可视化的输入组件，代替使用者在textbox 中输入。这样一来可以让使用者快速轻松输入外，也可以避免一些输入的错误。首先我们来看看加强后的编修画面，我们利用dropdownlist web 控件以及checkbox web 控件，协助使用者输入性别、血型、星座以及是否订阅电子报，如下画面所示：
按下编辑选项后，提供可视化的工具供使用者使用：
使用者修改完毕后，数据已经更新：
上述范例画面的完整程序代码如下所示：
<%@import namespace=system.data.ado%>
<%@import namespace=system.data%>
<html>
<form runat="server">
<asp:datagrid id="dga" allowpaging="true" pagesize="5"
onpageindexchanged="dga_pagechg" runat="server"
pagerstyle-mode="numericpages" bordercolor="#808080"
headerstyle-backcolor="#0066cc" headerstyle-forecolor="white"
headerstyle-horizontalalign="center"
autogeneratecolumns="false"
oneditcommand="dga_ecmd" onupdatecommand="dga_ucmd"
oncancelcommand="dga_ccmd" >
<property name="edititemstyle">
<asp:tableitemstyle horizontalalign="center" backcolor="#d1dceb"/>
</property>
<property name="itemstyle">
<asp:tableitemstyle horizontalalign="center"/>
</property>
<property name="columns">
<asp:editcommandcolumn
headertext="编辑"
edittext="<img border=0 src=edit.gif>"
updatetext="<img border=0 src=save.gif>"
canceltext="<img border=0 src=cancel.gif>"/>
<asp:templatecolumn>
<template name="headertemplate">
姓名
</template>
<template name="itemtemplate">
<asp:image imageurl="ico7.gif" runat="server"/>
<%#container.dataitem("username")%>
</template>
<template name="edititemtemplate">
<asp:image imageurl="ico8.gif" runat="server"/>
<asp:textbox id="txtname"
text='<%#container.dataitem("username")%>'
runat="server"/>
</template>
</asp:templatecolumn>
<asp:templatecolumn>
<template name="headertemplate">
性别
</template>
<template name="itemtemplate">
<%#container.dataitem("usersex")%>
</template>
<template name="edititemtemplate">
<asp:radiobuttonlist id="rblsex" repeatdirection="horizontal"
selectedindex='<%#getproperty("rblsex")%>'
runat="server">
<asp:listitem>男</asp:listitem>
<asp:listitem>女</asp:listitem>
</asp:radiobuttonlist>
</template>
</asp:templatecolumn>
<asp:templatecolumn>
<template name="headertemplate">
血型
</template>
<template name="itemtemplate">
<%#container.dataitem("userblood")%>
</template>
<template name="edititemtemplate">
<asp:dropdownlist id="ddlblood" datasource='<%#arblood%>'
selectedindex='<%#getproperty("ddlblood")%>' runat="server">
</asp:dropdownlist>
</template>
</asp:templatecolumn>
<asp:templatecolumn>
<template name="headertemplate">
星座
</template>
<template name="itemtemplate">
<%#container.dataitem("usercons")%>
</template>
<template name="edititemtemplate">
<asp:dropdownlist id="ddlcons" datasource='<%#arcons%>'
selectedindex='<%#getproperty("ddlcons")%>' runat="server"/>
</template>
</asp:templatecolumn>
<asp:templatecolumn>
<template name="headertemplate">
是否订阅电子报
</template>
<template name="itemtemplate">
<%#container.dataitem("ordernews")%>
</template>
<template name="edititemtemplate">
<asp:checkbox id="cbordernews"
checked=<%#getproperty("cbordernews")%>
runat="server"/>
</template>
</asp:templatecolumn>
</property>
</asp:datagrid>
</form>
<script language="vb" runat="server">
dim dsca as adodatasetcommand=new adodatasetcommand("select * from
users", _
"provider=microsoft.jet.oledb.4.0;data
source=c:\.netpub\wwwroot\cr\ch08\myweb.mdb")
dim dsdataset as dataset=new dataset
dim dtdatatable as datatable
dim arcons() as string={"天秤座","天蝎座","水瓶座","巨蟹座","金牛座","
射手座", _
"处女座","狮子座","双子座","双鱼座","魔羯座","牡羊座"}
dim arblood() as string={"a","b","o","ab"}
sub page_load(sender as object, e as eventargs)
if page.ispostback=false then
bindgrid()
end if
end sub
sub bindgrid() '本程序用来执行控件和数据源间的系结
dsca.filldataset(dsdataset,"users")
dtdatatable=dsdataset.tables("users")
dga.datasource=dtdatatable.defaultview
page.databind()
end sub
sub dga_pagechg(sender as object, e as datagridpagechangedeventargs)
bindgrid()
end sub
sub dga_ecmd(sender as object, e as datagridcommandeventargs)
dga.edititemindex=e.item.itemindex
bindgrid()
end sub
sub dga_ucmd(sender as object, e as datagridcommandeventargs) '更新数
据源的程序
dim shtr as short=(dga.currentpageindex * dga.pagesize) +
e.item.itemindex
dsca.filldataset(dsdataset,"users")
dtdatatable=dsdataset.tables("users")
dim objcontrol as object
objcontrol=e.item.findcontrol("txtname")
dtdatatable.rows(shtr)("username")=objcontrol.text
objcontrol=e.item.findcontrol("rblsex") '传回rblsex 的参考
dtdatatable.rows(shtr)("usersex")=objcontrol.selecteditem.text '将
使用者的选择更新
'至datatable 中所
对应的字段
objcontrol=e.item.findcontrol("ddlblood")
dtdatatable.rows(shtr)("userblood")=objcontrol.selecteditem.text
objcontrol=e.item.findcontrol("ddlcons")
dtdatatable.rows(shtr)("usercons")=objcontrol.selecteditem.text
objcontrol=e.item.findcontrol("cbordernews")
dtdatatable.rows(shtr)("ordernews")=iif(objcontrol.checked,"是","否
")
dsca.update(dsdataset,"users")
dga.edititemindex=-1
bindgrid()
end sub
sub dga_ccmd(sender as object, e as datagridcommandeventargs)
dga.edititemindex=-1
bindgrid()
end sub
'进入编辑模式时, 让编辑数据的控件显示正确值的程序
function getproperty(byval strctlname as string)
dim shtr as short=(dga.currentpageindex * dga.pagesize) +
dga.edititemindex
if shtr>-1 then
dim shti as short
select case strctlname '判断控件名称
case "rblsex" '传回性别
return iif(dtdatatable.rows(shtr)("usersex")="男",0,1) '如果等于男
则传回0,否则传回1
case "ddlblood" '传回血型
for shti=0 to 3
if dtdatatable.rows(shtr)("userblood")=arblood(shti) then
'判断资料表中的资
return shti '料在数组的索引值
exit function
end if
next
case "ddlcons" '传回星座
dim strcons=dtdatatable.rows(shtr)("usercons")
for shti=0 to 11
if arcons(shti)=strcons then
return shti
exit function
end if
next
case "cbordernews" '传回是否订阅电子报
return iif(dtdatatable.rows(shtr)("ordernews")="是
","true","false")
end select
end if
end function
</script>
</html>
上述程序代码我们利用定义每个字段的edititemtemplate，并且利用数据系结叙述取得该字段数据的正确值。例如下列宣告了性别字段的编辑样版，使用者在进入编辑模式时以radiobuttonlist web 控件来让使用者选择：
<template name="edititemtemplate">
<asp:radiobuttonlist id="rblsex" repeatdirection="horizontal"
selectedindex='<%#getproperty("rblsex")%>'
runat="server">
<asp:listitem>男</asp:listitem>
<asp:listitem>女</asp:listitem>
</asp:radiobuttonlist>
</template>
而getproperty 程序可以检查每个控件所应该显示的状态值，只要在呼叫本程序时传入该控件的名称，这个程序就会到datatable 中将控件的适当状态设定传回，如下程序代码片段所示：
function getproperty(byval strctlname as string)
dim shtr as short=(dga.currentpageindex * dga.pagesize) +
dga.edititemindex
if shtr>-1 then
dim shti as short
select case strctlname '判断控件名称
case "rblsex" '传回性别
return iif(dtdatatable.rows(shtr)("usersex")="男",0,1) '如果等于
男则传回0,
'否则传回1
上述程序代码先取得记录在datatable 中的绝对地址，再判断使用者所传入的控件名称是否为rblsex。若为rblsex 所执行的数据系结动作，则传回iif 函式的判断结果。iif 的使用语法如下所示：
变量=iif(条件判断式, 成立所传回的资料, 不成立所传回的资料)
iif 中的条件判断式的最结果若为true，则传回成立所传回的资料；若不成立则传回不成立所传回的资料。所以若目前usersex 这个字段的值若为「男」则传回数值0，若不成立则为传回1；此时radiobuttonlist
web 控件收到后即可显示数据正确的选项，其它栏控件取得正确状态的方式也是如此。
