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

问题描述

我想使用 http://www.jstree.com 的，因为我很高兴与演示包括节点类型和上下文菜单。我的问题是，我不是很清楚如何使用json_data加载从内部jstree节点数据：{AJAX：{...}}。所有这一切我已阅读文档，好像你仍然需要手动定义父数据和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.

我的code是如下：

$('#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
                        };
                    }
        }
    }
})

链接组件/树/的findall'返回所有节点与PARENT_ID = NULL，并在他们自己的所有儿童（有效返回所有节点的数据）的JSON形式如下：

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，可以给我如何得到这个工作，我真的AP preciate它一些建议。此外，随时提出替代方案，如果你觉得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.

编辑：我已经得到了调用和检索数据的路径（原来由鲍尔工作不安装jstree，所以我下载了一个副本，并手动把它放在我的lib），但我我仍无法显示任何数据。在Gurtin原理求节点

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文件夹中（而不是使用破凉亭版）加载后，我不得不把它传递给jstree和中提琴之前进行重组我在服务器端的数据！

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＆GT;加载通过AJAX的所有数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！