DataGrid com Listagem e ToolTip

Nesta coluna mostrarei como montar um Datagrid de Listagem com exibição da descrição de cada item do DataGrid em forma de Tooltip com Imagens.

Por | @oficinadanet Programação
Ola Amigos e Frequentadores do Portal Oficina da Net.

Hoje iremos aprendere como monstar um DataGrid de listagem com a exibição de descrição da cada item da listagem em Tooltip, é uma combinação de CSS e codigo Asp, perceba nesta coluna que não tem nem uma inteiração com Java Script, que tambem é uma opção de fazer a mesma coisa.

Dado inicio a nossa coluna criem um novo banco de dados em vazio no Access com o nome de banco.mdb salvem e depois criem a tabela TAcesso com os campos da figura abaixo.

DataGrid com Listagem e ToolTip

Feito isso, agora criaremos a segunda tabela que é a TUsuarios, tambem criem ela como mostra a figura a baixo, definão o campo Usuario_IP como chave primaria.

DataGrid com Listagem e ToolTip


Depois disso devemos criar o Relacionamento entre as duas tabelas para isso devemos clicar no icone DataGrid com Listagem e ToolTip da barra de ferramentas do Access e joguem as duas tabelas na janela que surgir e depois vocês devem arrastar o campo Usuario_IP da tabela TUsuarios em cima do campo Acesso_IP da tabela TAcesso, cliquem na opção "Impor Integridade Referencial" os relacionamento ficara da seguite forma como na figura abaixo;

DataGrid com Listagem e ToolTip


Agora vamos povoar a Tabela TUsuarios com 5 Usuairos ficticios para testarmos vejam a figura abaixo:

DataGrid com Listagem e ToolTip


Feito isso vamos tambem povoar a tabela TAcesso lembrando que o campo Acesso_IP deve conter dados do campo Usuario_IP, pois eles estam relacionados entre si e o campo Acesso_IP não aceita outro tipo de dado que não tenha na outra tabela, e pode ser repedindo tambem desde que os dados inserido sejam da outra tabela. Vejam a imagem abaixo:

DataGrid com Listagem e ToolTip


Agora apatiremos para programação da pagina Asp, que exibira o resultado em forma da DataGrid ou seja a listagem e com o ToolTip ao passar o mouse por cima. Pegem o codigo abaixo, e salvem como default.asp, eu decidi postar tudo de uma vez por que pensei que iria ficar mais complicado explicar parte por parte da pagina achei melhor postar o codigo da pagina inteira e depois explicar o codigo bloco a bloco.

Vejamos o codigo inteiro:

<%
'Abre a conexão com o Banco de Dados Access
Dim caminho
Dim conexao
caminho = Server.MapPath("banco.mdb")
Set conexao = Server.CreateObject("ADODB.Connection")
conexao.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&caminho&";"

%>



Data Grid com ToolTip em Asp




  
    
    
    
    
  
  <%  
'Cria o Objeto para pegar os dados na tabela Acesso do Banco de Dados
Dim rsBuscaAcesso
Dim strBuscaAcesso
Set rsBuscaAcesso = Server.CreateObject("ADODB.Recordset")
strBuscaAcesso = "SELECT * FROM TAcesso ORDER BY Acesso_Hora"
rsBuscaAcesso.open strBuscaAcesso, conexao
  
   'Loop para pegar os todos os dados da tabela Acessos no banco de dados
    cont = 0
    while not rsBuscaAcesso.eof

'Cria o Objeto para Selecionar as Fotos dos Usuarios
Dim rsBuscaUsuario
Dim strBuscaUsuario
Set rsBuscaUsuario = Server.CreateObject("ADODB.Recordset")
strBuscaUsuario = "SELECT * FROM TUsuarios WHERE Usuario_IP ='"&rsBuscaAcesso("Acesso_Ip")&"' ORDER BY Usuario_Nome"
rsBuscaUsuario.open strBuscaUsuario, conexao

  %>
  
    
    
    
    
  
  <%
   rsBuscaAcesso.MoveNext
   cont = cont + 1
   wend
  
   'Apaga do os Objetos criados
   rsBuscaAcesso.close
   Set rsBuscaAcesso = Nothing
   rsBuscaUsuario.close
   Set rsBuscaUsuario = Nothing
  %>
IPMáquinaHora de AcessoOpções
<%=rsBuscaAcesso("Acesso_IP")%><%=rsBuscaAcesso("Acesso_Maquina")%><%=rsBuscaAcesso("Acesso_Hora")%>
    Descrição
    
        
          
            
            
          
          
            
          
          
            
          
          
            
          
          
            
          
        

            DataGrid com Listagem e ToolTip" width="75" height="80" border="1">
Nome: <%=rsBuscaUsuario("Usuario_Nome")%>
Idade: <%=rsBuscaUsuario("Usuario_Idade")%>
Email: <%=rsBuscaUsuario("Usuario_Email")%>
Empresa: <%=rsBuscaUsuario("Usuario_Empresa")%>
Função: <%=rsBuscaUsuario("Usuario_Funcao")%>

    

    





