如何扩展 kendo ui treeview 第一项及其子项答案

【问题标题】：How to expand kendo ui treeview first item and its child first item如何扩展 kendo ui treeview 第一项及其子项
【发布时间】：2013-07-09 14:18:45
【问题描述】：

我想扩展 kendo ui 树视图的第一项及其第一个子项。我已经在数据绑定中编写了代码，例如

 $("#treeview").data("kendoTreeview").expand("li:first");
 $("#treeview").data("kendoTreeview").expand("li:first").children(".k-group");

但只是扩展第一项。不是展开项的第一个子项。我如何在剑道 ui 中做到这一点

【问题讨论】：

你是否使用loadOnDemand 如果是这样，这并不容易，因为当你扩展父级时，它开始加载子级，只有当子级加载时，你才能扩展它以获得盛大-儿童。
@OnaBai 是的，我正在使用 loadondemand。当使用按需加载和不使用按需加载时，我该如何做到这一点
仅当我使用“kendoTreeView”时才对我有用，在视图中带有大写的“V”。

标签： jquery kendo-ui kendo-treeview

【解决方案1】：

如果您按需加载数据（例如，通过 AJAX 调用），问题是执行以下行时第二个节点（第一个子节点的第一个子节点）不存在：

$("#treeview").data("kendoTreeView").expand("li:fist li:first")

要实现这一点，您必须在第一个 expand() 完成执行后立即执行该行。

我看到两个选项：

通过使用 kendoTree 事件
通过使用 setTimeout（丑陋的方式）

广告 1。

var yourTreeSelector = "#youTreeId";
var $tree = $(yourTreeSelector);
var treeView = $tree.data("kendoTreeView");

var $firstItem = $tree.find(' > ul > li.k-item:first');

console.log($firstItem);
//make sure selector is ok and first item exists
if($firstItem.length){
   treeView.expand($firstItem); //expand first item
   var secondSelectedFlag = false; //init flag to false

   //handler method
   selectSecond = function(){
      var $fistChildOfFirstItem = $firstItem.find(' > ul > li.k-item:first');
      console.log($fistChildOfFirstItem);
      //make sure expand will execute only when node exists and was not expanded earlier
      if(!secondSelectedFlag && $fistChildOfFirstItem.length){
          secondSelectedFlag = true; 

          treeView.expand($fistChildOfFirstItem);//expand on selected node
          treeView.unbind("dataBound");//unbind method
      }  
   }

   treeView.bind("dataBound", selectSecond);//bind a handler method to dataBound event
}

广告2.展开第一个节点后放置如下代码：

setTimeout(
    function (){
        var $fistChildOfFirstItem = $firstItem.find(' > ul > li.k-item:first');
        console.log($fistChildOfFirstItem);
        treeView.expand($fistChildOfFirstItem);
    },
    3000 //3 seconds is reasonable amount of time
);

【讨论】：

【解决方案2】：

$("#treeview").data("kendoTreeView").expand("li:first"); // expands first child
$("#treeview").data("kendoTreeView").expand("li:first li:first"); // expands first child or the first child

【讨论】：

【解决方案3】：

声明一个全局变量

var counter = 2;

现在在树的数据绑定事件中

if(counter > 0) {
$("#treeview").data("kendoTreeView").expand('.k-item:first');
$("#treeview").data("kendoTreeView").expand('.k-item:first .k-item:first');
counter = counter - 1;
}

【讨论】：

最好能说明投反对票的原因是什么。此外，这是一个旧答案。