0

我在网络表单中有一个网格视图，我想知道如何使用鼠标单击在该网格视图中的任何位置选择单个单元格。

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

When a subsequent cell is selected the last selected cell reverts back to it's original colour and the new cell's background colour is changed and the textbox updates to the new cell's row number and column number.

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

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
4

3 回答 3

2

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

于 2013-05-18T15:33:12.593 回答
2

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

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

asp代码：

<%@ 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
于 2013-05-16T15:11:14.530 回答
2

注意：以下代码未经测试。您可能需要对其进行修改以满足您的需要。

为了回答您的其他问题 - 将单元格恢复为其原始颜色 - 您可以添加包含必要信息的自定义属性。

您可以按如下方式修改 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，因为他/她做了所有真正的工作。

于 2013-05-17T15:22:15.093 回答