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

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

转载作者：行者123 更新时间：2023-12-03 22:52:01

25

4

我已经有附件中所示的 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/

25

4

0

文章推荐： jquery - 在拖放时让 Kendo Treeview 复制节点

文章推荐： c# - 只有在 Kendo Treeview 中显示的扩展项目

文章推荐： javascript - 选择一个节点时如何获取dataValueField

kendo-ui - Kendo UI TreeView - 如何将内容从一个 Treeview 复制到另一个 Treeview ？
我在一页上有两个 Kendo UI TreeViews。例如: var data1 = new kendo.data.HierarchicalDataSource({ data: [
treeview - Vuetify treeview - 选择父级而不选择子级
使用 Vuetify 的 TreeView 组件时，我试图能够选择父级没有让它也选择所有的后代( child )。我尝试了可选、可激活等的各种组合……但似乎找不到合适的组合。任何人都有实现这一预
treeview - JavaFX - TreeView 在删除所选项目时的奇怪行为
在我的应用程序中，左侧有一个 TreeView，我根据 TreeView 中的选择更新右侧的 Pane 。一个非常直接的场景。当选择为空时，我会在 Pane 中显示一条类似“请进行选择”的消息，即我还
treeview - Doxygen:如何在 TreeView 中隐藏某些页面
我有一个我自己无法解决的问题。请帮忙。我有(有条件地): /** @mainpage A @subpage B */ /** @page B @subpage C */ /** @page C */
treeview - JDK 8 TreeView 披露三角形垂直对齐不正确
我制作了一个高度为 40 px 的自定义树单元。这里的问题披露三角形没有垂直居中对齐。这里是树单元的代码: public static class TestObjectCell extends A
treeview - 如何使用 TornadoFX TreeView 显示数据
我正在学习如何使用 kotlin 并已开始使用tornadoFX。我正在阅读该指南以尝试学习它，但是我无法弄清楚“具有不同类型的 TreeView”中的含义。似乎是说我应该使用星形投影，据我所知，当您
treeview - Javafx 2 TreeView 过滤
如何在 JavaFX 2 TreeView 中过滤节点？我有一个 TextField，我想根据 TextField 的内容过滤所有节点(例如节点标签)。谢谢。最佳答案这是我编写的可重用的可过滤
treeview - Asp.Net TreeView 具有扩展深度的选定节点
我正在通过查询 sharepoint 用户配置文件构建一个 asp.net TreeView 。要选择的帐户名和根节点帐户名正在从查询字符串中读取。我还需要为树配置可配置的扩展深度。如果节点属于第
treeview - TreeView 中的 TreeItem 选择宽度
我使用的是 JavaFX 8，目前正在进行一些 GUI 开发。我的 TreeView 有点问题，我需要你的帮助。您知道在 TreeView 中是否可以只选择标签而不是 TreeCell 的整个宽度吗
c++ - TreeView 中的分层数据和 TreeView 更新技术
我有很多(分层的)数据显示在 TreeView 中(可能是大约 20K 项或更多，包括子项)。我的数据的特殊问题是 TreeView 中显示的每个对象都可以存在于许多 TreeView 项目中。我的意
treeview - Vala 中的 Gtk.TreeView 可编辑列
有没有什么简单的方法可以让 Gtk.Treeview 在编辑时更新它的列？我基于 Gtk.ListStore 模型构建了 Treeview。我这样初始化单元格: Gtk.CellRendererTe
treeview - 在 TreeView 中更新 JavaFX 节点
我开始使用 javafx。我有一个问题。我有一个树 View ，其中节点通过外部命令改变了他的位置，但它只是看不到树。我必须最小化父级并重新展开才能看到效果。 Altem 对该树 View 的任何建议
kendo-treeview - 取消选择 Kendo Treeview 节点
如何在 Kendo Treeview 中取消选择节点？我尝试从节点中删除类“k-state-selected”。它工作正常，但有没有直接的方法可以做到这一点。最佳答案现在有一种更好的方法可以取消
kendo-treeview - 仅在使用 Kendo Treeview 的子节点上显示复选框
我有以下情况，我有一个带有许多嵌套子节点的父节点。只有父节点应该有一个复选框，我发现的唯一例子是只有子节点有一个复选框。这可以使用 Kendo 模板吗？ http://dojo.telerik.com
kendo-treeview - 带有模板选项的 Angular-Kendo TreeView
我正在尝试向 TreeView 数据项添加一些内联图标，但是 k-template 指令似乎没有呈现任何内容。我基于在线文档在 http://demos.telerik.com/k
javascript - Kendo Treeview - 如何在另一个 Treeview 中显示具有所有父节点的选定节点
我有一个带有复选框和父节点和子节点的 Kendo Treeview 。我需要将选中节点的完整层次结构复制到另一个 Treeview 中。 ex - 根节点、父节点和选中的子节点。下面是我的代码，但
treeview - 删除 JavaFX TreeView 滚动 Pane
我需要在较大的滚动 Pane 中使用 JavaFX 2.2 TreeView 控件，该滚动 Pane 具有多个不属于 Treeview 的其他元素。问题是 TreeView 有它自己的内置滚动 Pan
treeview - 展开 Windows 窗体 TreeView 节点而不选择它
当我通过单击 TreeView 节点右侧的加号来展开该节点时，该节点将被选中。我怎样才能避免这种情况？我希望能够在不更改所选节点的情况下展开节点(例如在 RegEdit.exe 中)，并且仅在单击节点
vba - 从 Treeview 对象变量设置 Treeview 控件？
我正在尝试设置一个 Treeview 对象，设置节点，然后更新控件以使值具有适当的格式。现在我有以下代码，当我设置一个控件时，它可以工作，但不是来自变量的控件。如何从变量设置本地控件？ Private
c# - 如何将一个 TreeView 实例的节点添加到同一 TreeView 的另一个实例
如何将节点填充到作为另一个 treeview1 实例的 newtreeview1 中？添加到“newtreeview1”的节点应该在 treeview1 的第一个实例中可用？例如；如果 treevi

首页

博学

6Ren·AI

商城

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