asp.net - una - VB.net Haga clic con el mouse en la celda individual de gridview, cambie el color de fondo y la posición de la celda de salida(col y fila) en el cuadro de texto
datagridview cambiar color celda (3)
Básicamente: en el código detrás de usted establece un script onclick para cada celda, pasando las coordenadas de la celda y el cuadro de texto para los resultados.
En el script aspx, js escribe las coordenadas de la celda cliqueada en el cuadro de texto, itera todas las celdas de la tabla, establece el color en blanco y finalmente establece el color del fondo en rojo solo para la celda cliqueada
código 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>
código 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
Tengo una vista de cuadrícula en un formulario web y me gustaría saber cómo puedo seleccionar una sola celda en cualquier lugar de esa vista de cuadrícula con un clic del mouse.
El color de fondo de la celda seleccionada cambia luego a un color específico y un cuadro de texto en el formulario muestra el número de fila y el número de columna que pasaré como parámetros a un procedimiento almacenado.
Cuando se selecciona una celda posterior, la última celda seleccionada vuelve a su color original y se cambia el color de fondo de la nueva celda y el cuadro de texto se actualiza al número de fila y columna de la nueva celda.
Lo más cerca que he llegado hasta ahora es seleccionar una fila completa, pero incluso esto solo afecta a la primera celda de la fila en cuanto al fondo. El subrayado afecta a todas las celdas de la fila.
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
Resolvería este problema usando jQuery en combinación con las respuestas dadas por Cyborg y Andrea. jQuery le dará código javascript más legible.
Nota: el siguiente código no está probado. Es posible que deba modificarlo para satisfacer sus necesidades.
En respuesta a su otra pregunta, revertir la celda a su color original, puede agregar un atributo personalizado con la información necesaria.
Puede modificar el código de Andrea de la siguiente manera:
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
A continuación, cambie este código de JavaScript:
col.style.backgroundColor = ''#ffffff'';
a esto:
col.style.backgroundColor = col.getAttribute("data-defaultBackground");
Este código usa el estándar de atributo de datos HTML5. Consulte la publicación de blog de John Resig, atributos de datos HTML 5 , para obtener más información. Este estándar es relativamente nuevo y el soporte puede ser irregular.
Tenga en cuenta que puede tener algunos problemas con getAttributes .
Obtuve el código para convertir un Color en una cadena hexagonal de una respuesta de VirtualBlackFox
Considere otorgar la respuesta / recompensa a Andrea , ya que hizo todo el trabajo real.