javascript - ExtJS -- 将 JSON 数据加载到树面板中

标签 javascript json extjs tree

我有树面板,它将显示所有节点的完整列表,而不是延迟加载格式。我首先发出一个 ajax 请求来获取一些纯数据,将其格式化为完整列表格式,然后我想将其附加到树中。

我的转换 fn 返回 JSON,如下所示:

{
    "text": ".",
    "children": [
        {
            "task": "Project: Shopping",
            "duration": 13.25,
            "user": "Tommy Maintz",
            "iconCls": "task-folder",
            "expanded": true,
            "children": [
                {
                    "task": "Housewares",
                    "duration": 1.25,
                    "user": "Tommy Maintz",
                    "iconCls": "task-folder",
                    "children": [
                        {
                            "task": "Kitchen supplies",
                            "duration": 0.25,
                            "user": "Tommy Maintz",
                            "leaf": true,
                            "iconCls": "task"
                        },
                        {
                            "task": "Groceries",
                            "duration": 0.4,
                            "user": "Tommy Maintz",
                            "leaf": true,
                            "iconCls": "task",
                            "done": true
                        },
                        {
                            "task": "Cleaning supplies",
                            "duration": 0.4,
                            "user": "Tommy Maintz",
                            "leaf": true,
                            "iconCls": "task"
                        },
                        {
                            "task": "Office supplies",
                            "duration": 0.2,
                            "user": "Tommy Maintz",
                            "leaf": true,
                            "iconCls": "task"
                        }
                    ]
                },
                {
                    "task": "Remodeling",
                    "duration": 12,
                    "user": "Tommy Maintz",
                    "iconCls": "task-folder",
                    "expanded": true,
                    "children": [
                        {
                            "task": "Retile kitchen",
                            "duration": 6.5,
                            "user": "Tommy Maintz",
                            "leaf": true,
                            "iconCls": "task"
                        },
                        {
                            "task": "Paint bedroom",
                            "duration": 2.75,
                            "user": "Tommy Maintz",
                            "iconCls": "task-folder",
                            "children": [
                                {
                                    "task": "Ceiling",
                                    "duration": 1.25,
                                    "user": "Tommy Maintz",
                                    "iconCls": "task",
                                    "leaf": true
                                },
                                {
                                    "task": "Walls",
                                    "duration": 1.5,
                                    "user": "Tommy Maintz",
                                    "iconCls": "task",
                                    "leaf": true
                                }
                            ]
                        },
                        {
                            "task": "Decorate living room",
                            "duration": 2.75,
                            "user": "Tommy Maintz",
                            "leaf": true,
                            "iconCls": "task",
                            "done": true
                        },
                        {
                            "task": "Fix lights",
                            "duration": 2.75,
                            "user": "Tommy Maintz",
                            "leaf": true,
                            "iconCls": "task",
                            "done": true
                        },
                        {
                            "task": "Reattach screen door",
                            "duration": 2,
                            "user": "Tommy Maintz",
                            "leaf": true,
                            "iconCls": "task"
                        }
                    ]
                }
            ]
        },
        {
            "task": "Project: Testing",
            "duration": 2,
            "user": "Core Team",
            "iconCls": "task-folder",
            "children": [
                {
                    "task": "Mac OSX",
                    "duration": 0.75,
                    "user": "Tommy Maintz",
                    "iconCls": "task-folder",
                    "children": [
                        {
                            "task": "FireFox",
                            "duration": 0.25,
                            "user": "Tommy Maintz",
                            "iconCls": "task",
                            "leaf": true
                        },
                        {
                            "task": "Safari",
                            "duration": 0.25,
                            "user": "Tommy Maintz",
                            "iconCls": "task",
                            "leaf": true
                        },
                        {
                            "task": "Chrome",
                            "duration": 0.25,
                            "user": "Tommy Maintz",
                            "iconCls": "task",
                            "leaf": true
                        }
                    ]
                },
                {
                    "task": "Windows",
                    "duration": 3.75,
                    "user": "Darrell Meyer",
                    "iconCls": "task-folder",
                    "children": [
                        {
                            "task": "FireFox",
                            "duration": 0.25,
                            "user": "Darrell Meyer",
                            "iconCls": "task",
                            "leaf": true
                        },
                        {
                            "task": "Safari",
                            "duration": 0.25,
                            "user": "Darrell Meyer",
                            "iconCls": "task",
                            "leaf": true
                        },
                        {
                            "task": "Chrome",
                            "duration": 0.25,
                            "user": "Darrell Meyer",
                            "iconCls": "task",
                            "leaf": true
                        },
                        {
                            "task": "Internet Explorer",
                            "duration": 3,
                            "user": "Darrell Meyer",
                            "iconCls": "task",
                            "leaf": true
                        }
                    ]
                },
                {
                    "task": "Linux",
                    "duration": 0.5,
                    "user": "Aaron Conran",
                    "iconCls": "task-folder",
                    "children": [
                        {
                            "task": "FireFox",
                            "duration": 0.25,
                            "user": "Aaron Conran",
                            "iconCls": "task",
                            "leaf": true
                        },
                        {
                            "task": "Chrome",
                            "duration": 0.25,
                            "user": "Aaron Conran",
                            "iconCls": "task",
                            "leaf": true
                        }
                    ]
                }
            ]
        }
    ]
}

现在我要做的就是获取此 JSON 并将其添加到树存储中。对于常规 Ext.data.Store,我可以简单地使用 store.loadData() 方法,但树存储不存在这样的方法。

我尝试了treeStore.setRootNode(),我将上面的JSON传递给它,它附加了根节点,但不附加它的任何子节点。

谢谢。

最佳答案

方法就在那里。

load( [options] )

Loads the passed node (defaulting to the root node) using the configured proxy.

Be aware that it is not usually valid for a developer to call this method on a TreeStore.

TreeStore loads are triggered by a load request from an existing tree node, when the node is expanding, and it has no locally defined children in its data.
Parameters

    options : Object (optional)

    config object. This is passed into the Operation object that is created and then sent to the proxy's Ext.data.proxy.Proxy.read function. The options can also contain a node, which indicates which node is to be loaded. If not specified, it will default to the root node.
        node : Ext.data.NodeInterface (optional)

        The tree node to load. Defaults to the store's root node

Fires

    beforeload

Overrides: Ext.data.Store.load

http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.data.TreeStore-method-load

关于javascript - ExtJS -- 将 JSON 数据加载到树面板中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32211412/

相关文章:

javascript - 如何使用javascript从标签标签中获取文本?

ruby-on-rails - Rails 以 JSON 格式返回所有 404 和 500 错误

EXTJS TextField 帮助在侧

Extjs 网格通过搜索参数从提交加载

javascript - 将字段值设置为树 Extjs 中所选记录的值

javascript - "No ' Access-Control-Allow-Origin ' is present on the requested resource"css 文件错误

javascript - 工具提示中的多个对象处理

javascript - Firebase 持久性 - onDisconnect 与多个浏览器窗口

c# - ASP.NET MVC 在发送状态为 500 的响应时显示错误页面

java - gRPC + Bazel + Envoy Json Proxy - 如何导入 google/api/annotations.proto