asp.net 在VB中使用onClick更改行颜色

mxg2im7a  于 12个月前  发布在  .NET
关注(0)|答案(2)|浏览(98)

当我点击一行中的一些文本时,我如何改变该行的背景颜色?我只是想突出显示该行。我添加了一个onclick事件,但不知道如何点亮该行。下面是我所做的。

<asp:GridView ID="gdvOrders" width="100%" runat="server" style="font-size:1.8em" ShowHeaderWhenEmpty="True" EmptyDataText="No orders" AllowPaging="True" AutoGenerateColumns="False" CssClass="mGrid" DataKeyNames="orderID" DataSourceID="DSOrders" PageSize="20" AllowSorting="True">
            <AlternatingRowStyle CssClass="alt" />
            <Columns>  

                <asp:TemplateField HeaderText="Order">
                    <ItemTemplate>
                        <asp:LinkButton ID="LnkBtn1" onclick="LnkBtn1_Click" runat="server" Text='<%# Eval("ordertext") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="price" HeaderText="Price" />
.........

字符串
VB

Protected Sub LnkBtn1_Click(sender As Object, e As System.EventArgs)

     Dim LnkBtn1 As LinkButton = CType(sender, LinkButton)

End Sub

jhkqcmku

jhkqcmku1#

好的,让我们用VB写一些代码来突出显示行。正如所指出的,这是一种使用“山”来解决问题的小蚂蚁。(最好在客户端做这个)。
但是,让我们用服务器端代码来做这件事,因为从这个例子中可以学到很多东西(比如根据按钮点击来拾取GridView中的当前行)。
因此,虽然100%客户端JavaScript是一个很好的想法,但它通常并不那么简单,因为前一行突出显示现在必须取消突出显示!
比如说这个简单的GridView,行中有一个按钮。

<asp:GridView ID="GVHotels" runat="server" AutoGenerateColumns="False"
            DataKeyNames="ID" CssClass="table table-hover"
            Width="50%">
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                <asp:BoundField DataField="LastName" HeaderText="LastName" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:BoundField DataField="HotelName" HeaderText="Hotel" />
                <asp:BoundField DataField="Description" HeaderText="Descriptioin" />
                <asp:TemplateField HeaderText="Edit"
                    ItemStyle-HorizontalAlign="Center" ItemStyle-Width="130px">
                    <ItemTemplate>
                        <asp:Button ID="cmdEdit" runat="server" Text="Select"
                            OnClick="cmdEdit_Click"
                            />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

字符串
后面的代码加载这个网格:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadData()
    End If

End Sub

Sub LoadData()

    GVHotels.DataSource = MyRst("SELECT * FROM tblhotelsA ORDER BY HotelName")
    GVHotels.DataBind()

End Sub


还要注意,在上面,我们在GridView中有一个标准按钮,
这个按钮可以有这样的代码:

Protected Sub cmdEdit_Click(sender As Object, e As EventArgs)

    Dim btn As Button = sender
    Dim gRow As GridViewRow = btn.NamingContainer

    gRow.BackColor = System.Drawing.Color.LightSkyBlue

    If ViewState("LastRow") IsNot Nothing Then
        ' we have to un-highligt the previous row
        Dim RowIX As Integer = ViewState("LastRow")
        Dim gRow2 As GridViewRow = GVHotels.Rows(RowIX)
        gRow2.BackColor = System.Drawing.Color.White
    End If

    ViewState("LastRow") = gRow.RowIndex

End Sub


所以,请注意,当我们突出显示一行时,我们还必须取消突出显示前一行。
现在的效果看起来像这样:
x1c 0d1x的数据
然而,也许让光标“悬停”在行上会更容易。注意上面的网格已经有了一个“悬停”内置int。
无代码行悬停效果是通过GridView的以下设置完成的:

CssClass="table table-hover"


所以,事实上,table和table-hover都是bootstrap类,假设你已经安装了bootstrap(你很可能已经安装了,因为这是模板的默认设置),那么也许只是一个光标悬停就足够了。
如前所述,请注意行按钮单击如何通过使用命名容器来拾取单击的CURRENT行。这适用于repeater,GridView,ListView等。这种方法也意味着您不必使用或关心特定的GridView事件,如命令名称。实际上,对于此类行单击,我建议您使用上述命名容器来处理此类事件。

编辑:允许重新加载和重新绑定Grid,保留行。

所以,允许/保持突出显示的行即使重新加载?
我们需要两个新的部分:
第一部分,从数据库中保存一个主键值列表。
第二部分,添加重新绑定例程代码,以突出显示行列表中的任何现有行。
所以,代码现在变成了这样:

Dim MyIDList As New List(Of Integer)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadData()      ' first time grid load
        ViewState("IDList") = MyIDList
    Else
        MyIDList = ViewState("IDList")
    End If

End Sub

Sub LoadData()

    GVHotels.DataSource = MyRst("SELECT * FROM tblhotelsA ORDER BY HotelName")
    GVHotels.DataBind()

End Sub

Protected Sub cmdEdit_Click(sender As Object, e As EventArgs)

    Dim btn As Button = sender
    Dim gRow As GridViewRow = btn.NamingContainer

    Dim PK As Integer = GVHotels.DataKeys(gRow.RowIndex)("ID")

    If MyIDList.Contains(PK) Then
        ' ROW WAS Highliged, remove from list and un-highlight
        MyIDList.Remove(PK)
        gRow.BackColor = System.Drawing.Color.White
    Else
        ' not in our list, add to light, and highlight row
        MyIDList.Add(PK)
        gRow.BackColor = System.Drawing.Color.LightSkyBlue
    End If

End Sub

Protected Sub GVHotels_RowDataBound(sender As Object, e As GridViewRowEventArgs)

    If e.Row.RowType = DataControlRowType.DataRow Then

        Dim PKID As Integer = GVHotels.DataKeys(e.Row.RowIndex)("ID")
        If MyIDList.Contains(PKID) Then
            e.Row.BackColor = System.Drawing.Color.LightSkyBlue
        End If

    End If

End Sub

Protected Sub Button1_Click(sender As Object, e As EventArgs)

    LoadData()

End Sub


所以,最后一个按钮是测试我们的代码,它会100%重新加载。
结果如下:


svujldwt

svujldwt2#

我在预渲染事件中做了这类事情。这里有一个小片段。

Private Sub gdvOrders_PreRender(sender As Object, e As EventArgs) Handles gdvOrders.PreRender

    Dim GV As GridView = If(sender Is Nothing, gdvOrders, sender)

    '...

    For Each GvRow As GridViewRow In GV.Rows

        GvRow.Cells(0).Style.Add("text-align", "right")
        GvRow.Cells(1).Style.Add("text-align", "right")

        With GvRow.Cells(0).Style
            .Add("border-left-style", "solid")
            .Add("border-left-width", "2px")
            .Add("border-left-color", "Black")
        End With

        With GvRow.Cells(1).Style
            .Add("border-left-style", "solid")
            .Add("border-left-width", "2px")
            .Add("border-left-color", "Black")
        End With

        GvRow.Cells(0).BackColor = Drawing.Color.LightGray
        GvRow.Cells(1).BackColor = Drawing.Color.LightGray
        
    Next
    
End Sub

字符串

相关问题