jsTree e jQuery

Pesquisar este blog

Contribua

Te ajudei? Quer retribuir? PIX de qualquer quantia.

jsTree - Mover para cima

TESTE: jQuery não foi carregado! :(


Selecione um nó filho e clique no botão abaixo:

  • Root node 1
    • Root1 Child1
    • Root1 Child2
    • Root1 Child3
  • Root node 2
    • Root2 Child1
    • Root2 Child2
    • Root2 Child3
  • Root node 3
    • Root3 Child1
    • Root3 Child2
    • Root3 Child3
  • Root node 4
    • Root4 Child1
    • Root4 Child2
    • Root4 Child3
      • Root4 Child1 Child1
      • Root4 Child1 Child2


HTML
<div id="divArvore">
  <ul>
    <li id="root_1">Root node 1 
      <ul>
        <li id="root_1_child_1">Root1 Child1</li> 
        <li id="root_1_child_2">Root1 Child2</li> 
        <li id="root_1_child_3">Root1 Child3</li> 
      </ul> 
    </li>
    <li id="root_2">Root node 2 
      <ul>
        <li id="root_2_child_1">Root2 Child1</li>
        <li id="root_2_child_2">Root2 Child2</li>
        <li id="root_2_child_3">Root2 Child3</li> 
      </ul> 
    </li> 
    <li id="root_3">Root node 3 
      <ul> 
        <li id="root_3_child_1">Root3 Child1</li> 
        <li id="root_3_child_2">Root3 Child2</li> 
        <li id="root_3_child_3">Root3 Child3</li> 
      </ul> 
    </li> 
    <li id="root_4">Root node 4 
      <ul> 
        <li id="root_4_child_1">Root4 Child1</li> 
        <li id="root_4_child_2">Root4 Child2</li> 
        <li id="root_4_child_3">Root4 Child3 
          <ul> 
            <li id="root_4_child_1_child_1">Root4 Child1 Child1</li> 
            <li id="root_4_child_1_child_2">Root4 Child1 Child2</li> 
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div> 
<h2 id="h2Aviso"></h2>


SCRIPT
<script type="text/javascript">            
            $(document).ready(function() {
                
                //Crio instância e passo argumentos para dar permissão para o método move_node.
                $("#divArvore").jstree({
                    'core' : {
                        'check_callback' : function (operation, node, node_parent, node_position) {
                            // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
                            // in case of 'rename_node' node_position is filled with the new node name
                            
                            switch (operation){
                            case "move_node":
                                permissao = true;
                                break;
                            default:
                                permissao = false;
                            }//end switch                            
                            return permissao;
                        }
                    }
                });
                                
                //Quando clicar no 'botão mover para cima'
                $('#buttonMoverCima').on('click', function(){
                    //limpa qualquer aviso dado anteriormente
                    $('#h2Aviso').html('');
                    
                    arrayIDs = $.jstree.reference('#divArvore').get_selected(false);
                    //arrayIDs = $('#divArvore').get_selected(false);
                    
                    if (arrayIDs.length === 0){
                        $('#h2Aviso').html('Por favor, escolha um nó!');
                    }else if(arrayIDs.length > 1){
                        $('#h2Aviso').html('Por favor, escolha somente um nó!');
                    }else{
                        strId = arrayIDs[0];
                        strSeletor = '#' + strId;
                        nodeSelecionado = $(strSeletor);
                                                
                        mover_cima(nodeSelecionado);
                        
                        $('#h2Aviso').html(strSeletor);
                        
                    }//end if
                });
                
                $("#h4Carregamento").html("TESTE: jQuery foi carregado! :)");
            });
            
            //LIMITAÇÃO: Não funciona com nós raiz.
            function mover_cima(nodeMover){
                nodeAnterior = nodeMover.prev();
                if (nodeAnterior.length) {
                    posicao = posicao_node(nodeMover);
                    if (posicao !== 0){
                        posicao--;
                        
                        nodePaiAnterior =  nodeAnterior.parent();
                        
                        //essa função filha da puta só adiciona como filho, quando passado um número :@
                        //então para poder adicionar no mesmo nó, eu pego o pai do nó anterior                                                                                                                
                        $("#divArvore").jstree(true).move_node(nodeMover, nodePaiAnterior, posicao);
                    }//end if
                }//end if                
            }//end function
            
            //Retorna a posição que o nó está
            //IMPORTANTE: Primeiro elemento índice = 0.
            function posicao_node(node){                                
                posicao = -1;
                while (node.length) {
                    posicao++;
                    node = node.prev();
                }//end while
                return posicao;
            }//end function
            
        </script>

















Nenhum comentário:

Postar um comentário