鼠标单击gridview的单个单元格，更改背景颜色并将单元格位置(col和行)输出到文本框

我在一个webform中有一个gridview，我想知道如何使用鼠标单击在gridview中选择单个单元格。

选定单元格的背景颜色然后更改为特定的颜色，窗体上的文本框显示行号和列号，我将把它们作为参数传递给存储过程。

当一个后续单元格被选中时，最后一个被选中的单元格恢复到它的原始颜色，新单元格的背景颜色被改变，文本框更新为新单元格的行号和列号。

到目前为止，我得到的最接近的是选择整个行，但即使这样也只影响行背景的第一个单元格。下划线影响该行中的所有单元格。

Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
    For Each row As GridViewRow In gvProgressGrid.Rows
        If row.RowType = DataControlRowType.DataRow Then
            row.Attributes("onclick") = "this.style.cursor='pointer';this.style.ine';this.style.backgroundColor ='#EEE'"
        End If
    Next
    MyBase.Render(writer)
End Sub

基本上:在后面的代码中，为每个单元格设置一个onclick脚本，传递单元格的坐标和结果的文本框。

在aspx中，js脚本在文本框中写入被单击单元格的坐标，迭代表格中的所有单元格，将颜色设置为白色，最后仅为被单击的单元格设置背景色为红色。

aspx代码:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestEvidenziazione.aspx.vb" Inherits="Web_Test_2010.TestEvidenziazione" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function highlight(my_row, cell, textbox) {
            document.getElementById("<%=txtCellSelected.ClientID%>").value = my_row + ',' + cell;
            var table = document.getElementById("<%=GridView1.ClientID%>");
            for (var i = 0, row; row = table.rows[i]; i++) {
                //iterate through rows
                //rows would be accessed using the "row" variable assigned in the for loop
                for (var j = 0, col; col = row.cells[j]; j++) {
                    //iterate through columns
                    //columns would be accessed using the "col" variable assigned in the for loop
                        col.style.backgroundColor = '#ffffff';
                    if (i == my_row && j == cell) {
                        col.style.backgroundColor = '#ff0000';
                    }
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtCellSelected" runat="server"></asp:TextBox>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true" ShowHeader="false">
    </asp:GridView>
    </div>
    </form>
</body>
</html>

vb.net代码:

Public Class TestEvidenziazione
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        LoadData()
    End Sub
    Private Sub LoadData()
        Dim list As New ArrayList
        Dim row1 As New myRowClass
        Dim row2 As New myRowClass
        Dim row3 As New myRowClass
        row1.a = "0,0"
        row1.b = "0,1"
        row1.c = "0,2"
        row2.a = "1,0"
        row2.b = "1,1"
        row2.c = "1,2"
        row3.a = "2,0"
        row3.b = "2,1"
        row3.c = "2,2"
        list.Add(row1)
        list.Add(row2)
        list.Add(row3)
        GridView1.DataSource = list
        GridView1.DataBind()
    End Sub
    Private Class myRowClass
        Public Property a As String
        Public Property b As String
        Public Property c As String
    End Class
    Private Sub GridView1_PreRender(sender As Object, e As System.EventArgs) Handles GridView1.PreRender
        For index_row = 0 To GridView1.Rows.Count - 1
            If GridView1.Rows(index_row).RowType = DataControlRowType.DataRow Then
                For index_cell = 0 To GridView1.Rows(index_row).Cells.Count - 1
                    GridView1.Rows(index_row).Cells(index_cell).Attributes("onclick") = "highlight(" & index_row.ToString & "," & index_cell.ToString & ", " & txtCellSelected.ClientID & "); "
                Next
            End If
        Next
    End Sub
End Class

注意:不测试以下代码。您可能需要修改它以满足您的需求。

为了回答你的另一个问题——将单元格恢复到原来的颜色——你可以添加一个带有必要信息的自定义属性。

你可以这样修改Andrea的代码:

Private Sub GridView1_PreRender(sender As Object, e As System.EventArgs) Handles GridView1.PreRender
    For index_row = 0 To GridView1.Rows.Count - 1
        If GridView1.Rows(index_row).RowType = DataControlRowType.DataRow Then
            For index_cell = 0 To GridView1.Rows(index_row).Cells.Count - 1
                GridView1.Rows(index_row).Cells(index_cell).Attributes("onclick") = "highlight(" & index_row.ToString & "," & index_cell.ToString & ", " & txtCellSelected.ClientID & "); "
                ' Change begins here...
                Dim l_bg = GridView1.Rows(index_row).Cells(index_cell).BackColor
                GridView1.Rows(index_row).Cells(index_cell).Attributes.Add( _
                    "data-defaultBackground", _
                    String.Format( "#{0:X2}{1:X2}{2:X2}{3:X2}", l_bg.A, l_bg.R, l_bg.G, l_bg.B )
                )
            Next
        End If
    Next
End Sub

然后切换以下javascript代码:

col.style.backgroundColor = '#ffffff';

col.style.backgroundColor = col.getAttribute("data-defaultBackground");

这段代码使用HTML5数据属性标准。有关更多信息，请参阅John Resig的博客文章，HTML 5数据-属性。此标准相对较新，支持可能参差不齐。

注意，使用getAttributes可能会遇到一些麻烦。

我从VirtualBlackFox的答案中获得了将颜色转换为十六进制字符串的代码

请考虑将答案/赏金授予Andrea，因为她/他做了所有真正的工作。

我会结合Cyborg和Andrea给出的答案使用jQuery来解决这个问题。jQuery将为您提供更可读的javascript代码。

相关内容

最新更新

热门标签：