jquery - 如何扩展 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

如果您按需加载数据（例如通过 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 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

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