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

【问题标题】：Kendo UI Treeview's JSON is not updated. Loading in progressKendo UI Treeview 的 JSON 未更新。正在加载
【发布时间】：2014-12-16 08:59:46
【问题描述】：

我正在使用剑道 UI 树视图。在单击事件中，我调用方法（用于 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 正在工作，但不是奇数时间。

【问题讨论】：

标签： jquery json kendo-ui kendo-treeview

【解决方案1】：

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

由于您唯一需要做的就是更新数据，因此您应该查询元素tree 中是否已经存在kendoTreeView，如果存在则更新数据。

类似：

  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");
    }

一个可运行的 sn-p 显示解决方案

$(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");
    }
  }
});

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

【讨论】：