接下来的议题比较复杂,不过详细研究了解后可以产生亲和力较佳的使用者接口。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:InetPubwwwrootCRCh08MyWeb.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 控件收到后即可显示数据正确的选项,其它栏控件取得正确状态的方式也是如此。
|
|