提问人:mark davies 提问时间:11/16/2023 更新时间:11/16/2023 访问量:62
在 VB 中使用 onClick 更改行颜色
Changing row colour with an onClick in VB
问:
当我单击其中的某些文本时,如何更改该行的背景颜色?我只是想强调这一行。我添加了一个 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
答:
我在预渲染事件期间做这种事情。这是一个小片段。
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
好的,让我们编写一些代码来使用 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
因此,请注意,当我们突出显示一行时,我们还必须取消突出显示上一行。
效果现在如下所示:
但是,让光标“悬停”在行上可能更容易。请注意,上面的网格已经内置了一个 int 的“悬停”。
该代码空行悬停效果是通过 GridView 的以下设置完成的:
CssClass="table table-hover"
所以,事实上,table 和 table-hover 是引导类,假设你已经安装了引导程序(你很可能会安装,因为这是模板的默认设置),那么也许只需要一个光标悬停就足够了。
如前所述,请注意行按钮单击如何使用命名容器选取单击的 CURRENT 行。这适用于中继器、GridView、ListView 等。此方法还意味着您不必使用或关心特定的 GridView 事件,例如命令名称。事实上,对于此类行单击,我建议您为此类事件使用上述命名容器。
编辑:允许重新加载和重新绑定网格,保留行。
那么,即使重新加载,也要允许/保留突出显示的行?
然后我们需要 2 个新部分:
第一部分,保留数据库中的主键值列表。
第二部分,添加到重新绑定例程代码中,以突出显示行列表中的任何现有行。
因此,代码现在变成这样:
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% 的重新加载。
结果是这样的:
评论