jquery - OnClick 展开包含所有子节点的 Kendo Treeview

标签 jquery kendo-ui kendo-treeview

我已经有附件中所示的 Treeview ,现在我必须在单击按钮时展开,我知道执行展开的代码,但它不会展开完整的子节点,而是只执行 1 个直接子节点,如果有的话更多 child ,请帮助我如何实现单击以展开所有父节点和子节点。
这是我的代码:

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

最佳答案

如果您在 treeview 上调用 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>

关于jquery - OnClick 展开包含所有子节点的 Kendo Treeview,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52939376/

相关文章:

jquery - 如何删除浏览器上的空TD

javascript - 循环仅附加到一个元素而不是多个元素

javascript - Kendo UI 下拉列表在 kendoWindow 内不起作用

kendo-ui - 如何在 Kendo-Grid 中使用字符串值对数字进行排序

angularjs - 无法获取 angularjs 中折叠树节点的数据源

javascript - Highcharts 避免工具提示上出现 "jump effect"和 "shared:true"

javascript - HTML CSS如何给元素添加渐变透明度

javascript - 如何从kendo datepicker仅获取年份?

javascript - 获取树节点的所有uid

javascript - 如何根据 Treeview 节点填充网格(复选框选择)?