Ir para conteúdo

Arquivado

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

Marcos_imasters

Arvore

Recommended Posts

Bom dia pessoal estou fazendo uma arvore,

 

a cada escada que faço tenho que adiciona manualmente alguem ajudaria a coloca automaticamente?

 

https://jsfiddle.net/aurasistemas/2g3uz5fh/6/

Compartilhar este post


Link para o post
Compartilhar em outros sites
2 horas atrás, wanderval disse:

Porque não usa a biblioteca d3.js?

por que quero tem total controle, pra futuras modificações.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Entendi Marcos,

 

Bom Marcos fiz uma rápida alteração na sua lógica, adicionando um objeto no conceito flat, mas acretido não tenha ficado muito bom, tentei usar o seu metodo de remove, mas não consegui entender o que realmente é esperado pelo metodo, vou deixar aqui um link do fork que fiz da sua implmetação, me da um feedback, mas seu codigo ficou bom.

 

link: https://jsfiddle.net/p3tL1z2d/46/

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
18 horas atrás, wanderval disse:

Entendi Marcos,

 

Bom Marcos fiz uma rápida alteração na sua lógica, adicionando um objeto no conceito flat, mas acretido não tenha ficado muito bom, tentei usar o seu metodo de remove, mas não consegui entender o que realmente é esperado pelo metodo, vou deixar aqui um link do fork que fiz da sua implmetação, me da um feedback, mas seu codigo ficou bom.

 

link: https://jsfiddle.net/p3tL1z2d/46/

 

 

 

sim dei uma olhada aqui ja me deu umas ideias mais tipo tava precisando so de puxa em array ali mesmo pra carregar, vou da uma analisada e ver se melhoro alguma coisa desde ja agredeço

Compartilhar este post


Link para o post
Compartilhar em outros sites
5 horas atrás, Marcos_imasters disse:

sim dei uma olhada aqui ja me deu umas ideias mais tipo tava precisando so de puxa em array ali mesmo pra carregar, vou da uma analisada e ver se melhoro alguma coisa desde ja agredeço

https://jsfiddle.net/aurasistemas/2g3uz5fh/

 

unico erro que ta dando aqui agora que nao esta adicionando na segundo escala

Compartilhar este post


Link para o post
Compartilhar em outros sites

E ai marcos dei uma olhada achei o erro,

 

mude isso  na linha 49 no metodo drawerTree():

var textnode = document.createTextNode(node.nodee);

para

var textnode = document.createTextNode(nodee.data); 

Obs: mesmo com essa correção os demais niveis não iriam ser exibidos, fiz um outro fork e coloquei uma lógica recursiva em cima do array de children que você criou, e adicionei uma classe ".no-link" para os nós que não possuem filhos assim não exibiram a linha de link. da uma olhada;

https://jsfiddle.net/emtfa7h2/

Compartilhar este post


Link para o post
Compartilhar em outros sites
11 horas atrás, wanderval disse:

E ai marcos dei uma olhada achei o erro,

 

mude isso  na linha 49 no metodo drawerTree():


var textnode = document.createTextNode(node.nodee);

para

var textnode = document.createTextNode(nodee.data); 

Obs: mesmo com essa correção os demais niveis não iriam ser exibidos, fiz um outro fork e coloquei uma lógica recursiva em cima do array de children que você criou, e adicionei uma classe ".no-link" para os nós que não possuem filhos assim não exibiram a linha de link. da uma olhada;

https://jsfiddle.net/emtfa7h2/

show mano aqui com essa correção funcionou beleza fiz algumas modificasoes pra nao ocores bug veja acho que agora está funcioanndo beleza. so faltou a funcao de arrastar exemplo puxa a tela.

 

https://jsfiddle.net/aurasistemas/2g3uz5fh/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sobre a exibição dos niveis eu tinha corrigido na função recursiva, somente a correção da linha 49 que mencionei corrigia apenas até o segundo nivel.

 

A respeito de adicionar um "id" acho que ficaria muito melhor, dos exemplos de arvore que já vi é dessa forma que é feito para aproveitar o id vindo do banco, vou passar um link que vi tb talvez te de novas ideias: 

link: https://stackoverflow.com/questions/18017869/build-tree-array-from-flat-array-in-javascript

 

mas não coloque o atributo com o nome "identificador" deixa como "id" mesmo.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
37 minutos atrás, wanderval disse:

Sobre a exibição dos niveis eu tinha corrigido na função recursiva, somente a correção da linha 49 que mencionei corrigia apenas até o segundo nivel.

 

A respeito de adicionar um "id" acho que ficaria muito melhor, dos exemplos de arvore que já vi é dessa forma que é feito para aproveitar o id vindo do banco, vou passar um link que vi tb talvez te de novas ideias: 

link: https://stackoverflow.com/questions/18017869/build-tree-array-from-flat-array-in-javascript

 

mas não coloque o atributo com o nome "identificador" deixa como "id" mesmo.

 

