Question

我正在使用kendo UI树视图。在click事件中，我调用方法（对于createJson数据），该方法更新了json数据并提供给树视图数据。

每当我创建json数据。如果是偶数时间（2,4,8 ..），Treeview显示正确。但如果它很奇怪，树视图没有加载仍显示加载消息

net=[]
$(function(){
treeForm(net);
    $(document).on("click", "#siteCreation", function(event){
        addSite(net);   
    });
});

更新json的功能

function addSite(net){
// Update the json
treeForm(net)
}

树的创建

function treeForm(net){
        var viewModel = new kendo.data.HierarchicalDataSource({
            data:net,
           });

        var treeview = $("#tree").kendoTreeView({
            dataSource: viewModel,
            dataTextField: ["UID"],
            loadOnDemand: false
        }).data("kendoTreeView");
    }

这里甚至时间更新json正在工作，但不是在奇怪的时间。

Answer 1

问题是你在同一个DOM元素上多次初始化kendoTreeView并且这是不正确的。

由于您唯一需要的是更新数据，您应该检查元素kendoTreeView中是否已有tree，如果是，则更新数据。

类似的东西：

  function treeForm(net){
    // Get the Kendo TreeView object
    var treeview = $("#tree").data("kendoTreeView");
    // Check if exists
    if (treeview) {
      // If exists update the data
      treeview.dataSource.data(net);
    } else {
      // if does not exist then create the HierarchicalDataSource and the TreeView
      var viewModel = new kendo.data.HierarchicalDataSource({
        data:net,
      });

      treeview = $("#tree").kendoTreeView({
        dataSource: viewModel,
        dataTextField: ["UID"],
        loadOnDemand: false
      }).data("kendoTreeView");
    }

显示解决方案的可运行代码段

＆＃13;

$(document).ready(function() {
  net=[
    { UID : "node1" },
    { UID : "node2" },
    { UID : "node3" }
  ];
  treeForm(net);
  $(document).on("click", "#siteCreation", function(event){
    addSite(net);   
  });

  function addSite(net){
    // Update the json
    net=[
      { UID : "node1" },
      { UID : "node2" },
      { UID : "node3" },
      { UID : "node4" }
    ];
    treeForm(net)
  }

  function treeForm(net){
    var treeview = $("#tree").data("kendoTreeView");

    if (treeview) {
      treeview.dataSource.data(net);
    } else {
      var viewModel = new kendo.data.HierarchicalDataSource({
        data:net,
      });

      treeview = $("#tree").kendoTreeView({
        dataSource: viewModel,
        dataTextField: ["UID"],
        loadOnDemand: false
      }).data("kendoTreeView");
    }
  }
});

＆＃13;

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

<button id="siteCreation" class="k-button">Create</button>
<div id="tree"></div>

＆＃13;

Kendo UI Treeview的JSON未更新。正在加载

1 个答案: