Dojo:将 JSON 数据从本地文件(使用 HTTP)加载到 Dijit 树中

file snapshot_report_js.js：

require([
    "dojo/dom",
    "dojo/json",
    "dojo/store/Memory",
    "dijit/tree/ObjectStoreModel",
    "dijit/Tree",
    "dojo/text!http://localhost:8080/dojo/json_data/snapshot.json",
    "dojo/domReady!",
    "dojo/_base/json"
], function(dom, json, Memory, ObjectStoreModel, Tree, small){
    var stringfied_content = JSON.stringify(small)
    var json_parsed_data = JSON.parse(stringfied_content, true)
    var json_data = dojo.toJson(json_parsed_data);
    // set up the store to get the tree data
    var json_store = new Memory({
        data: [ json_data ],
        getChildren: function(object){
            return object.children || [];
        }
    });
    // Create the model
    var snapshot_treeModel = new ObjectStoreModel({
        store: json_store,
        query: {id: 'snapshot'}
    });
    var snapshot_tree = new dijit.Tree({
        model: snapshot_treeModel
    }, 'div_snapshot_tree');
    snapshot_tree.startup();  
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Snapshot</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<!-- load Dojo -->
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="js/snapshot_report_js.js"></script>
</head>
<body class="claro">
<div id="div_snapshot_tree"></div>
</body>
</html>

JSON 文件：

{
    "snapshot_metadata": {
            "report_end_at": "2017-10-11 02:03:36", 
            "environment_name": "DVINST", 
            "report_start_at": "2017-10-11 01:55:42"
    },
    "versions": [
        {
            "id": "version_001",
            "instances": [
                {
                    "instance_name": "instance1", 
                    "instance_create_date": "2017-09-18 00:17:52", 
                    "connected_site_count": 4, 
                    "admin_server": "t3://tserver:18300", 
                    "instance_id": 2411, 
                    "instance_type": "OSVC", 
                    "instance_created_by": "None", 
                    "site_capacity": 2, 
                    "sites": [
                            {
                            "site_db_id": 395, 
                            "site_name": "zzzz_178", 
                            "site_users": "uc1,uc2,uc3", 
                            "site_id": 89492, 
                            "site_owner": "owner1", 
                            "site_db_name": "site_server2"
                            },
                            {
                            "site_db_id": 395, 
                            "site_name": "site2", 
                            "site_users": "u1, u2, u3", 
                            "site_id": 90447, 
                            "site_owner": "u2", 
                            "site_db_name": "site_server3"
                            }
                    ]
                }
            ]
        }
    ],
    "servers": [
        {
            "status": null, 
            "server_id": 13, 
            "server_name": "db1", 
            "server_type": "database", 
            "mount_points": [], 
            "sites": [], 
            "db_connections_count": 6, 
            "health": null, 
            "admin_servers": null, 
            "db_sites_connected_count": null
        }
    ]
}

控制台上的错误：

dojo.js：8 未捕获的错误：dijit.tree.ObjectStoreModel：根查询返回 0 个项目，但必须在 Object 中只返回一个项目。
（ObjectStoreModel.js.uncompressed.js：86） at dojo.js：8 at when
（dojo.js：8） at Object.getRoot
（ObjectStoreModel.js.uncompressed.js：82） at Object._load
（Tree.js.uncompressed.js：897） at Object.postCreate
（Tree.js.uncompressed.js：844） at Object.create
（_WidgetBase.js.uncompressed.js：453） at Object.postscript
（_WidgetBase.js.未压缩.js：366）在新的（Dojo.js：8）
在 snapshot_report_js.js：178

我看不出这里有什么问题，有人可以帮忙吗？

乍

一看，您的ObjectStoreModel正在尝试查找树的根对象，并且按照您的指定，它应该具有等于snapshot的属性id; JSON 中没有任何内容与该查询匹配。

其次，JSON 数据应该带来树结构的内容，而 JSON 是非结构化的;请参阅 ObjectStoreModel 示例树数据的外观。如果您有自定义数据结构，则需要将其转换为树小部件通过其模型使用。

相关内容

最新更新

热门标签：