如何在kendo TreeList中選擇父節點時選擇所有子節點？ javascript

Question

我正在嘗試在單擊的父節點上選擇子節點。 我找不到選擇 api 的任何示例。 我應該使用復選框嗎？

<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>

如果選擇“1”（頂級父節點），選擇 2,3（子節點），我會嘗試這樣做。 希望有 javascript 實現的本地解決方案。 謝謝指教！

Answer 1

選擇狀態由 TreeList 在呈現<tr k-state-selected>的數據項行中維護，並且該狀態不會反映在 TreeList dataSource 。 此外，數據源是唯一可以發現子關系的地方。 所以有一些來回處理選擇和孩子。

此外， TreeList沒有像TreeView這樣的select事件，因此開箱即用，您不知道選擇或取消選擇了哪些節點。

當一個操作導致一行或多行（如 shift-click 可以做到）被選中或取消選中時， change觸發change事件。 在change處理程序中，您只能使用select()方法了解所有選定行的當前狀態。

因此，在change ，您需要跟蹤先前的選擇狀態和當前的選擇狀態以查找哪些行更改了選擇狀態，哪些行可以根據您的要求選擇或取消選擇其子項。

請參閱此 Dojo以獲取示例。 這並不完美，因為在change事件中，您只能確定選定的節點，而不知道是否發生了“重新選擇”（即再次單擊選定的行）。 無論如何，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