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

Question

我想扩展kendo ui treeview第一项及其第一个孩子。我已经在数据包中编写了代码

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

但正在扩大第一项。不是展开项目的第一个孩子。我怎么能在剑道ui做到这一点

Answer 1

声明一个全局变量

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

Answer 2

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

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

要实现这一点，必须在第一次expand（）完成执行后执行该行。

我看到两个选择：

1. 通过使用kendoTree事件
2. 通过使用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
);

Answer 3

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