1

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

我的代码如下：

$('#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 的所有节点及其中的所有子节点（有效地返回所有节点数据），如下所示：

[{"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 解决方案，请随时提出替代方案。

编辑：我已经获得了调用和检索数据的路线（结果是 bower 安装的 jstree 不起作用，所以我下载了一个副本并将其手动放入我的库中），但我仍然无法显示任何数据。中的元素“节点”

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

只是返回-1（即使我的萤火虫控制台显示了上面检索到的所有数据）并且我实际上并没有获取数据。我不确定这应该如何工作......

4

1 回答 1

0

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

于 2013-10-11T12:26:27.153 回答