JQ 트리가 제대로 렌더링되지 않습니다.

Question

트리 구조에서 아이 패 스를로드하려고하는 JQ 트리가 있습니다.

나는 에서 호출되는 LoadTree() 메서드를 가지고 있으며이 메서드는 DisplayName과 같은 속성을 가진 객체 목록을 가져 오는 아약스 호출을 만듭니다. 결과 데이터 내가 바인딩 할 데이터 문자열을 만드는 오전 반복함으로써

. 그러나 데이터를 바인딩 할 때 데이터가 제대로 렌더링되지 않고 모두 한 줄당 하나의 문자로 렌더링됩니다.

는 this image를 참조하십시오

function LoadTree() { 
    var jsonData = '['; 
    //var finalData = ""; 
    $.ajax({ 
     type: "POST", 
     url: "@this.FullyQualified("/Metrics/LoadAreaPaths")", 
     async: false, 
     dataType: "json", 
     success: function (resultData) { 

      for (var i = 0; i < resultData.TreeViewModels.length; i++) { 
       jsonData += '{ label:' + "'" + 
        resultData.TreeViewModels[i].DisplayName + "'" + ','; 
       //children 
       jsonData += 'children: [{ label: ' + "'" + 'child3' +"'"+ '}]' 
       //last bracket 
       jsonData += '},' 
      } 
      jsonData += '];'; 
      //finalData = jQuery.parseJSON(resultData); 
     } 
     //debugger; 

    }); 

    $('#tree1').tree({ 
     data: jsonData 
    }); 

} 

어떤 도움을 크게 감상 할 수 있습니다.

Answer 1

당신은 콜백 함수 내부의 트리를 초기화해야한다. 문자열 대신 자바 스크립트 객체를 제시해야합니다.

function LoadTree() { 
    var jsonData = '['; 

    $.ajax({ 
     type: "POST", 
     url: "@this.FullyQualified("/Metrics/LoadAreaPaths")", 
     async: false, 
     dataType: "json", 
     success: function (resultData) { 

      for (var i = 0; i < resultData.TreeViewModels.length; i++) { 
       jsonData += '{ label:' + "'" + 
        resultData.TreeViewModels[i].DisplayName + "'" + ','; 
       //children 
       jsonData += 'children: [{ label: ' + "'" + 'child3' +"'"+ '}]' 
       //last bracket 
       jsonData += '},' 
      } 
      jsonData += '];'; 

      var finalData = jQuery.parseJSON(jsonData); 

      $('#tree1').tree({ 
       data: finalData 
      }); 
     } 


    }); 
} 

Answer 2

구성하는 데이터가 잘못되었습니다. success 콜백 내부에 작성된 코드 대신 아래에서 사용하십시오. [을 시작하지 않고 배열을 구성하고 있습니다. 배열로 문자열을 반복하려고하므로 각 문자를 배열 항목으로 간주하므로 각 문자에 대해 새로운 행이 생성됩니다. 그리고 그것은 배열을 만드는 좋은 해결책이 아닙니다.

var jsonData = [], src = resultData.TreeViewModels; 
for (var i = 0, l = src.length; i < l; i += 1) { 
    jsonData.push({ 
     label: resultData.TreeViewModels[i].DisplayName, 
     children: [{ 
      label: "child3" 
     }] 
     }); 
    } 
    $('#tree1').tree({ 
     data: jsonData 
    });