sim mudei aqui agora acho que ta funcionando certinho.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Richard Henrique
      Boa tarde,
       
      Alguem conhece bem de front end? porque estou começando.
       

       
      Meu organograma em css está quebrando, queria deixar ele continuo, sem quebrar, ja tentei colocar overflow-x: auto, e coisas do tipo, mas mesmo assim ele quebra conforme imagem.
       
      Estou usando dentro do container-fluid do bootstrap 4, alguem sabe como solucionar?
       
      Meu css:
       

      <style>

      /*#region Organizational Chart*/
      .tree * {
          margin: auto; padding: 0px;

      }
      .tree ul {
          padding-top: 20px; position: relative;
          -transition: all 0.s;
          -webkit-transition: all 0.5s;
          -moz-transition: all 0.5s;
      }
      .tree li {
          float: left; text-align: center;
          list-style-type: none;
          position: relative;
          padding: 20px 5px 0 0px;
          -transition: all 0.5s;
          -webkit-transition: all 0.5s;
          -moz-transition: all 0.5s;
      }
      /*We will use ::before and ::after to draw the connectors*/
      .tree li::before, .tree li::after{
          content: '';
          position: absolute; top: 0; right: 50%;
          border-top: 2px solid #696969;
          width: 50%; height: 20px;
      }
      .tree li::after{
          right: auto; left: 50%;
          border-left: 2px solid #696969;
      }
      /*We need to remove left-right connectors from elements without 
      any siblings*/
      .tree li:only-child::after, .tree li:only-child::before {
          display: none;
      }
      /*Remove space from the top of single children*/
      .tree li:only-child{ padding-top: 0;}
      /*Remove left connector from first child and 
      right connector from last child*/
      .tree li:first-child::before, .tree li:last-child::after{
          border: 0 none;
      }
      /*Adding back the vertical connector to the last nodes*/
      .tree li:last-child::before{
          border-right: 2px solid #696969;
          border-radius: 0 5px 0 0;
          -webkit-border-radius: 0 5px 0 0;
          -moz-border-radius: 0 5px 0 0;
      }
      .tree li:first-child::after{
          border-radius: 5px 0 0 0;
          -webkit-border-radius: 5px 0 0 0;
          -moz-border-radius: 5px 0 0 0;
      }
      /*Time to add downward connectors from parents*/
      .tree ul ul::before{
          content: '';
          position: absolute; top: 0; left: 50%;
          border-left: 2px solid #696969;
          width: 0; height: 20px;
      }
      .tree li a{
          height: auto;
          width: auto;
          padding: 5px 10px;
          text-decoration: none;
          background-color: white;
          color: #8b8b8b;
          font-family: arial, verdana, tahoma;
          font-size: 11px;
          display: inline-block;  
          box-shadow: 0 1px 2px rgba(0,0,0,0.1);
          -transition: all 0.5s;
          -webkit-transition: all 0.5s;
          -moz-transition: all 0.5s;
      }
      /*Time for some hover effects*/
      /*We will apply the hover effect the the lineage of the element also*/
      .tree li a:hover, .tree li a:hover+ul li a {
          background: #cbcbcb; color: #000;
      }
      /*Connector styles on hover*/
      .tree li a:hover+ul li::after, 
      .tree li a:hover+ul li::before, 
      .tree li a:hover+ul::before, 
      .tree li a:hover+ul ul::before{
          border-color:  #94a0b4;
      }
      .center {
          margin: auto;
          width: 50%;
          padding: 80px;
      }
      /*#endregion*/
      </style>
       
      Um trecho do meu html:
       
      <div class="tree">
                                      <ul>
                                          <li style="padding: 20px 202px 10px 201px !important">
                                          </a>
                                          <br>
                                          <br>
                                          <a href="#">
                                              <div class="container-fluid">
                                                  <div class="flex-row">
                                                      <?php
                                                      $status = 4;
                                                      try {
                                                          $listaSquad=new Organograma();
                                                          $listaSquad->status=$status;
                                                          $resultado=$listaSquad->listarOrganograma($status);    
                                                      } catch ( Exception $e ) {
                                                          Erro::trataErro( $e );
                                                      }
                                                      ?>     
                                                      PRODUTO
                                                  </div>
                                                  <div class="row" style="margin-top: 35px;">
                                                      <i class="fa fa-exclamation-circle fa-2x"></i>
                                                  </div>
                                              </div>
                                          </a>
                                          <ul>
                                              <li  style="padding: 20px 202px 10px 201px !important">
                                                  <a href="#">
                                                      <div class="container-fluid">
                                                          <div class="flex-row">        
                                                              DESENVOLVIMENTO
                                                          </div>
                                                          <div class="row" style="margin-top: 35px;">
                                                              <i class="fa fa-exclamation-circle fa-2x"></i>
                                                          </div>
                                                          <div class="row">
                                                              <?php
                                                              $status = 15;
                                                              try {
                                                                  $listaSquad=new Organograma();
                                                                  $listaSquad->status=$status;
                                                                  $resultado=$listaSquad->listarSeresOrganograma($status);    
                                                              } catch ( Exception $e ) {
                                                                  Erro::trataErro( $e );
                                                              }
                                                              ?>     
                                                          </div>
                                                      </div>
                                                  </a>
                                              </li>
                                          </ul>
                                      </li>
                                  </ul>
                              </div>
       
       
      se alguem puder ajudar, agradeço. valeu
    • Por iraniziomattos
      Boa noite pessoal,
      estou tentando adaptar o plugin easy tree view plugin for jQuery and Bootstrap, no entanto estou tendo problemas na tag <a href> do meu site, pois o link busca o href do plugin onde está javascript: void(0);
      minha dúvida é como fazer para ele pegar o href do meu site e não do plugin??
    • Por jadsonlucena
      Galera, estou a algum tempo tentando estudar essa estrutura, contudo, esse assunto é muito escasso.
      Encontro muito a ideia geral, mas nunca, algo mais detalhado do funcionamento ou um bom e velho pseudo código.
      Alguma boa alma poderia me indicar um bom artigo ou até mesmo disponibilizar um pseudo código?
       
      Ps: Se já existir algo em C++ pronto seria uma boa também.
       
      Grato desde já pela sua ajuda...
×

Informação importante

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