Creio que não é muito dificil de ententer pois esta bem estruturado e não é uma pagina grande nem complexa basta um minimo de conhecimento em Asp. Rodem no IIS de vocês e vejam como ficou.

Vamos a explicação dos codigos bloco a bloco:

O codigo abaixo faz a Conexão com o banco no topo da pagina.

<%
'Abre a conexão com o Banco de Dados Access
Dim caminho
Dim conexao
caminho = Server.MapPath("banco.mdb")
Set conexao = Server.CreateObject("ADODB.Connection")
conexao.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&caminho&";"
%>


Ja este codigo é o responsavem por estilisar nosso DataGrid e construir o efeito do ToolTip quando passado o mouse na palavra Descrição é o codigo CSS que deve ser colocado dentro da tag e do cabecalho da pagina




Este outro codigo é a tabela que fica dentro da tag e que por sua vez fica dentro da tag e é nesta tag que ocorre a exibição do Tooltip quando o mouse é passado por cima, devido a classe em CSS que é: dcontexto

    Descrição
    
        
          
            
            
          
          
            
          
          
            
          
          
            
          
          
            
          
        

            DataGrid com Listagem e ToolTip" width="75" height="80" border="1">
Nome: <%=rsBuscaUsuario("Usuario_Nome")%>
Idade: <%=rsBuscaUsuario("Usuario_Idade")%>
Email: <%=rsBuscaUsuario("Usuario_Email")%>
Empresa: <%=rsBuscaUsuario("Usuario_Empresa")%>
Função: <%=rsBuscaUsuario("Usuario_Funcao")%>

    

    



Agora vamos ver parte que carrega o DataGrid e a Tabela Tooltip mostrada acima, é um Loop em Asp usando While para iniciar o Loop, e MoveNext para ir carregando ate o fim da tabela no banco e e Wend que para o Loop ao ver que chegou no final da tabela do banco em questão a tabela TAcesso. Vejamos:


  
    
    
    
    
  
  <%  
'Cria o Objeto para pegar os dados na tabela Acesso do Banco de Dados
Dim rsBuscaAcesso
Dim strBuscaAcesso
Set rsBuscaAcesso = Server.CreateObject("ADODB.Recordset")
strBuscaAcesso = "SELECT * FROM TAcesso ORDER BY Acesso_Hora"
rsBuscaAcesso.open strBuscaAcesso, conexao
  
   'Loop para pegar os todos os dados da tabela Acessos no banco de dados
    cont = 0
    while not rsBuscaAcesso.eof

'Cria o Objeto para Selecionar as Fotos dos Usuarios
Dim rsBuscaUsuario
Dim strBuscaUsuario
Set rsBuscaUsuario = Server.CreateObject("ADODB.Recordset")
strBuscaUsuario = "SELECT * FROM TUsuarios WHERE Usuario_IP ='"&rsBuscaAcesso("Acesso_Ip")&"' ORDER BY Usuario_Nome"
rsBuscaUsuario.open strBuscaUsuario, conexao

  %>
  
    
    
    
    
  
  <%
   rsBuscaAcesso.MoveNext
   cont = cont + 1
   wend
  
   'Apaga do os Objetos criados
   rsBuscaAcesso.close
   Set rsBuscaAcesso = Nothing
   rsBuscaUsuario.close
   Set rsBuscaUsuario = Nothing
  %>
IPMáquinaHora de AcessoOpções
<%=rsBuscaAcesso("Acesso_IP")%><%=rsBuscaAcesso("Acesso_Maquina")%><%=rsBuscaAcesso("Acesso_Hora")%>
    Descrição
    
        
          
            
            
          
          
            
          
          
            
          
          
            
          
          
            
          
        

            DataGrid com Listagem e ToolTip" width="75" height="80" border="1">
Nome: <%=rsBuscaUsuario("Usuario_Nome")%>
Idade: <%=rsBuscaUsuario("Usuario_Idade")%>
Email: <%=rsBuscaUsuario("Usuario_Email")%>
Empresa: <%=rsBuscaUsuario("Usuario_Empresa")%>
Função: <%=rsBuscaUsuario("Usuario_Funcao")%>

    

    



Tendo tudo feito será como a imagem a baixo:
DataGrid com Listagem e ToolTip

Bom pessoal, espero que tenham gostado desta coluna e que ela seja referencianda
por vocês no dia-a-dia de nossos trabalhos, para quem é desenvolvedor ou simples aprediz.

Deixo a seguinte pergunta para vocês, que coluna ou melhor Tema, voces gostariam de ver em Asp, não so para mim mas para todos aqui que são colunistas no setor de Asp.

Obrigado
Até a Proxima Coluna.

Mais sobre:
Share Tweet
DESTAQUESRecomendado
Mais compartilhados
Comentários