Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

kania

Menu TreView com bd mysql

Por , em ASP Clássico

Recommended Posts

kania    0

kania
Postado

Olá pessoal, tenho o seguinte código para montagem de um menu treview

 

 

<ul id="red" class="treeview-red">
	<li><span>Item 1</span>
		<ul>
			<li><span>Item 1.0</span>
				<ul>
					<li><span>Item 1.0.0</span></li>
				</ul>
			</li>
			<li><span>Item 1.1</span></li>
			<li><span>Item 1.2</span>
				<ul>
					<li><span>Item 1.2.0</span>
					<ul>
						<li><span>Item 1.2.0.0</span></li>
						<li><span>Item 1.2.0.1</span></li>
						<li><span>Item 1.2.0.2</span></li>
					</ul>
				</li>
					<li><span>Item 1.2.1</span>
					<ul>
						<li><span>Item 1.2.1.0</span></li>
					</ul>
				</li>
					<li><span>Item 1.2.2</span>
					<ul>
						<li><span>Item 1.2.2.0</span></li>
						<li><span>Item 1.2.2.1</span></li>
						<li><span>Item 1.2.2.2</span></li>
					</ul>
				</li>
				</ul>
			</li>
		</ul>
	</li>
	<li><span>Item 2</span>
		<ul>
			<li><span>Item 2.0</span>
				<ul>
					<li><span>Item 2.0.0</span>
					<ul>
						<li><span>Item 2.0.0.0</span></li>
						<li><span>Item 2.0.0.1</span></li>
					</ul>
				</li>
				</ul>
			</li>
			<li><span>Item 2.1</span>
				<ul>
					<li><span>Item 2.1.0</span>
					<ul>
						<li><span>Item 2.1.0.0</span></li>
					</ul>
				</li>
					<li><span>Item 2.1.1</span>
					<ul>
						<li><span>Item 2.1.1.0</span></li>
						<li><span>Item 2.1.1.1</span></li>
						<li><span>Item 2.1.1.2</span></li>
					</ul>
				</li>
					<li><span>Item 2.1.2</span>
					<ul>
						<li><span>Item 2.1.2.0</span></li>
						<li><span>Item 2.1.2.1</span></li>
						<li><span>Item 2.1.2.2</span></li>
					</ul>
				</li>
				</ul>
			</li>
		</ul>
	</li>
	<li class="open"><span>Item 3</span>
		<ul>
			<li class="open"><span>Item 3.0</span>
				<ul>
					<li><span>Item 3.0.0</span></li>
					<li><span>Item 3.0.1</span>
					<ul>
						<li><span>Item 3.0.1.0</span></li>
						<li><span>Item 3.0.1.1</span></li>
					</ul>
					
				</li>
					<li><span>Item 3.0.2</span>
					<ul>
						<li><span>Item 3.0.2.0</span></li>
						<li><span>Item 3.0.2.1</span></li>
						<li><span>Item 3.0.2.2</span></li>
					</ul>
				</li>
				</ul>
			</li>
		</ul>
	</li>
	</ul>

 

Porem estou tentando montar ele de forma que busque as informações dentor de um banco de dados, o código da montagem que tenho hoje para a treeview é

 

 

<%
Patrocinador = Session("IdConsultor")
IdPatrocinador = Request.QueryString("Proximo")
If IdPatrocinador = "" Then
	IdPatrocinador = Patrocinador
End If
	

	
	'====================================================================
	'====================================================================
	'REDE FORMATO LINEAR
	'====================================================================
	'====================================================================
	Set Rs = Server.CreateObject("adodb.recordset")
	SQL = "select * from cad_consultor where IdConsultor = '" & IdPatrocinador & "'"
	Rs.Open SQL,Conn,3,3
	
	Pat = Rs("IdConsultor")
	Sexo = Rs("Sexo")
	If Sexo = "F" Then
		Sexo = "imagens/usuario_f.png"
	Else
		Sexo = "imagens/usuario_m.png"
	End If
	
	
	Set Rs2 = Server.CreateObject("adodb.recordset")
	SQL = "select * from cad_consultor where IdPatrocinador = '" & Pat & "'  and IdConsultor <> '1'"
	Rs2.Open SQL,Conn,3,3
	
	Response.Write "<span class=""Ascendente""><img src="&Sexo&" align=""middle"">"&Rs("Nome")&" | "&Rs("IdConsultor")&"</span><br>"
	Do until RS2.EOF
	
	Pat2 = Rs2("IdConsultor")
	Sexo = Rs2("Sexo")
	If Sexo = "F" Then
		Sexo = "imagens/usuario_f.png"
	Else
		Sexo = "imagens/usuario_m.png"
	End If
	Response.Write "<span class=""LPL"">|_<img src="&sexo&" align=""middle""><a href=""?pag=MinhaRede.asp&Proximo="&Rs2("IdConsultor")&""">Primeira Linha >> "&Rs2("Nome")&"</a></span><br>"
	
	
		Set Rs3 = Server.CreateObject("adodb.recordset")
		SQL = "select * from cad_consultor where IdPatrocinador = '" & Pat2 & "'"
		Rs3.Open SQL,Conn,3,3
		
		Do until RS3.EOF
		
		Pat3 = Rs3("IdConsultor")
		Sexo = Rs3("Sexo")
		If Sexo = "F" Then
			Sexo = "imagens/usuario_f.png"
		Else
			Sexo = "imagens/usuario_m.png"
		End If
		Response.Write "<span class=""LSL"">|_<img src="&sexo&" align=""middle""><a href=""?pag=MinhaRede.asp&Proximo="&Rs3("IdConsultor")&""">Segunda Linha >> "&Rs3("Nome")&"</a></span><br>"
		
		
			Set Rs4 = Server.CreateObject("adodb.recordset")
			SQL = "select * from cad_consultor where IdPatrocinador = '" & Pat3 & "'"
			Rs4.Open SQL,Conn,3,3
			
			Do until RS4.EOF
			
			Pat4 = Rs4("IdConsultor")
			Sexo = Rs4("Sexo")
			If Sexo = "F" Then
				Sexo = "imagens/usuario_f.png"
			Else
				Sexo = "imagens/usuario_m.png"
			End If
			Response.Write "<span class=""LTL"">|_<img src="&sexo&" align=""middle""><a href=""?pag=MinhaRede.asp&Proximo="&Rs4("IdConsultor")&""">Terceira Linha >> "&Rs4("Nome")&"</a></span><br>"
			
			
				Set Rs5 = Server.CreateObject("adodb.recordset")
				SQL = "select * from cad_consultor where IdPatrocinador = '" & Pat4 & "'"
				Rs5.Open SQL,Conn,3,3
				
				Do until RS5.EOF
				
				Sexo = Rs5("Sexo")
				If Sexo = "F" Then
					Sexo = "imagens/usuario_f.png"
				Else
					Sexo = "imagens/usuario_m.png"
				End If
				Response.Write "<span class=""LQL"">|_<img src="&sexo&" align=""middle""><a href=""?pag=MinhaRede.asp&Proximo="&Rs5("IdConsultor")&""">Quarta Linha >> "&Rs5("Nome")&"</a></span><br>"
				
				RS5.movenext
				loop
				
				Rs5.Close
				Set Rs5 = Nothing
			
			RS4.movenext
			loop
			
			Rs4.Close
			Set Rs4 = Nothing
			
		RS3.movenext
		loop
			
		Rs3.Close
		Set Rs3 = Nothing
		
	RS2.movenext
	loop
	
	Rs2.Close
	Set Rs2 = Nothing
	
%>

Quando eu jogo as Divs dentro dos selects, simplesmente ele monta a treeview fora da ordem imprimindo normal como esta a visualização dos selects fica visualmente assim, porem como podem ver na imagem a tree esta fixa eu quero colcoar ela agora dentro das divs para poder criar o menu interativo, conforme o cara vai clicando a a´rvore vai abrindo até o quarto nivel

 

