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

【问题标题】：kendo ui treeview with json speed issue带有 json 速度问题的剑道 ui 树视图
【发布时间】：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

标签： jquery ajax json kendo-ui kendo-treeview

【解决方案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 人员说出最后一句话。