使用缓存在Kendo UI树视图中加载延迟 [英] Lazy load in Kendo UI treeview with caching

问题描述

我正在使用Kendo UI TreeView在我的网页中加载分层数据。默认情况下，我将数据加载到3个级别（即Root - > Root指示 - > Root指示'指示）。当用户进一步向下扩展树时，我需要一种方法来延迟加载剩余的节点。此外，必须在本地缓存已获取的数据，以避免对已扩展的节点进行不必要的调用。我是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屋！