Imagem Postada

 

O modelo da TreeView eu peguei deste site http://jquery.bassistance.de/treeview/demo/

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

tenho um TreeView em AJAX e XML, ótimo, ja me resolveu muitas paradas neste sentido...

se kiser me manda uma MP.

Compartilhar este post

Link para o post
Compartilhar em outros sites

kania    0

kania
Postado

Olá xanburzum, tentei enviar uma mp mas só estava dando erro na pagina dizendo que eu não tenho autorização para enviar mp no forum, então estou enviando aqui mesmo, quero sim se puder me enviar agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

irei te enviar...muito bom...

Compartilhar este post

Link para o post
Compartilhar em outros sites

mr.Guardião    0

mr.Guardião
Postado

Presentinho para o amigo:

 

Para ficar mais fácil de trabalhar, usamos o FrameWork jQuery para fazer o esquema de mostrar e ocultar a árvore

<!-- ini : JQuery: +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<script type="text/javascript" src="library/jquery/jquery.js?ver=1.2.6"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
	$(".TreeView > li").click(function(){
		$elem = $(this).next("ul");

		$elem.slideToggle(300,function(){
			if ($(this).is(':hidden')) {
				var state = "closed";
			} else if ($(this).is(':visible')) {
				var state = "open";
			}
		});// end : slideToggle

	});// end : click
});// end : jQuery > ready
</script>
<!-- end : JQuery: +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->

Um simples CSS para dar um espaçamento entre as listas e ocultar as "bolinhas"

<style>
.TreeView LI {padding: 5px; list-style: none;}
</style>

Conexão com o Banco de Dados, neste caso utilizamos MSSQL Server, mas basta substituir pela conexão que quiser

<%
	Const consDBServer			= "GUARDIAO"
	Const consDataBase			= "testes"
	Const consDBUser				= "sa"
	Const consDBPassword		= "guardiao"
	Const consDBLanguage		= "us_english"

	Dim Conexao
	Sub AbreConexao
	Dim strConexao
		set conexao = server.createobject("ADODB.Connection")
		'// Conectando com Base SQL SERVER
		strConexao = "Provider=SQLOLEDB.1;Persist Security Info=False;"&_
		"User ID="& consDBUser &";"&_
		"PWD="& consDBPassword &";"&_
		"Initial Catalog="& consDataBase &";"&_
		"Data Source="& consDBServer &" "
		conexao.Open = strConexao
	End Sub

	Sub FechaConexao
		Set conexao = Nothing
	End Sub
%>

 

Aqui mostramos a listagem base, onde tudo começa

Observe as seguintes linhas, neste primeira etapa:

 

htmItem = TreeConsultor(idConsultor)

If Len(Trim(htmItem)) > 0 Then htm = htm & htmItem

 

Veja que entramos na função TreeConsultor, passando um parâmetro

<%
	'// Lista Base
	'// *****************************************************************
	strSQL = "SELECT * FROM cad_consultor WHERE idPatrocinador = 0"
	Call AbreConexao
	Set rsSQL = Conexao.Execute(strSQL)

	If Not rsSQL.EOF Then
		
		htm = " <ul class=""TreeView"" id=""TreeView""> "& vbNewLine
		While Not rsSQL.EOF
			idConsultor	= rsSQL.Fields("idConsultor").Value
			strNome			= rsSQL.Fields("nome").Value
			Imagem			= "<img src=""imagens/administrador.png"" align=""middle"">"

			htm = htm &" <li><span>"& Imagem & strNome &"</span></li>"& vbNewLine
			htmItem = TreeConsultor(idConsultor)
			If Len(Trim(htmItem)) > 0 Then htm = htm & htmItem

		rsSQL.MoveNext
		Wend
		htm = htm &"</ul> "& vbNewLine

	End If
	Set rsSQL = Nothing
	Call FechaConexao

	
	
	Response.Write htm
%>

 

Aqui nos criamos e executamos a função TreeConsultor()

Onde recuperamos os registros relacionados a listagem inicial

