gpt4 book ai didi

javascript - 使用缓存在 Kendo UI Treeview 中延迟加载

转载 作者:数据小太阳 更新时间:2023-10-29 04:38:46 25 4
gpt4 key购买 nike

我正在使用 Kendo UI TreeView 在我的网页中加载分层数据。默认情况下,我最多加载 3 个级别的数据(即 Root -> Root directs -> Root directs' directs)。当用户进一步向下扩展树时,我需要一种方法来延迟加载剩余的节点。另外,已经获取的数据必须缓存在本地,以避免对已经扩展的节点进行不必要的调用。我是 Kendo UI 的新手,没有足够的时间阅读文档。 json 看起来像

   {
Id: '1',
ParentId: '-1',
Payload: {... }
Children: [
Id: '2',
ParentId: '1',
PayLoad: {...},
Children: [{...}]
]
....
}

有人可以指出代码示例吗? Kendo 支持开箱即用的上述内容有多少?

提前致谢。

最佳答案

开箱即用配置不支持该功能,但可以通过自定义传输实现。以下是如何创建混合数据源,如果项目可用,则使用 localData 数组,否则将向服务器执行请求。

var localData = [
{ id: 1, text: "Node 1", hasChildren: true, items: [
{ id: 101, text: "Node 1.1", hasChildren: true, items: [
{ id: 10101, text: "Node 1.1.1" }
] }
] },
{ id: 2, hasChildren: true, text: "Node 2" },
{ id: 3, hasChildren: true, text: "Node 3" }
];

function get(data, id) {
if (!id) {
return data;
} else {
for (var i = 0; i < data.length; i++) {
if (data[i].id == id) {
return data[i].items;
} else if (data[i].items) {
var result = get(data[i].items, id);
if (result) return result;
}
}
}
}

var homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: function (options) {
var id = options.data.id;
var data = get(localData, id);
if (data) {
options.success(data);
} else {
// mock call to server with static data
// you can use $.ajax() and call options.success(data) on success
setTimeout(function() {
options.success([
{ id: id + 1, text: "Remote node 1", hasChildren: false },
{ id: id + 2, text: "Remote node 2", hasChildren: true }
]);
}, 1000);
}
}
},
schema: {
model: {
id: "id"
}
}
});

$("#tree").kendoTreeView({
dataSource: homogeneous
});
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script>
<div id="tree"></div>

关于javascript - 使用缓存在 Kendo UI Treeview 中延迟加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20470822/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com