带有缓存的 Kendo UI 树视图中的延迟加载 [英] Lazy load in Kendo UI treeview with caching

问题描述

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

I am using Kendo UI TreeView to load hierarchical data in my webpage. By default, I am loading data upto 3 levels (ie Root -> Root directs -> Root directs' directs). I need a way to lazily load the remaining nodes as user expands further down the tree. Also, the already fetched data must be cached locally to avoid unnecessary calls for already expanded nodes. I am new to Kendo UI and do not have enough time to go through documentation. The json looks like

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

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

Can someone point out to code samples ? How much of the above is supported out of box by Kendo ?

提前致谢.

推荐答案

开箱即用的配置不支持该功能，但可以通过自定义传输实现.下面介绍了如何创建与 localData 数组一起使用的混合数据源(如果项目可用)，否则向服务器执行请求.

That functionality is not supported by the out of the box configuration, but can be achieved through a custom transport. Here's how to create hybrid data sources that work with the localData array if the items are available, and otherwise perform requests to the server.

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>

这篇关于带有缓存的 Kendo UI 树视图中的延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！