Observer que também chamamos a função novamente dentro dela mesma,

isto para verificar se existem outros níveis abaixo do existente

<%
	'// Ini : Função > TreeConsultor
	'// *****************************************************************
	Public Function TreeConsultor(idConsultor)
		tmp = ""

		pSQL = "SELECT * FROM cad_consultor WHERE idPatrocinador = "& idConsultor
		Call AbreConexao
		Set pRS = Conexao.Execute(pSQL)

		If Not pRS.EOF Then			
			tmp = " <ul class=""TreeView"" style=""display:none;""> "& vbNewLine
			While Not pRS.EOF
				idConsultor	= pRS.Fields("idConsultor").Value
				strNome			= pRS.Fields("nome").Value
				strSexo			= pRS.Fields("sexo").Value
				Imagem			= ""
				
				If(LCase(strSexo) = "m") Then Imagem			= "<img src=""imagens/usuario_"& strSexo &".png"" align=""middle"">"
				If(LCase(strSexo) = "f") Then Imagem			= "<img src=""imagens/usuario_"& strSexo &".png"" align=""middle"">"

				tmp = tmp &" <li><span>"& Imagem &" "& strNome &"</span></li>"& vbNewLine
				tmpItem = TreeConsultor(idConsultor)
				If Len(Trim(tmpItem)) > 0 Then tmp = tmp & tmpItem

			pRS.MoveNext
			Wend
			tmp = tmp &"</ul> "& vbNewLine

		End If
		Set pRS = Nothing
		Call FechaConexao

		TreeConsultor = tmp
	End Function
	'// end : Função > TreeConsultor
	'// *****************************************************************
%>

E por final os dados como foram gravados, pode ser que você esteja gravando de outra forma.

Daí basta adaptar... mas acho que é desta forma mesmo ok.

 

INSERTS

INSERT INTO cad_consultor(IdPatrocinador, Nome, Sexo) values(0, 'Grupo Eagle Ltda', '')
INSERT INTO cad_consultor(IdPatrocinador, Nome, Sexo) values(1, 'Primeira Linha >> Nome 1', 'M')
INSERT INTO cad_consultor(IdPatrocinador, Nome, Sexo) values(2, 'Segunda Linha >> Nome 1.1', 'F')
INSERT INTO cad_consultor(IdPatrocinador, Nome, Sexo) values(3, 'Terceira Linha >> Nome 1.1.1', 'F')
INSERT INTO cad_consultor(IdPatrocinador, Nome, Sexo) values(4, 'Quarta Linha >> Nome 1.1.1.1', 'F')
INSERT INTO cad_consultor(IdPatrocinador, Nome, Sexo) values(1, 'Primeira Linha >> Nome 2', 'F')
INSERT INTO cad_consultor(IdPatrocinador, Nome, Sexo) values(6, 'Segunda Linha >> Nome 2.2', 'M')

SELECT

1	0	Grupo Eagle Ltda	 
2	1	Primeira Linha >> Nome 1	M
3	2	Segunda Linha >> Nome 1.1	F
4	3	Terceira Linha >> Nome 1.1.1	F
5	4	Quarta Linha >> Nome 1.1.1.1	F
6	1	Primeira Linha >> Nome 2	F
7	6	Segunda Linha >> Nome 2.2	M

Até mais,

Compartilhar este post

Link para o post
Compartilhar em outros sites

kania    0

kania
Postado

Ola mr.guardião, fera obrigado pela ajuda, só me tira uma dúvida, ohnde consigo o arquivo <script type="text/javascript" src="library/jquery/jquery.js?ver=1.2.6"></script> em questão?

Compartilhar este post

Link para o post
Compartilhar em outros sites

kania    0

kania
Postado

Guardião, como eu faço para personalizar o seu mneu, para ele ficar como na imagem acima, com formato de escada conforme vai abrindo a TreeView?

Da forma que esta ele desce uma abaixo do outro, não tem como eu saber o nivel da árvore

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos ASP Clássico
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito