jquery - JQ 树未正确渲染

Question

我有一个 JQ 树，我试图在树结构中加载区域路径。

我有LoadTree()方法调用 fromdocument.ready并且此方法进行 ajax 调用，该调用获取对象列表（具有类似的属性DisplayName）。

通过循环结果数据，我正在创建要绑定的数据字符串。但是，当我绑定数据时，数据无法正确呈现，它们都会每行呈现一个字符。

参考这张图片：

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