Question

我有一个JQ树，我试图在树形结构中加载areapath。

我从LoadTree()调用document.ready方法，此方法进行ajax调用，获取对象列表（具有DisplayName等属性）。

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

enter image description here

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

JQ树无法正确渲染

2 个答案: