当前位置: 首页 > 面试题库 >

使用存储在数组中的替代JSON格式创建动态jstree

郦何平
2023-03-14
问题内容

我可以使用以下JSON格式创建jstree:

$('#using_json_2').jstree({ 'core' : {
'data' : [
   { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
   { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
   { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
   { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
]
} });

但这是静态的。我希望它是动态的;从某种意义上说,行数可以是可变的,并且行属性可以从数组中读取。我不想使用ajax,因为数组中已有数据。


问题答案:

如果希望数据是动态的,则可以使用以下代码初始化jstree:

$('#jstree').jstree({
    'core': {
        'data': arrayCollection
    }
});

其中 ArrayCollection的 是,则为您的动态数组变量。例如,您的arrayCollection可能如下所示:

var arrayCollection = [
    {"id": "animal", "parent": "#", "text": "Animals"},
    {"id": "device", "parent": "#", "text": "Devices"},
    {"id": "dog", "parent": "animal", "text": "Dogs"},
    {"id": "lion", "parent": "animal", "text": "Lions"},
    {"id": "mobile", "parent": "device", "text": "Mobile Phones"},
    {"id": "lappy", "parent": "device", "text": "Laptops"},
    {"id": "daburman", "parent": "dog", "text": "Dabur Man", "icon": "/"},
    {"id": "Dalmation", "parent": "dog", "text": "Dalmatian", "icon": "/"},
    {"id": "african", "parent": "lion", "text": "African Lion", "icon": "/"},
    {"id": "indian", "parent": "lion", "text": "Indian Lion", "icon": "/"},
    {"id": "apple", "parent": "mobile", "text": "Apple IPhone 6", "icon": "/"},
    {"id": "samsung", "parent": "mobile", "text": "Samsung Note II", "icon": "/"},
    {"id": "lenevo", "parent": "lappy", "text": "Lenevo", "icon": "/"},
    {"id": "hp", "parent": "lappy", "text": "HP", "icon": "/"}
];

最后,您的html文件应如下所示:

<html>
    <head>
        <title>JSTree</title>
        <link rel="stylesheet" href="dist/themes/default/style.css" />
        <script src="dist/libs/jquery.js"></script>
        <script src="dist/jstree.js"></script>
        <script>
            $(function() {
                var arrayCollection = [
                    {"id": "animal", "parent": "#", "text": "Animals"},
                    {"id": "device", "parent": "#", "text": "Devices"},
                    {"id": "dog", "parent": "animal", "text": "Dogs"},
                    {"id": "lion", "parent": "animal", "text": "Lions"},
                    {"id": "mobile", "parent": "device", "text": "Mobile Phones"},
                    {"id": "lappy", "parent": "device", "text": "Laptops"},
                    {"id": "daburman", "parent": "dog", "text": "Dabur Man", "icon": "/"},
                    {"id": "Dalmation", "parent": "dog", "text": "Dalmatian", "icon": "/"},
                    {"id": "african", "parent": "lion", "text": "African Lion", "icon": "/"},
                    {"id": "indian", "parent": "lion", "text": "Indian Lion", "icon": "/"},
                    {"id": "apple", "parent": "mobile", "text": "Apple IPhone 6", "icon": "/"},
                    {"id": "samsung", "parent": "mobile", "text": "Samsung Note II", "icon": "/"},
                    {"id": "lenevo", "parent": "lappy", "text": "Lenevo", "icon": "/"},
                    {"id": "hp", "parent": "lappy", "text": "HP", "icon": "/"}
                ];
                $('#jstree').jstree({
                    'core': {
                        'data': arrayCollection
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="jstree"></div>
    </body>
</html>

每当修改arrayCollection时,都必须将arrayCollection重新分配给jstree并以编程方式刷新jstree。



 类似资料:
  • 问题内容: 我正在尝试创建以下内容: 我开始 如何继续动态创建数组(可能会随变量更改)?我似乎没有正确的嵌套数组。 问题答案: 我们的对象数组 与…有关 或使用,它更干净:

  • 我正在从本地存储中检索标题、描述和图像,但我不确定如何动态创建HTML来显示它。它应该在订单标题desc中。和图像。我想把它保存为一个网格,这样当多个人提交时看起来很好?它是JSON数据。

  • 你好,伙计们,我在一个动态存储中学习,我从数组中获得一个数据,并创建一个存储,但如果我试图将列和数据加载到我的网格中,我会得到"未捕获的类型错误:无法读取未定义的属性'getProxy'" 控制器: window.js: });

  • 问题内容: 我需要将一些参数传递给服务器,我需要按照以下格式传递 那么如何在Android中生成这种格式。 我尝试使用如示例5.3中所示的方法,但此行显示错误。任何人都可以帮助解决这个问题。 提前致谢 问题答案: 并不是全部,您想要的输出是JSONObject内的JSONArray和另一个JSONObject内的JSONObject。因此,您可以单独创建它们,然后将它们放在一起。如下。 输出-

  • 如何在一个类中创建和实例化jpa存储库?我现在的情况是,我必须在一个泛型类中为不同的实体创建存储库。 我可以很容易地为Neo4j存储库这样做, 对于JpaRepostory,我检查了留档,发现了这个, 我不确定如何在上面的代码中实例化工厂。 另外,我不能像为Neo4j那样通过指定域类来创建存储库吗?

  • 我试图在plpgsql函数中创建一个带有动态选择查询的数组。不幸的是,我遇到了一个语法错误。 谁能帮帮我吗?以下是函数本身: