Question

我已经具有如附件所示的树状视图，现在我必须在按钮上单击“展开”，我知道执行“展开”的代码，但是它没有展开完整的子节点，而是仅扩展了一个直接子节点，如果有更多子节点，请帮助我如何单击以展开所有“父和子”节点。这是我的代码：

        $("#expand").on("click", function(){
                var treeview = $("#treeview").data("kendoTreeView");
                    treeview.expand(".k-item");
        })

Answer 1

如果在树视图上调用expand方法，它将折叠所有项目：

var treeview = $("#treeview").kendoTreeView({
    dataSource: {
      data: [{
          text: "Item 1",
          expanded: true,
          items: [
            { 
               text: "Item 1.1", items: [ { text: "Item 1.4" }, { text: "Item 1.5" } ] 
            },
            { 
               text: "Item 1.2", items: [ { text: "Item 1.6" }, { text: "Item 1.7" } ] 
            },
            { 
               text: "Item 1.3", items: [{ text: "Item 1.8", items: [{ text: "Item 1.10" }, { text: "Item 1.11" } ] }, { text: "Item 1.9" } ] }
          ]
        },
        {
          text: "Item 2",
          items: [{ text: "Item 2.1" },
            { text: "Item 2.2" },
            { text: "Item 2.3" }
          ]
        },
        { text: "Item 3" }
      ]
    },
    loadOnDemand: false
  }).data("kendoTreeView"),

  handleTextBox = function(callback) {
    return function(e) {
      if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
        callback(e);
      }
    };
  };
  
$("#expand").click(function() {
  treeview.expand(".k-item");
});

$("#collapse").click(function() {
  treeview.collapse(".k-item");
});

html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }

#wrapper {
    float: left;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}

#expand {
    float:left; /* add this */
    border: 1px solid red;
}

#collapse {
  border: 1px solid green;
  overflow: hidden; /* if you don't want #second to wrap below #first */
}

<!DOCTYPE html>
<html>
<head>
    
    
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
    

</head>
<body>
        <div id="treeview"></div>
        <div id="wrapper">
            <button id="expand" class="button1" >Expand button</button>
            <button id="collapse" class="button2" >Collapse button</button>
        </div>
</body>
</html>

OnClick展开带有所有子节点的Kendo Treeview

1 个答案: