Kendo UI TreeView 常见情况

获取节点数据

您可以在select事件处理程序中获取TreeView节点数据。

function onSelect(e) {
    // This refers to the TreeView object.
    var dataItem = this.dataItem(e.node);

    console.log("Selected node with id=" + dataItem.id);
}

$("#treeview").kendoTreeView({
    dataSource: [
        { id: 1, text: "Item 1", items: [
            { id: 3, text: "Item 3" }
        ] },
        { id: 2, text: "Item 2" }
    ],
    select: onSelect
});

节点展开时重新加载子节点

由于dataItem是的Node类型，因此可以使用其loaded标志来强制从服务器重新加载节点。该Node.loaded方法设置loaded节点的标志并指示它需要刷新。

function onExpand(e) {
    var dataItem = this.dataItem(e.node);

    dataItem.loaded(false);
}

$("#treeview").kendoTreeView({
    dataSource: remoteDataSource,
    expand: onExpand
});

从TreeView收集检查的节点

以下示例演示如何从Kendo UI TreeView收集选中的节点。您也可以使用这种方法来收集扩展的节点。

var treeview = $("#treeview").data("kendoTreeView");
var checkedNodes = [];

function gatherStates(nodes) {
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].checked) {
            checkedNodes.push(nodes[i].id);
        }

        if (nodes[i].hasChildren) {
           gatherStates(nodes[i].children.view());
        }
    }
}

gatherStates(treeview.dataSource.view());

投影TreeView状态

在HierarchicalDataSource不支持数据投影。因此，您可能需要使用schema.parse配置选项来重新映射状态字段。

<div id="tree">
<script>
  $("#tree").kendoTreeView({
    dataSource: {
      transport: {
        read: function (options) {
          setTimeout(function() {
            options.success([
              { hasChildren: false, text: "Node 1", Downloaded: false },
              { hasChildren: true, text: "Node 2", Downloaded: true, items: [
                { hasChildren: false, text: "Node 2.1", Downloaded: false },
              ] }
            ]);
          }, 1000);
        }
      },
      schema: {
        parse: function(response) {
          return $.map(response, function(x) {
            x.expanded = x.Downloaded;
            return x;
          });
        },
        model: {
          id: "id",
          hasChildren: "hasChildren",
          children: "items"
        }
      }
    }
  });

</script>

 详见：https://docs.telerik.com/kendo-ui/controls/navigation/treeview/common-scenarios#gathering-checked-nodes-from-the-treeview