如何在kendo TreeList中选择父节点时选择所有子节点？ javascript

Question

I'm trying to select child nodes on parent node clicked.我正在尝试在单击的父节点上选择子节点。 I couldn't find any example for select api.我找不到选择 api 的任何示例。 Should i use checkbox instead?我应该使用复选框吗？

<button id="btn">Highlight third row</button>
<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "id" },
      { field: "name" },
      { field: "age" }
    ],
    dataSource: [
      { id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
      { id: 2, parentId: 1, name: "John Doe", age: 24 },
      { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
    ],
    selectable: "multiple row"
  });

</script>

I am trying to do that if select "1" (top parent), select 2,3 (child nodes).如果选择“1”（顶级父节点），选择 2,3（子节点），我会尝试这样做。 Hope there is native solution for javascript implementation.希望有 javascript 实现的本地解决方案。 Thanks in advice!谢谢指教！

Answer 1

The selection state is maintained by TreeList in the data items row rendering <tr k-state-selected> , and that state is not reflected in the TreeList dataSource .选择状态由 TreeList 在呈现<tr k-state-selected>的数据项行中维护，并且该状态不会反映在 TreeList dataSource 。 Also, the data source is the only place the child relationship is discoverable.此外，数据源是唯一可以发现子关系的地方。 So there is a bit of back and forth to deal with selections and children.所以有一些来回处理选择和孩子。

Also TreeList does not have a select event like TreeView so out of the box you do not know which nodes were selected or deselected.此外， TreeList没有像TreeView这样的select事件，因此开箱即用，您不知道选择或取消选择了哪些节点。

The change event fires when one action causes one or more rows (like shift-click can do) are caused to be selected or deselected.当一个操作导致一行或多行（如 shift-click 可以做到）被选中或取消选中时， change触发change事件。 Within your change handler you can only know the current state of all selected rows using the select() method.在change处理程序中，您只能使用select()方法了解所有选定行的当前状态。

Thus, within change , you need to track prior selection state and current selection state to find which rows changed selection state, which would merit their children to be selected or deselected according to your requirement.因此，在change ，您需要跟踪先前的选择状态和当前的选择状态以查找哪些行更改了选择状态，哪些行可以根据您的要求选择或取消选择其子项。

See this Dojo for an example.请参阅此 Dojo以获取示例。 It's not perfect because in the change event you can only determine selected nodes and not know if a 'reselection' occurred (ie clicked on a selected row again).这并不完美，因为在change事件中，您只能确定选定的节点，而不知道是否发生了“重新选择”（即再次单击选定的行）。 Anyway, the descent down the hierarchy of the TreeList is performed recursively and relies on the dataSource data item property .hasChildren and dataSource method .childNodes()无论如何，TreeList 层次结构的下降是递归执行的，并且依赖于dataSource数据项属性.hasChildren和 dataSource 方法.childNodes()

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>TreeList select (change)</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2020.1.219/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2020.1.219/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script></head>
<body>
  <p><a target="_blank" href="https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist">TreeList docs</a></p>
  <div id="treeList"></div>
<script>
  selected_uids = [];              // track selected uids
  autoselecting = false;

  $("#treeList").kendoTreeList({
    columns: [
      { field: "id" },
      { field: "name" },
      { field: "age" }
    ],
    dataSource: [
      { id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: false },
      { id: 2, parentId: 1, name: "John Doe", age: 24 },
      { id: 3, parentId: 1, name: "Jenny Doe", age: 3 },
      { id: 4, parentId: null, name: "Jane Mack", age: 22, expanded: false },
      { id: 5, parentId: 4, name: "John Mack", age: 24 },
      { id: 6, parentId: 4, name: "Jenny Mack", age: 3 }      
    ],
    selectable: "multiple row",
      change: function(e) {
      if (autoselecting) {
        e.preventDefault();
        return;
      }

      debugger;

      autoselecting = true;

      var selected_rows = this.select();
      console.log ('desel',selected_rows, selected_uids);

      // check for new deselections
      for (var index = 0; index < selected_uids.length; index++) {
        var selected_uid = selected_uids[index];
        if (selected_uid) {
            var row = $("tr[data-uid='" + selected_uid + "'].k-state-selected");
          if (row.length == 0) {
            // no such selected row for one that was previously tracked as selected
            deselectChildren(this, selected_uid);
            selected_uids[index] = null; // untrack
          }
        }
      }

      var selected_rows = this.select();
      console.log ('sel',selected_rows,selected_uids);

      // check for new selections
      for (var index = 0; index < selected_rows.length; index++) {        
        var data = this.dataItem(selected_rows[index]);
        console.log('data',data);
        if (jQuery.inArray(data.uid, selected_uids) == -1) { 
          // new selection
          selected_uids.push(data.uid);
          selectChildren(this, data);
        }
      }

      for (var i=0, j=0; i < selected_uids.length; i++) {
        if (selected_uids[i] != null) {
          if (i > j) {
            selected_uids[j] = selected_uids[i];
          }
          j++;
        }
      }

      selected_uids.length = j;

      autoselecting = false;
    },
  });

  function selectChildren(treeList, data) {
    if (!data.hasChildren) return;

    var children = treeList.dataSource.childNodes(data);    

    for (var index = 0; index < children.length; index++) {
      var child = children[index];
      if (jQuery.inArray(child.uid, selected_uids) == -1) {
          selected_uids.push(child.uid);
          treeList.select($("tr[data-uid='" + child.uid + "']"));
        selectChildren(treeList,child);
      }
    }
  }  

  function deselectChildren(treeList, uid) {
    var data = treeList.dataSource.getByUid(uid);
    if (!(data && data.hasChildren)) return;

    var children = treeList.dataSource.childNodes(data);

    for (var index = 0; index < children.length; index++) {
      var child = children[index];
            var row = $("tr[data-uid='" + child.uid + "'].k-state-selected");      
      if (row.length == 1) {
          var at = selected_uids.indexOf(child.uid);
        if (at >= 0) selected_uids[at] = null;
        row.removeClass('k-state-selected');
      }
      deselectChildren(treeList,child.uid);
    }
  }

  $("#treeList").data("kendoTreeList").select($("#treeList tbody>tr:nth(0)"));
</script>

</body>
</html>

如何在kendo TreeList中选择父节点时选择所有子节点？ javascript

问题描述

1 个解决方案

解决方案1
0 2020-03-01 03:56:40

如何在kendo TreeList中选择父节点时选择所有子节点？ javascript

问题描述

1 个解决方案

解决方案1 0 2020-03-01 03:56:40

解决方案1
0 2020-03-01 03:56:40