JQ Tree沒有正確渲染

Question

我有一個JQ樹，我試圖在樹結構中加載區域路徑。

我有LoadTree()方法從document.ready調用，並且此方法進行ajax調用，獲取對象列表（具有像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

您應該初始化回調函數中的樹。您還應該提供javascript對象而不是字符串：

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

您構建的數據是錯誤的。使用下面的代碼，而不是在成功回調中寫入的代碼。你正在構造一個沒有開始的數組[。所以它試圖迭代字符串作爲數組，所以它會將每個字符視爲一個數組項，因爲這樣你會爲每個字符獲取新行。這不是構建數組的好方法。

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 
    });