jsTree 和 AJAX >通过ajax加载所有数据 [英] jsTree and AJAX > Load all data via ajax

问题描述

我正在尝试使用 http://www.jstree.com 因为我对演示很满意，包括节点类型和上下文菜单.我的问题是我不太确定如何使用 "json_data": { "ajax": { ... } } 从 jstree 中加载节点数据.我读过的所有文档似乎您仍然需要手动定义父数据，而且 ajax 调用仅适用于延迟加载子节点.

I am trying to use http://www.jstree.com as I am very happy with the demos, including the node types and the context menus. My problem is that I am not quite sure how to load the node data from within jstree using "json_data": { "ajax": { ... } }. All the documentation that I have read seems like you still need to define the parent data manually and the ajax calls are only for lazy-loading children nodes.

我的代码如下:

$('#file_tree').jstree({
    "plugins": ["json_data", "themes", "ui", "crrm", "dnd", "search", "contextmenu"],
    "themes": {"theme": "apple"},
    "ui": {"select_limit": 1, "selected_parent_close": "deselect", "disable_selecting_children": "true", "initially_select": [0]},
    "crrm": {"input_width_limit": "50", "move": {"always_copy": "multitree"}},
    "dnd": {"open_timeout": "700"},
    "search": {},
    "contextmenu": {"select_node": "true"},
    "json_data" : 
    {
        "ajax" : 
        {
            "url" : "{{ url('components/tree/findall') }}",
            // the `data` function is executed in the instance's scope
            // the parameter is the node being loaded
            // (may be -1, 0, or undefined when loading the root nodes)
            "data" : function (node) { 
                    console.info("Nodes:",node);    
                     return {   
                            "operation" : "get_children",
                            "id" : node.attr ? node.attr("id").replace("node_","") : 1
                        };
                    }
        }
    }
})

url 'components/tree/findall' 以 JSON 的形式返回所有 parent_id = NULL 的节点及其所有子节点(有效返回所有节点数据)，如下所示:

the url 'components/tree/findall' returns all nodes with parent_id = NULL and all their children within them (effectively returning ALL node data) in the form of JSON as follows:

[{"id":1,"name":"Static Album 1","type":"folder","children":[{"id":3,"name":"Static Album 1.1","type":"folder","children":[]},{"id":4,"name":"Static Album 1.2","type":"folder","children":[]}]},{"id":2,"name":"Static Album 2","type":"folder","children":[{"id":5,"name":"Static Album 2.1","type":"folder","children":[]},{"id":6,"name":"Static Album 2.2","type":"folder","children":[]}]}]

但是在加载页面时永远不会调用该路由(是的，我确实有一个 id="file_tree" 的 div).如果有人使用过 jsTree 并且可以给我一些有关如何使其工作的建议，我将非常感激.此外，如果您觉得 jsTree 不是树结构的 goto 解决方案，请随时提出替代方案.

But the route is never called upon loading the page (yes, I do have a div with id="file_tree"). If somebody has worked with jsTree and can give me some advise on how to get this working I would really appreciate it. Also, feel free to suggest alternatives if you feel that jsTree is not the goto solution for tree structures.

我已经获得了调用和检索数据的路线(结果是 bower 安装的 jstree 不起作用，所以我下载了一个副本并将其手动放入我的库中)，但我我仍然无法显示任何数据.

I have gotten the route to call and retrieve data (turns out the jstree installed by bower is not working, so I downloaded a copy and placed it in my lib manually), but I am still not able to display any data. The elenent "node" in

"data": function(node) {....

只是返回 -1(即使我的萤火虫控制台显示了如上检索到的所有数据)而我实际上并没有获得数据.我不太确定这应该如何工作...

Is just returning -1 (even though my firebug console shows all the data retrieved as above) and I'm not actually getting the data. I'm not really sure how this should be working...

推荐答案

原来我只是个白痴.通过下载并手动将 jstree 复制到我的 lib 文件夹(而不是使用损坏的 bower 版本)使树实际加载后，我只需要在服务器端重构我的数据，然后再将其传递给 jstree 和 viola！

Turns out I was just being an idiot. After getting the tree to actually load by downloading and manually copying jstree into my lib folder (instead of using the broken bower version), I just had to restructure my data on the server side before passing it to the jstree and viola!

这篇关于jsTree 和 AJAX >通过ajax加载所有数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！