2010-07-02 2 views
0

json 데이터에서 트리를 만들려고하는데,이 데이터는 PHP 파일에서 필요할 때로드됩니다. 내 문제는 내가 lvl 3에 갈 길을 찾을 수 없다는 것이다.). 여기 내 코드는 다음과 같습니다.

 $(document).ready(function() 
     { 
     //Get the screen height and width 
     var Height = $(document).height()/2; 
     var Width = $(window).width()/2; 

     $("#div1").hide(); 
     $("#div2").hide('slow'); 
     $.ajax(
     { 
      type: 'post', 
      async: true, 
      url: "getparents.php", 
      data: {'id' : 12200}, 
      dataType: "json", 
      cache: false, 
      beforeSend: function() 
      { 
       //Show the Loading GIF at centered position 
       $('#loading').css({'top': Height, 'left': Width}).show(); 
      }, 
      success: function(json_data) 
      { 
       $("#div1").empty().show(); 
       $('<ul class="parentContainer"></ul>').appendTo("#div1"); 
       $.each(json_data, function(key, object) 
       { 
        $('<li id="node">'+object.name+'</li>').data('id', object.id).appendTo(".parentContainer"); 
        if (object.childbool == true) 
        { 
         $('li:last').addClass('childfull') 
        } 
       }); 
      }, 
      error: function() 
      { 
       $('#loading').hide(); 
       alert('Something Went Wrong with the Loading please hit back in a minute'); 
      }, 
      complete: function() 
      { 
       $('#loading').hide(); 
      } 
     }); 

     function getChild(id, node) 
     { 
      $.ajax(
      { 
       type: 'post', 
       async: true, 
       url: "getchilds.php", 
       data: {'id' : id}, 
       dataType: "json", 
       cache: false, 
       beforeSend: function() 
       { 
        $('#loading').show(); 
       }, 
       success: function(json_data) 
       { 
        $('<ul class="childContainer"></ul>').appendTo(node); 
        $.each(json_data, function(key, object) 
        { 
         $('<li id="node">'+object.name+'</li>').data('id', object.id).appendTo(".childContainer"); 
         if (object.childbool == true) 
         { 
          $('li:last').addClass('childfull') 
         } 
        }); 
       }, 
       error: function() 
       { 
        $('#loading').hide(); 
        alert('Something Went Wrong with the Loading please hit back in a minute'); 
       }, 
       complete: function() 
       { 
        $('#loading').hide(); 
       } 
      }); 
     } 

     $("li.childfull, li.openchildfull").live('click',function() 
     {  
      if ($('li.childfull')) 
      { 
       var node = $(this); 
       var id= $(this).data('id'); 
       $(node).html(getChild(id, node)); 
       $(node).removeClass().addClass('openchildfull'); 
      } 
      else 
      { 
       $(node).removeClass().addClass('childfull'); 
       $(node).children().remove(); 
      } 
     }); 
    }); 

나는 .live가 나를 죽이고 있다고 생각합니다. 부모님이 짐을 갖게됩니다. 내가 하나를 클릭하면 나는 그 아이들을 아주 좋고 잘 보냅니다.하지만 아이를 낳기 위해 아이를 클릭 할 때 나는 매우 우스운 행동을 취합니다. 나는 자식들을 정확하게 들여 쓰기하지만 class = "childfull"을 가지지 않고 올바른 클래스로 들여 쓰기가되지 않은 다른 사본을 얻습니다. 나는 무엇이 잘못 될지 모른다 ... 어떤 아이디어 나 수정도 환영한다.

P.S : 엉망진창을 클릭하면 어떻게되는지 설명하지 않으려 고합니다. P.

+0

일종의 오래된 스쿨이지만 .live()로 수행되는 모든 작업은 .bind()와 더 깊이 생각할 수 있습니다.) 이것이 내 팁입니다. – naugtur

답변

1

jstree 플러그인을 보면서 자신 만의 나무를 만드는 대신에. json을 포함하여 다른 형식을 전달할 수 있습니다. 완전한 사용자 정의가 가능하며 무한 (가능한 : p) 하위 수준을 허용합니다.