3

我已经用外部 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

4

1 回答 1

3

将您的代码更改为：

$.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>

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

于 2013-09-27T08:51:43.830 回答