zoukankan      html  css  js  c++  java
  • DataGrid 自定义字段内容

    因为DataGrid Web 控件的AutoGenerateColumn 属性预设为True,表示会自动产生数据源中所有的字段。如果我们想自订DataGrid Web 控制所要显示的字段,只要将AutoGenerateColumn属性设为False,并设定Columns 属性即可。其设定语法如下所示:

    <Property Name="Columns">
    <ASP:BoundColumn/>
    <ASP:ButtonColumn/>
    <ASP:EditCommandColumn/>
    <ASP:HyperlinkColumn/>
    <ASP:TemplateColumn>
    样版设定...
    </ASP:TemplateColumn>
    </Property>

    DataGrid Web 控件允许我们定义的字段,如下表所示:

    字段型态 说明
    BoundColumn 字段内容以Label 的方式呈现。
    ButtonColumn 字段内容以超级链接或是按钮的方式呈现。
    EditCommandColumn 提供数据编修的命令,不呈现字段数据。
    HyperLinkColumn 字段内容以超级链接的方式呈现。
    TemplateColumn 字段内容以自订样版的方式呈现。

    下列程序代码片段展示了这几种字段:

    <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"
    AutoGenerateColumns="False">
    <Property Name="Columns">
    <ASP:BoundColumn
    HeaderText="姓名"
    DataField="UserName"/>
    <ASP:ButtonColumn
    HeaderText="电话"
    ButtonType="PushButton"
    DataTextField="UserTel"/>
    <ASP:HyperlinkColumn
    HeaderText="电邮"
    DataNavigateUrlField="UserEmail"
    DataTextField="UserEmail"/>
    <ASP:TemplateColumn
    HeaderText="住址">
    <Template Name="ItemTemplate">
    <ASP:Image ImageUrl="ico1.gif" Runat="Server"/>
    <%#Container.DataItem("UserAdd")%>
    </Template>
    </ASP:TemplateColumn>
    <ASP:EditCommandColumn
    HeaderText="编辑"
    ButtonType="PushButton"
    CancelText="放弃"
    EditText="编辑"
    UpdateText="确定"/>
    </Property>
    </ASP:DataGrid>

    其中这些字段的共同基础属性如下表所示:

    属性 说明
    FooterText 在字段底部显示的文字。
    HeaderImageUrl 用来代替字段标题的影像文件地址。
    HeaderText 字段标题所要显示的文字。
    Owner 传回字段所属DataGrid 的参考。
    SortField 当使用者指明要以本字段来排序时,该字段在数据源的名称。
    State 传回字段的状况。
    Visible 设定是否要显示字段,True/False。
    这些字段也支持许多样式对象,可以让我们可以灵活的自订其显示外观,如下表所示:

    样式对象 样式类别说明
    FooterStyle TableItem 脚注所要显示的样式。
    HeaderStyle TableItem 标头所要显示的样式。
    ItemStyle 基础 每一个项目所要显示的样式。

    BoundColumn

    BoundColumn 最主要的功能是利用Label 来显示数据源中的一个字段内容,其使用语法如下所示:

    <ASP:BoundColumn
    DataField="DataSourceField"
    DataFormatString="FormatString"
    FooterText="FooterText"
    HeaderImageUrl="url"
    HeaderText="HeaderText"
    ReadOnly="True | False"
    SortField="DataSourceFieldToSortBy"
    Visible="True | False"
    FooterStyle-Property="value"
    HeaderStyle-Property="value"
    ItemStyle-Property="value"
    />

    其中除了共同基础属性以及样式对象外,常用的属性如下表所示:

    属性 说明
    DataField 所要显示的资料源字段名称。
    DataFormatString 所要显示的资料格式。
    ReadOnly 设定字段是否为只读,True/False。

    下列程序代码片段以BoundColumn 来显示字段内容:

    <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"
    AutoGenerateColumns="False">
    <Property Name="Columns">
    <ASP:BoundColumn
    HeaderText="姓名"
    HeaderStyle-Font-Bold="True"
    HeaderStyle-HorizontalAlign="Center"
    DataField="UserName"/>
    <ASP:BoundColumn
    HeaderText="电话"
    HeaderStyle-Font-Bold="True"
    HeaderStyle-HorizontalAlign="Center"
    DataField="UserTel"/>
    <ASP:BoundColumn
    HeaderText="住址"
    HeaderStyle-Font-Bold="True"
    HeaderStyle-HorizontalAlign="Center"
    DataField="UserAdd"/>
    </Property>
    </ASP:DataGrid>

    ButtonColumn

    BoundColumn 最主要的功能是利用LinkButton 或PushButton 来显示数据源中的一个字段内容,并且可以触发DataGrid Web 控件的事件。其使用语法如下所示:

    <ASP:ButtonColumn
    ButtonType="LinkButton | PushButton"
    CommandName="命令名称"
    DataTextField="DataSourceField"
    DataTextFormatString="FormatString"
    FooterText="FooterText"
    HeaderImageUrl="url"
    HeaderText="HeaderText"
    ReadOnly="True | False"
    SortField="DataSourceFieldToSortBy"
    Text="ButtonCaption"
    Visible="True | False"
    />

    其中除了共同基础属性以及样式对象外,常用的属性如下表所示:

    属性 说明
    ButtonType 所要使用的按钮种类,预设为LinkButton。
    CommandName 命令名称。
    DataTextField 设定控件上所要显示的资料源字段名称。
    DataTextFormatString 所要显示的资料格式。
    Text 设定控件上所要显示的文字,若指定DataTextField 属性,则本属性无效。

    下列程序代码范例以BoundColumn 来显示字段内容,并且显示使用者点选了哪一笔记录:

    <%@Import Namespace=System.Data.ADO%>
    <%@Import Namespace=System.Data%>
    <!--#Include File="GetTable.inc"-->
    <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">
    <Property Name="Columns">
    <ASP: ButtonColumn
    HeaderText="姓名"
    DataTextField="UserName"/>
    <ASP:BoundColumn
    HeaderText="电话"
    DataField="UserTel"/>
    <ASP:BoundColumn
    HeaderText="住址"
    DataField="UserAdd"/>
    </Property>
    </ASP:DataGrid>
    </Form>
    <ASP:Label Id="Label1" Runat="Server"/>
    <Script Language="VB" Runat="Server">
    Sub Page_Load(Sender As Object, e As EventArgs)
    If Page.IsPostBack=False Then
    Dim dtDataTable As DataTable=GetTable("CH08\MyWeb.mdb", "Members")
    dgA.DataSource=dtDataTable.DefaultView
    Page.DataBind()
    End If
    Label1.Text="您目前没有点选任何记录."
    End Sub
    Sub dgA_PageChg(Sender As Object, e As DataGridPageChangedEventArgs)
    Dim dtDataTable As DataTable=GetTable("CH08\MyWeb.mdb", "Members")
    dgA.DataSource=dtDataTable.DefaultView
    Page.DataBind()
    End Sub
    Sub dgA_ICmd(Sender As Object, e As DataGridCommandEventArgs)
    Dim shtRow As Short= e.Item.ItemIndex+1
    If shtRow<>0 Then
    Label1.Text="您点选了第 " & shtRow.ToString() & " 个字段的数据, 这<br>笔数据在数据源中是第 "
    Label1.Text+=((dgA.CurrentPageIndex * dgA.PageSize) +shtRow).ToString & "笔记录."
    End If
    End Sub
    </SCRIPT>
    </Html>

    上述范例我们指定DataGrid Web 控件的OnItemCommand 属性为dgA_ICmd,表示按下显示使用者名称的ButtonColumn 时会触发dgA_CCmd 事件,并且执行dgA_Icmd 事件程序;如下程序代码片段所示:

    Sub dgA_ICmd(Sender As Object, e As DataGridCommandEventArgs)
    Dim shtRow As Short= e.Item.ItemIndex+1
    If shtRow<>0 Then
    Label1.Text="您点选了第 " & shtRow.ToString() &" 个字段的数据, 这<br>笔数据在数据源中是第 "
    Label1.Text+=((dgA.CurrentPageIndex * dgA.PageSize) +shtRow).ToString &"笔记录."
    End If
    End Sub

    在这个事件程序中,我们利用e.Item.ItemIndex 属性取得使用者点选了第几个项目的Index 值;由于Index 由0 开始,所以我们加上1 表示点选了第几个项目。如果没有任何项目被点选,则e.Item.ItemIndex 属性传回 -1。由于变量shtRow 为e.Item.ItemIndex 加1 的结果,所以我们藉由判断变量shtRow 是否为0 来得知使用者是否有选择选项。
    因为e.Item.ItemIndex 属性传回的是使用者在DataGrid Web 控件上所点选的项目,并不是记录在数据源的地址;所以我们透过计算目前的页数索引乘以每页的纪录笔数后,再加上目前所在的字段即可得到该笔数据在数据源中的实际地址。所以使用者若点选了第六页的第四个字段,表达式则为 (5*5)+4,结果29 就是记录在数据源的实际顺序。
    若要取得该笔记录在数据源中的索引值,由于Index 值是由0 开始计数,所以只要再减去1 即可。

    HyperlinkColumn

    HyperlinkColumn 最主要的功能是以超级链接来显示资料源中的一个字段内容,并可以指定使用者点选该项目时所要开启的地址。其使用语法如下所示:

    <ASP:HyperlinkColumn
    DataNavigateUrlField="DataSourceField"
    DataNavigateUrlFormatString="FormatExpression"
    DataTextField="DataSourceField"
    DataTextFormatString="FormatExpression"
    FooterText="FooterText"
    HeaderImageUrl="url"
    HeaderText="HeaderText"
    NavigateUrl="url"
    ReadOnly="True | False"
    SortField="DataSourceFieldToSortBy"
    Target="window"
    Text="HyperlinkText"
    Visible="True | False"
    />

    其中除了共同基础属性以及样式对象外,常用的属性如下表所示:

    属性 说明
    DataNavigateUrlField 设定要以哪个字段值来当成超级链接的目标地址。
    DataNavigateUrlFormatString 设定要开启连结的格式字符串。
    DataTextField 设定控件上所要显示的资料源字段名称。
    DataTextFormatString 所要显示的资料格式。
    NavigateUrl 设定要连结的URL 地址。若指定了DataNavigateUrlField 属性,
    则本属性无效。
    Target 设定连结所要开启的目标。
    Text
    设定控件上所要显示的文字,若指定DataTextField 属性,则本
    属性无效。

    下列程序代码范例以Hyperlink Column 来显示使用者电子邮件信箱字段,若使用者点选了一笔记录,则会开启邮件编辑软件:

    <%@Import Namespace=System.Data.ADO%>
    <%@Import Namespace=System.Data%>
    <!--#Include File="GetTable.inc"-->
    <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">
    <Property Name="Columns">
    <ASP:BoundColumn
    HeaderText="姓名"
    DataField="UserName"/>
    <ASP:BoundColumn
    HeaderText="电话"
    DataField="UserTel"/>
    <ASP:HyperlinkColumn
    HeaderText="电邮"
    DataNavigateUrlField="UserEmail"
    DataTextField="UserEmail"
    DataNavigateUrlFormatString="mailto:{0}" />
    </Property>
    </ASP:DataGrid>
    </Form>
    <Script Language="VB" Runat="Server">
    Sub Page_Load(Sender As Object, e As EventArgs)
    If Page.IsPostBack=False Then
    Dim dtDataTable As DataTable=GetTable("CH08\MyWeb.mdb", "Members")
    dgA.DataSource=dtDataTable.DefaultView
    Page.DataBind()
    End If
    End Sub
    Sub dgA_PageChg(Sender As Object, e As DataGridPageChangedEventArgs)
    Dim dtDataTable As DataTable=GetTable("CH08\MyWeb.mdb", "Members")
    dgA.DataSource=dtDataTable.DefaultView
    Page.DataBind()
    End Sub
    </SCRIPT>
    </Html>

    上述范例我们以UserEmail 字段做为显示以及欲连结的目标。由于我们希望使用者点选这个字段中的任何一个项目时,可以开启Outlook 来进行邮件的编辑;所以我们必须在使用者的电子邮件信箱地址前将上mailto:」。要达到这个目的,可以设定DataNavigateUrlFormatString 属性;

    如下程序代码片段所示:

    DataNavigateUrlFormatString="mailto:{0}"
    其中「{0}」会被DataNavigateUrlField 的内容所取代,所以执行结果如下:
    若超级链接的内容是某个网址,只要将NavigateUrlFormatString 属性的内容设定为「"http://{0}"」
    即可。

    EditCommandColumn

    EditCommandColumn 最主要的功能是利用LinkButton 或PushButton 来下达编辑资料的命令,并且可以触发DataGrid Web 控件的事件。EditCommandColumn 进入编辑模式的时候会产生TextBox 让使用者编辑,也可以和TemplateColumn 一起配合使用,我们后面介绍TemplateColumn 的时候会说明。其使用语法如下所示:

    ASP:EditCommandColumn
    ButtonType="LinkButton | PushButton"
    CancelText="CancelButtonCaption"
    EditText="EditButtonCaption"
    FooterText="FooterText"
    HeaderImageUrl="url"
    HeaderText="HeaderText"
    ReadOnly="True | False"
    SortField="DataSourceFieldToSortBy"
    UpdateText="UpdateButtonCaption"
    Visible="True | False"
    />

    其中除了共同基础属性以及样式对象外,常用的属性如下表所示:

    属性 说明
    ButtonType 所要使用的按钮种类,预设为LinkButton。
    EditText 编辑数据所要显示给使用者看的文字。
    UpdateText 更新数据所要显示给使用者看的文字。
    CancelText 放弃编辑所要显示给使用者看的文字。
    当使用者点选了显示EditText 的控件时,DataGrid Web 控件会自动触发OnEditCommand 事件,并执行OnEditCommand 属性所指定的事件程序;倘若点选了显示UpdateText 以及CancelText内容的控制像,也一样分别自动触发OnUpdateCommand 以及OnCancelCommand 事件。下列程序代码范例增加了一个ditCommandColumn 字段,并且显示使用者点选了哪一个按钮:

    <%@Import Namespace=System.Data.ADO%>
    <%@Import Namespace=System.Data%>
    <!--#Include File="GetTable.inc"-->
    <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"
    OnEditCommand="dgA_ECmd" OnUpdateCommand="dgA_UCmd"
    OnCancelCommand="dgA_CCmd" >
    <Property Name="Columns">
    <ASP:BoundColumn
    HeaderText="姓名"
    DataField="UserName"/>
    <ASP:BoundColumn
    HeaderText="电话"
    DataField="UserTel"/>
    <ASP:EditCommandColumn
    HeaderText="编辑"
    ButtonType="PushButton"
    EditText="编辑"
    UpdateText="更新"
    CancelText="放弃"/>
    </Property>
    </ASP:DataGrid>
    </Form>
    <ASP:Label Id="Label1" Runat="Server"/>
    <Script Language="VB" Runat="Server">
    Dim dtDataTable As DataTable=GetTable("CH08\MyWeb.mdb", "Members")
    Sub Page_Load(Sender As Object, e As EventArgs)
    If Page.IsPostBack=False Then
    dgA.DataSource=dtDataTable.DefaultView
    Page.DataBind()
    End If
    End Sub
    Sub dgA_PageChg(Sender As Object, e As DataGridPageChangedEventArgs)
    dgA.DataSource=dtDataTable.DefaultView
    Page.DataBind()
    End Sub
    Sub dgA_ECmd(Sender As Object, e As DataGridCommandEventArgs)
    Label1.Text="您点选了第 " & (e.Item.ItemIndex+1).ToString & " 个字段的编辑."
    dgA.EditItemIndex=e.Item.ItemIndex
    dgA.DataSource=dtDataTable.DefaultView
    Page.DataBind()
    End Sub
    Sub dgA_UCmd(Sender As Object, e As DataGridCommandEventArgs)
    Label1.Text="您点选了第 " & (e.Item.ItemIndex+1).ToString & " 个字段的更新."
    dgA.EditItemIndex=-1
    dgA.DataSource=dtDataTable.DefaultView
    Page.DataBind()
    End Sub
    Sub dgA_CCmd(Sender As Object, e As DataGridCommandEventArgs)
    Label1.Text="您点选了第 " & (e.Item.ItemIndex+1).ToString & " 个字段的放弃."
    dgA.EditItemIndex=-1
    dgA.DataSource=dtDataTable.DefaultView
    Page.DataBind()
    End Sub
    </SCRIPT>
    </Html>

    上述范例中,由于DataTable 对象要让其它事件程序使用,所以我们在网页阶层的宣告区宣告。
    我们也指定了OnEditCommand 事件、OnUpdateCommand 事件以及OnCancelCommand 事件;当使用者按下「编辑」按钮时会自动触发我们所指定的dgA_ECmd 事件程序,如下程序代码范例所示:

    Sub dgA_ECmd(Sender As Object, e As DataGridCommandEventArgs)
    Label1.Text="您点选了第 " & (e.Item.ItemIndex+1).ToString & " 个字段的编辑."
    dgA.EditItemIndex=e.Item.ItemIndex
    dgA.DataSource=dtDataTable.DefaultView
    Page.DataBind()
    End Sub

    上述程序代码片段将DataGrid 的EditItemIndex 属性设定为使用者所点选记录的索引值,所以该笔记录就会进入编辑模式;此时原来字段内的「编辑」按钮就会变成「更新」以及「放弃」。
    使用者若编辑完毕后再点选「更新」或「放弃」按钮时,即触发所指定的OnUpdateCommand
    或是OnCancelCommand 事件;这些事件最后将DataGrid 对象的EditItemIndex 属性设为 -1,
    表示没有任何项目被编辑,让数据回复到原来的显示模式。

    注:以上代码为vb形式,其中System.Data.ADO 应该为 System.Data.OleDb
     ****摘自《asp.net程式设计基础篇》

  • 相关阅读:
    css3的::selection属性
    css3的apprearance属性(转)
    CSS3的background-size
    DNS与获取
    AMD规范
    网站的个性图标
    webapp之路--之ios上图标
    webapp之路--之必备知识
    用Js的eval解析JSON中的注意点
    CSS 盒模型
  • 原文地址:https://www.cnblogs.com/limshirley/p/1505347.html
Copyright © 2011-2022 走看看