带有 json 速度问题的剑道 ui 树视图

Posted 2023-05-07

技术标签:

【中文标题】带有 json 速度问题的剑道 ui 树视图【英文标题】：kendo ui treeview with json speed issue 【发布时间】：2013-09-27 08:56:48 【问题描述】：

我已经使用外部 json 文件完成了剑道 ui 树

如果我的节点在 200 左右，这可以正常工作

但是如果我有大量数据会花费很多时间

检查这个http://infinitelyinfinite.com/treeview/

这是我的 jQuery 代码

$.getJSON("/testTree.json", function (data) 
    $("#treeview").kendoTreeView(
        dataSource: data
    );
)

这是我的JSON 文件的示例

[
    
        "id"   :100,
        "text" :"Region",
        "items":[
            
                "id"   :1,
                "text" :"Asia",
                "parent_id" :100, 
                "items":[
                    
                        "id"   :2,
                        "text" :"Central Asia",
                        "parent_id" :1, 
                        "items":[
                            
                                "id"  :3,
                                "text":"Afghanistan",
                                "parent_id" :2, 
                            ,
                            
                                "id"  :4,
                                "text":"Azerbaijan",
                                "parent_id" :2, 
                            
                        ]
                    ,
                    
                        "id"   :5,
                        "text" :"East Asia",
                        "parent_id" : 1,
                        "items":[
                            
                                "id"  :6,
                                "text":"China"
                            
                        ]
                    
                ]
            ,
            
                "id"   :7,
                "text" :"Europe",
                "parent_id" :100, 
                "items":[
                    
                        "id"   :8,
                        "text" :"Central Europe",
                        "parent_id" :7, 
                        "items":[
                            
                                "id"   :9,
                                "text" :"Austria",
                                "parent_id" :8, 
                                "items":[
                                    
                                        "id"  :10,
                                        "parent_id" :9, 
                                        "text":"Carinthia"
                                    
                                ]
                            ,
                            
                                "id"   :11,
                                "text" :"Czech Republic",
                                "parent_id" :8, 
                                "items":[
                                    
                                        "id"  :12,
                                        "text":"Carinthia",
                                        "parent_id" :11, 
                                    
                                ]
                            
                        ]
                    
                ]
            
        ]
    
]

有什么办法让它快吗？？？需要一些时间 30S 或 40S

【问题讨论】：

您需要一次加载完整的树吗？你能检索到第一个大陆、地区、国家……吗？这将允许只发送所需的数据，html 渲染会更快。 @Onbai 不，我不想一次加载完整的树，你可以从这里下载我的 json 文件http://infinitelyinfinite.com/treeview/js/region_tree.json 【参考方案1】：

将您的代码更改为：

$.getJSON("/testTree.json", function (data) 
    $("#treeview").kendoTreeView(
        dataSource: 
            data : data
        
    );
);

从对象而不是数组初始化 DataSource 似乎要快得多。

您网站中的代码（经过一些小的清理后）将显示为：

<head>
    <title> Json Tree</title>
    <link href="styles/kendo.common.min.css" rel="stylesheet"/>
    <link href="styles/kendo.default.min.css" rel="stylesheet"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>

<div class="demo-section" style="float:left;">
    <h3 class="title">Select Continents</h3>

    <div id="treeview" class="demo-section"></div>
</div>
<body>
<script type="text/javascript" charset=utf-8>
    //  $(document).ready(function () 
    $.getJSON("/js/region_tree.json", function (data) 
        $("#treeview").kendoTreeView(
            dataSource    : 
                data: data
            ,
            dataTextField : "text",
            dataValueField: "id"
        );
    );

    //  );
</script>
</body>

你也可以这样做：

<script type="text/javascript" charset=utf-8>
    $(document).ready(function () 
        var tree = $("#treeview").kendoTreeView(
            dataTextField : "text",
            dataValueField: "id"
        ).data("kendoTreeView");

        $.getJSON("/js/region_tree.json", function (data) 
            tree.dataSource.data(data);
        );
    );
</script>

在使用getJSON 读取JSON 后，我直接将其分配给树的dataSource。

【讨论】：

如果你不介意我想要这个文档，我可以在剑道 UI 中使用相同的逻辑进行多选吗？？？ bdw 非常感谢你是救世主.... :) 你想要什么样的文件？ AFAIK，这实际上没有记录，而是我在与您“玩”大量数据时发现的。这很可能是对如何处理数据源中的数组和对象造成的某种副作用。但这是只有 KendoUI 开发者才能回答的问题…… 我可以对kendoMultiSelect 使用相同的概念吗？我也想从 json 文件中搜索...？？你可以我不知道结果是否相同。我没有查看 Kendo UI 代码，因此这种速度改进没有记录在案，并且可能在未来的实施中发生变化。在这里，我们应该让一些 Kendo UI 人员说出最后一句话。

以上是关于带有 json 速度问题的剑道 ui 树视图的主要内容，如果未能解决你的问题，请参考以下文章