Question

对于一个项目，我正在尝试创建一个支持Ajax的树视图控件。我的ajax脚本在后端工作正常，但树没有正确显示。当我将ajax响应硬编码到我的树容器中时，它会正确显示：

correct

但是，当我尝试通过ajax加载树时，我得到了这个：

incorrent

这是我的JS代码：

$(document).ready(function() {
    function customMenu(node) {
        var items = {
            createItem : {
                label : "Generate random number(s)",
                action: function() {
                    console.log("Creating children...");
                    var selectedId = $("#treeview").jstree("get_selected").attr("id");

                    $.ajax({
                        type: "GET",
                        contentType: "application/json; charset=utf-8",
                        url: "libs/add.php",
                        data: "fact_id=" + selectedId,
                        dataType: "json",
                        success: function(data) {
                            console.log(data);
                        }
                    });
                }
            }
        }

        return items;
    }

    $("#treeview").jstree({
        "plugins" : ["themes", "html_data", "ui", "crrm", "contextmenu"], contextmenu: {items: customMenu, select_node: true}
    });

    $.ajax({
        url: "libs/display.php",
        dataType: "json"
    }).success(function(data) {
        $("#treeview ul").append(data);
    });
});

有谁知道我的问题是什么？任何帮助将不胜感激。

修改仔细观察后，我意识到确切的问题是，当通过ajax调用时，没有将必要的类添加到子节点。不过，我不确定为什么。

另一个编辑 display.php现在包含此回复文字：

[
    {
        "attr": {
            "id": 1
        },
        "data": 649,
            "state": "closed"
    },
    {
        "attr": {
            "id": 1
        },
       "data": 108,
       "state": "closed"
    },
    {
        "attr": {
            "id": 1
         },
        "data": 86,
        "state": "closed"
    },
    {
        "attr": {
            "id": 1
        },
        "data": 46,
        "state": "closed"
     }
]

我是朝着正确的方向前进的吗？

Answer 1

是否包含样式表，是否为图标设置了正确的URL？在我看来，这就是为什么你的数据没有被设计样式。然而，查看您的代码，更可能的原因是您没有获得样式是因为您只是在jsTree范围之外调用任意AJAX调用。

对于jsTree，

Take a look at the docs for the json_data plugin。如果您正确设置display.php以仅获取 jsTree正在请求的节点，则它易于使用。它将进行并发调用并获得所需的节点，您的脚本只需要为它们提供服务：

$("#treeview").jstree({
    "plugins" : ["themes", "html_data", "ui", "crrm", "contextmenu"],
    "contextmenu": {
        items: customMenu,
        select_node: true
    },
    "json_data": {
        "ajax": {
            "url": "libs/display.php",
            "data": function(n) {
                return { id : n.attr ? n.attr("id") : 0 
            }                        
        }
    }
});

json_data插件基本上充当jQuery AJAX调用的包装器，但事件直接绑定到jsTree核心，返回的结果由jsTree处理。您可能需要稍微调整一下您的返回值，具体取决于display.php响应的内容，以及您将树设置为结构上的内容。

修改

这是一篇可能对您有所帮助的帖子： jsTree and AJAX > Load all data via ajax

如何让jstree与ajax加载的内容一起正常工作

1 个答案: